前面我們通過(guò)《使用Android Studio創(chuàng)建Android項(xiàng)目詳細(xì)步驟及注意事項(xiàng)》介紹了創(chuàng)APP基本流程和步驟，顯而易見(jiàn)通過(guò)Android Studio創(chuàng)建項(xiàng)目是比較輕松的，接下來(lái)由南昌APP開(kāi)發(fā)公司工程師接著介紹如何規(guī)劃和設(shè)計(jì)界面布局。
一、用戶界面設(shè)計(jì)
? ? ? ?當(dāng)前，activity_quiz.xml文件定義了默認(rèn)的activity布局。應(yīng)用默認(rèn)的XML布局文件內(nèi)容經(jīng)常 改變，但總是與代碼如下所示文件相似。
? ? ? ?代碼清單1-1 默認(rèn)的activity布局（activity_quiz.xml）
? ? ? ? ? ? ? ?xmlns:tools="http://schemas.android.com/tools"
? ? ? ?android:layout_width="match_parent"
? ? ? ?android:layout_height="match_parent"
? ? ? ?android:paddingLeft="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingRight="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingTop="@dimen/activity_vertical_margin"
? ? ? ?android:paddingBottom="@dimen/activity_vertical_margin"
? ? ? ?tools:context=".QuizActivity">

? ? ? ? android:text="@string/hello_world"
? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content" />

? ? ? ?應(yīng)用activity的默認(rèn)布局定義了兩個(gè)組件（widget）：RelativeLayout和TextView。
? ? ? ?組件是用戶界面的構(gòu)造模塊。組件可以顯示文字或圖像，與用戶交互，甚至布置屏幕上的其 他組件。按鈕、文本輸入控件和選擇框等都是組件。
? ? ? ?Android SDK內(nèi)置了多種組件，通過(guò)配置各種組件可獲得所需的用戶界面及行為。每一個(gè)組 件都是View類或其子類（如TextView或Button）的一個(gè)具體實(shí)例。 圖1-
? ? ? ?9展示了代碼清單1-1中定義的RelativeLayout和TextView是如何在屏幕上顯示的。
? ? ? ?不過(guò)，圖1-9所示的默認(rèn)組件并不是我們需要的，QuizActivity的用戶界面需要下列五個(gè)組件：
? ? ? ?一個(gè)垂直LinearLayout組件；
? ? ? ?一個(gè)TextView組件；
? ? ? ?一個(gè)水平LinearLayout組件；
? ? ? ?兩個(gè)Button組件。 圖1-10展示了以上組件是如何構(gòu)成QuizActivity用戶界面的。

? ? ? ?下面我們?cè)赼ctivity_quiz.xml文件中定義這些組件。
? ? ? ?如代碼清單1-2所示，修改activity_quiz.xml文件。注意，需刪除的XML已打上刪除線，需添 加的XML以粗體顯示。我們統(tǒng)一使用這樣的版式約定。 代碼清單1-2 在XML文件（activity_quiz.xml）中定義組件
? ? ? ? ?xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
? ? ? ?android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingRight="@dimen/activity_horizontal_margin"
? ? ? ?android:paddingTop="@dimen/activity_vertical_margin"
? ? ? ?android:paddingBottom="@dimen/activity_vertical_margin"
? ? ? ?tools:context=".QuizActivity">

? ? ? ?android:text="@string/hello_world"
? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content" />



? ? ? ?android:layout_width="match_parent"
? ? ? ?android:layout_height="match_parent"
? ? ? ?android:gravity="center"
? ? ? ?android:orientation="vertical" >

? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:padding="24dp"
? ? ? ?android:text="@string/question_text" />

? ? ? ?android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ?android:orientation="horizontal" >

? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:text="@string/true_button" />

? ? ? ?android:layout_width="wrap_content"
? ? ? ?android:layout_height="wrap_content"
? ? ? ?android:text="@string/false_button" />



