hello，大家好，本文主要介紹如何開始開發(fā)一個(gè)美觀、有情調(diào)、人見人愛的Android應(yīng)用程序，已知我們?cè)谑忻嫔嫌胁簧俨季謽O其精美，在視覺上讓人愛不釋手的應(yīng)用程序，如果讓我們著手開發(fā)，我們?cè)撊绾蜗率郑?/p>

在移動(dòng)互聯(lián)網(wǎng)公司都有這樣幾個(gè)部門–UX/UE及UI,UX有的也稱作UE是指做用戶體驗(yàn)的是User Experience的縮寫，這些人一般都畢業(yè)于美術(shù)學(xué)院專門搞設(shè)計(jì)，我們上面說到那些精美的程序往往都是由他們的手先設(shè)計(jì)出效果圖，然后交由UI,也稱GUI即Graphic User Interface或者直接稱作美工的人將效果圖做成低保真圖片交給我們屌絲碼農(nóng)來在開發(fā)中實(shí)現(xiàn)，領(lǐng)導(dǎo)審核通過后就有美工配合碼農(nóng)開搞了，碼農(nóng)和美工溝通怎么切圖，美工則負(fù)責(zé)出高保真像素圖片，額~~貌似扯遠(yuǎn)了，我們今天就來介紹如何將美工mm送過來的高保真應(yīng)用到我們開發(fā)中，這就是今天介紹的內(nèi)容，頁面布局。

我們可以暫時(shí)先將Android的一個(gè)界面比作網(wǎng)頁瀏覽器中的一個(gè)頁面，一個(gè)應(yīng)用有多個(gè)界面就類似于一個(gè)網(wǎng)站有多個(gè)頁面，所以Android應(yīng)用在沒有做到前端、后端分離之前，Android的一個(gè)個(gè)界面布局都需要我們碼農(nóng)自己搞（以前Web開發(fā)，也是由碼農(nóng)單搞，但隨著Web前端的單獨(dú)分離，越來越多的Web服務(wù)都前后端分離了，幾個(gè)碼農(nóng)專門負(fù)責(zé)后臺(tái)，再由幾個(gè)碼農(nóng)負(fù)責(zé)前端，這樣寫出的代碼更專一、耦合度更低，所以才出現(xiàn)了今天Web前端這個(gè)新興職業(yè)，我相信不久的將來移動(dòng)應(yīng)用開發(fā)也會(huì)前后端分離，這不僅是Android，也包括iOS）。

最普通也是最符合Android開發(fā)思想的頁面布局方式是：在Android項(xiàng)目工程中定義頁面布局的XML文件，即res目錄下的子目錄layout中定義。Android按層次定義界面元素：

View對(duì)象封裝最基本的界面元素，比如按鈕（Button）、輸入框（TextFileds）等等；ViewGroup則為View的容器（Container），常見的有LinearLayout、RelativeLayout等，也就是說每一個(gè)View對(duì)象都必須隸屬于一個(gè)ViewGroup，而ViewGroup又可以包含子ViewGroup。下圖為官網(wǎng)截圖，很好的解釋了這一關(guān)系。

需要注意的是ViewGroup在布局中是不可見的，ViewGroup只是很好的定義了它包含的內(nèi)容（View或者有一個(gè)ViewGroup）的布局，比如是網(wǎng)格布局或者線性布局。

本節(jié)內(nèi)容則主要在第一篇使用的HelloWorld程序中添加一個(gè)簡單的搜索頁面，從而做到Android頁面布局的基本入門。

我們?cè)趓es/layout/下新建一個(gè)名為search.xml的文件，并點(diǎn)擊OK：

添加ViewGroup
完了之后我們先考慮選擇一個(gè)ViewGroup，這里選最簡單最常用的線性布局LinearLayout：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal" >
</LinearLayout>

LinearLayout是一個(gè)ViewGroup，在代碼中為ViewGroup的子類，它規(guī)定了它的所有頁面元素要么為豎直對(duì)齊要么水平對(duì)齊。

android:orientation 屬性即為對(duì)齊方向，在這里我們選擇horizontal水平對(duì)齊。所有定義在這個(gè)LinearLayout中的頁面元素都會(huì)按水平對(duì)齊一字排開。

android:layout_width/height 因?yàn)檫@個(gè)Linearlayout已經(jīng)為最頂層的布局，所以我們指定layout_width和layout_height都為匹配最頂層的布局（因?yàn)椴淮嬖?，我的理解為即匹配設(shè)備屏幕的尺寸），所以它的值為match_parent。

添加EditText
搜索框我們可以選擇EditText這個(gè)View來實(shí)現(xiàn)，所以我們?cè)贚inearLayout這個(gè)節(jié)點(diǎn)下添加子節(jié)點(diǎn)EditText，內(nèi)容如下：

 <EditText android:id="@+id/edit_message"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint="@string/edit_message" />

android:id 這個(gè)表示為這個(gè)View元素定義全局唯一id，另外我們這個(gè)屬性的值比較奇怪，‘@'符號(hào)表示引用，緊隨id則表示因表示引用id，如果我們?cè)诓季謺r(shí)想引用某個(gè)View（比如相對(duì)布局時(shí)，相對(duì)某個(gè)View的位置）時(shí)，則使用‘@'符號(hào)加上id即可，還有如果你是第一次定義id則需要加上‘+'，在這里我定一個(gè)id的值為edit_message。

而同樣出現(xiàn)的layout_width和layout_height則為指定這個(gè)View的大小尺寸，我們賦值為wrap_content，意為根據(jù)自身內(nèi)容自適應(yīng)，如果你像剛才定義LinearLayout時(shí)使用match_parent則這個(gè)EditText就會(huì)撐的和LinearLayout一樣大。

android:hint 為提示語，這個(gè)只有在你的輸入框?yàn)榭盏臅r(shí)候才會(huì)顯示，我想我們都有這方面的使用經(jīng)驗(yàn)，它的值同樣出現(xiàn)了一個(gè)'@'并且后面是string，則表明引用的是字符串。

定義string內(nèi)容

因?yàn)槲覀儾]有定義hint string，所以預(yù)覽界面提示了一個(gè)警告，所以接下來我們需要定義這個(gè)字符串，打開res/values/strings.xml，添加這個(gè)string值，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">HelloWorld</string>
 <string name="edit_message">請(qǐng)輸入文字</string>
 <string name="btn_message">搜索</string>
</resources>

這時(shí)候我的預(yù)覽圖已經(jīng)變了，并警告消失：

添加Button

剛剛在定義string時(shí)，我一并定義了一個(gè)名為“搜索”的string，所以接下來我們回到之前的布局文件上，并添加一個(gè)Button的View，所以同樣在LinearLayout下添加一個(gè)Button節(jié)點(diǎn)，內(nèi)容如下:

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/btn_message" />

android:text 為這個(gè)按鈕上顯示的文字，這里同樣引用的是一個(gè)string，效果如下：

至此，我們的頁面布局就算完成了，接下來我們將其綁定到我們的HelloWorld程序中去，還打開之前的MyActivity java文件，并修改這個(gè)Activity綁定的頁面為search.xml，如下：

public class MyActivity extends Activity {
 /**
 * Called when the activity is first created.
 */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.search);
 }
}

運(yùn)行程序
代碼修改好了，我們就來試試顯示在Android真機(jī)上是什么感覺。

看起來并不是特別美觀，因?yàn)槲覀冊(cè)诎袳didText和Button這兩個(gè)View的大小都設(shè)定為wrap_content了即只根據(jù)View本身內(nèi)容的長度去自適應(yīng)，下一篇我們就來優(yōu)化這個(gè)問題。