? ? ? ?參照代碼清單直接輸入代碼，就算不理解這些代碼也沒(méi)關(guān)系，你會(huì)在后續(xù)的學(xué)習(xí)中弄明白的。 需要特別注意的是，開(kāi)發(fā)工具無(wú)法校驗(yàn)布局XML內(nèi)容，請(qǐng)盡量避免輸入或拼寫(xiě)錯(cuò)誤。
? ? ? ?根據(jù)所使用的工具版本不同，有三行以android:text開(kāi)頭的代碼可能會(huì)產(chǎn)生錯(cuò)誤信息。暫 時(shí)忽略它們，稍后會(huì)處理。
? ? ? ?將XML文件與圖1-10所示的用戶界面進(jìn)行對(duì)照，可以看出組件與XML元素一一對(duì)應(yīng)。元素 的名稱就是組件的類型。
? ? ? ?各元素均有一組XML屬性。屬性可以看作是如何配置組件的指令。
? ? ? ?為便于理解元素與屬性的工作原理，接下來(lái)我們將以層次等級(jí)視角來(lái)研究布局。

? ? ? ?圖1-11 布局中組件及屬性的層級(jí)結(jié)構(gòu)
? ? ? ?從布局的視圖層級(jí)結(jié)構(gòu)可以看到，其根元素是一個(gè)LinearLayout組件。作為根元素， LinearLayout組件必須指定Android XML資源文件的命名空間屬性為http://schemas.android.com/ apk/res/android。
? ? ? ?LinearLayout組件繼承自View子類的ViewGroup組件。ViewGroup組件是個(gè)包含并配置其 他組件的特殊組件。如需以一列或一排的樣式布置組件，使用LinearLayout組件就可以了。其他ViewGroup子類還包括FrameLayout、TableLayout和RelativeLayout。
? ? ? ?若某個(gè)組件包含在一個(gè)ViewGroup中，該組件與ViewGroup即構(gòu)成父子關(guān)系。根 LinearLayout有兩個(gè)子組件：TextView和LinearLayout。作為子組件的LinearLayout本身還 有兩個(gè)Button子組件。
? ? ? ?
二、組件屬性
下面我們一起來(lái)看看配置組件的一些常用屬性。
? ? ? ? 1. android:layout_width和android:layout_height屬性
? ? ? ?幾乎每類組件都需要android:layout_width和android:layout_height屬性。以下是它 們的兩個(gè)常見(jiàn)屬性值（二選一）。 ?
? ? ? ? match_parent：視圖與其父視圖大小相同。 ?
? ? ? ? wrap_content：視圖將根據(jù)其展示的內(nèi)容自動(dòng)調(diào)整大小。 （以前還有個(gè)fill_parent屬性值，等同于match_parent，目前已廢棄不用。） 根
? ? ? ?LinearLayout組件的高度與寬度屬性值均為match_parent。LinearLayout雖然是根元 素，但它也有父視圖（View）——Android提供該父視圖來(lái)容納應(yīng)用的整個(gè)視圖層級(jí)結(jié)構(gòu)。
? ? ? ?其他包含在界面布局中的組件，其高度與寬度屬性值均被設(shè)置為wrap_content。請(qǐng)參照?qǐng)D 1-10理解該屬性值定義尺寸大小的作用。
? ? ? ?TextView組件比其包含的文字內(nèi)容區(qū)域稍大一些，這主要是android:padding="24dp"屬性 的作用。該屬性告訴組件在決定大小時(shí)，除內(nèi)容本身外，還需增加額外指定量的空間。這樣屏幕 上顯示的問(wèn)題與按鈕之間便會(huì)留有一定的空間，使整體顯得更為美觀。（不理解dp的意思？dp即 density-independent pixel，指與密度無(wú)關(guān)像素，后面的文章將介紹有關(guān)它的概念。）
? ? ? ? 2. android:orientation屬性
? ? ? ?android:orientation屬性是兩個(gè)LinearLayout組件都具有的屬性，它決定兩者的子組件 是水平放置還是垂直放置。根LinearLayout是垂直的，子LinearLayout是水平的。
? ? ? ?LinearLayout子組件的定義順序決定其在屏幕上顯示的順序。在豎直的LinearLayout中， 第一個(gè)定義的子組件出現(xiàn)在屏幕的最上端；而在水平的LinearLayout中，第一個(gè)定義的子組件 出現(xiàn)在屏幕的最左端。（如果設(shè)備文字從右至左顯示，如Arabic或者Hebrew，第一個(gè)定義的子組 件則出現(xiàn)在屏幕的最右端。）
? ? ? ? 3. android:text屬性
? ? ? ?TextView與Button組件具有android:text屬性。該屬性指定組件要顯示的文字內(nèi)容。
? ? ? ? 請(qǐng)注意，android:text屬性值不是字符串值，而是對(duì)字符串資源（string resources）的引用。
? ? ? ?字符串資源包含在一個(gè)獨(dú)立的名為strings的XML文件中，雖然可以硬編碼設(shè)置組件的文本屬性 值，如android:text="True"，但這通常不是個(gè)好主意。比較好的做法是：將文字內(nèi)容放置在獨(dú) 立的字符串資源XML文件中，然后引用它們。這樣也便于對(duì)應(yīng)用進(jìn)行本地化。
? ? ? ?需要在activity_quiz.xml文件中引用的字符串資源目前還不存在。現(xiàn)在我們來(lái)添加這些資源。
三、創(chuàng)建字符串資源
? ? ? ?每個(gè)項(xiàng)目都包含一個(gè)名為strings.xml的默認(rèn)字符串文件。
? ? ? ?在項(xiàng)目工具窗口中，找到app/res/values目錄，顯示目錄內(nèi)容，然后打開(kāi)strings.xml文件。
? ? ? ?可以看到，項(xiàng)目模版已經(jīng)添加了一些字符串資源。刪除不需要的hello_world部分，添加應(yīng) 用布局需要的三個(gè)新的字符串，如代碼清單1-3所示。
? ? ? ?代碼清單1-3 添加字符串資源（strings.xml）
? ? ? ?
? ? ?? ? ? ? ?GeoQuiz
? ? ? ? ? ? ??
? ? ? ?? ? ? ? ? ?? ? Constantinople is the largest city in Turkey.
? ? ? ? ? ? ??
? ? ?? ? ? ? ?TRUE
? ? ? ? ? ? ?? FALSE
? ? ? ?
? ? ? ?（項(xiàng)目已默認(rèn)配置好應(yīng)用菜單，請(qǐng)勿刪除action_settings字符串設(shè)置，否則將導(dǎo)致與應(yīng)用 菜單相關(guān)的其他文件發(fā)生版式錯(cuò)誤。）
? ? ? ?現(xiàn)在，在GeoQuiz項(xiàng)目的任何XML文件中，只要引用到@string/false_button，應(yīng)用運(yùn)行 時(shí)，就會(huì)得到文本“FALSE”。
? ? ? ? 保存strings.xml文件。這時(shí)，activity_quiz.xml布局曾經(jīng)提示缺少字符串資源的信息應(yīng)該不會(huì) 再出現(xiàn)了。（如仍有錯(cuò)誤信息，那么檢查一下這兩個(gè)文件，確認(rèn)是否存在輸入或拼寫(xiě)錯(cuò)誤。）
? ? ? ?默認(rèn)的字符串文件名為strings.xml，當(dāng)然也可以按個(gè)人喜好任意取名。一個(gè)項(xiàng)目也可以有多 個(gè)字符串文件。只要這些文件都放置在res/values/目錄下，并且含有一個(gè)resources根元素，以及 多個(gè)string子元素，應(yīng)用就能找到并正確使用它們。
? ? ? ?
四、預(yù)覽界面布局
? ? ? ?
? ? ? ?至此，應(yīng)用的界面布局已經(jīng)完成，現(xiàn)在我們使用圖形布局工具來(lái)進(jìn)行實(shí)時(shí)預(yù)覽。首先，確認(rèn) 保存了所有相關(guān)文件并且無(wú)錯(cuò)誤發(fā)生，然后回到activity_quiz.xml文件，點(diǎn)擊編輯區(qū)右邊的Tab頁(yè) 打開(kāi)預(yù)覽工具窗口（如果還沒(méi)打開(kāi)的話），如圖1-12所示。

圖1-12 在圖形布局工具中預(yù)覽界面布局（activity_quiz.xml）
? ?本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌APP開(kāi)發(fā)公司-百恒網(wǎng)絡(luò) http://www.51yjwy.com/app/index.html 如轉(zhuǎn)載請(qǐng)注明出處!