Android五大布局
本篇開(kāi)始介紹Android的五大布局的知識(shí)授嘀，一個(gè)豐富的界面顯示總是要有眾多的控件來(lái)組成的憨琳，那么怎樣才能讓這些控件能夠按你的想法進(jìn)行擺放诫钓，從而自定義你所想要的用戶(hù)界面呢？這就牽涉到本章將要學(xué)習(xí)的知識(shí)————五大布局篙螟。本篇將依次對(duì)LinearLayout（線性布局）菌湃、RelativeLayout（相對(duì)布局）、TableLayout（表格布局）遍略、FrameLayout（幀布局）惧所、GridLayout（網(wǎng)格布局）進(jìn)行介紹。
LinearLayout（線性布局）
這是一個(gè)非常常用的布局绪杏，它會(huì)將其中的控件在線性方向上依次排列下愈，通過(guò)android:orientation屬性指定其控件的排列方向，有vertical（垂直方向）以及horizontal（水平方向）排列蕾久。新建UILayoutTsetOne項(xiàng)目势似，其他設(shè)置保持默認(rèn)。修改activity_main.xml中的代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
模擬器中運(yùn)行結(jié)果如下圖所示腔彰，從圖中可以看出叫编，定義的三個(gè)button控件按照vertical依次排列。
接下來(lái)將vertical參數(shù)改變?yōu)閔orizontal參數(shù)霹抛。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
運(yùn)行程序搓逾，效果如下，從圖中可以看出杯拐，定義的三個(gè)button組件按照horizontal依次排列霞篡。
attention！
倘若LinearLayout的排列方向指定為horizontal端逼，則內(nèi)部的控件就絕對(duì)不能將寬度指定為match_parent朗兵，因?yàn)槿绻@樣設(shè)置，單獨(dú)的控件將會(huì)將整個(gè)水平方向占滿(mǎn)顶滩，其他控件將沒(méi)有放置的位置了余掖。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
效果如圖：
同樣，倘若LinearLayout的排列方向指定為vertical礁鲁，則內(nèi)部的控件就絕對(duì)不能將高度指定為match_parent盐欺。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
效果如圖：
下面來(lái)看兩個(gè)長(zhǎng)得很像的屬性：android:gravity屬性和android:layout_gravity屬性赁豆。
- android:gravity屬性：用于指定文字在控件中的對(duì)齊方式∪呙溃可以選擇的值有：top魔种、bottom、left粉洼、right节预、center等，還可以用“|”來(lái)同時(shí)指定多個(gè)值属韧，其中center值將相當(dāng)于center_vertical|center_horizontal安拟，表示文字在垂直和水平方向都居中對(duì)齊。
- android:layout_gravity屬性：用于指定控件在布局中的對(duì)齊方式挫剑。其可選值和android:gravity屬性差不多去扣，需要注意的是，當(dāng)LinearLayout的排列方向是horizontal時(shí)只有垂直方向上的對(duì)齊方式才會(huì)生效樊破，因?yàn)榇藭r(shí)水平方向上的長(zhǎng)度是不固定的，每添加一個(gè)控件唆铐，水平方向上的長(zhǎng)度都會(huì)改變哲戚，因而無(wú)法指定該方向上的對(duì)齊方式。同樣艾岂，當(dāng)LinearLayout的排列方向是vertical時(shí)顺少，只有水平方向上的對(duì)齊方式才會(huì)生效。修改activity_main.xml中的代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button 3" />
</LinearLayout>
運(yùn)行效果如圖：
接下來(lái)王浴，我們學(xué)習(xí)另一個(gè)重要屬性：android:layout_weight脆炎，它允許我們使用比例的方式來(lái)指定控件的大小，在手機(jī)的適配性方面可以起到非常重要的作用氓辣。這里通過(guò)編寫(xiě)一個(gè)消息發(fā)送界面來(lái)做演示秒裕。所用到的控件有：一個(gè)文本編輯框和一個(gè)發(fā)送按鈕。
修改activity_main.xml中的代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/input_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type in Some words" />
<Button
android:id="@+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="send_msg" />
</LinearLayout>
運(yùn)行程序钞啸，效果如圖：
這里你會(huì)發(fā)現(xiàn)EditText和Button的寬度都被指定為了0dp几蜻，你可能會(huì)擔(dān)心這樣這兩個(gè)控件還能正常的顯示出來(lái)嗎？不用擔(dān)心体斩，因?yàn)檫@里梭稚，使用了android:layout_weight屬性，此時(shí)控件的寬度就不由android:layout_width來(lái)決定了絮吵，這里寫(xiě)成了0dp是一種比較標(biāo)準(zhǔn)的寫(xiě)法弧烤。另外，dp是Android中用于指定控件大小蹬敲、間距等屬性的單位暇昂∠牖茫可以看到這里通過(guò)android:layout_weight屬性將值指定為了1，這表示兩個(gè)控件在水平方向上平分寬度话浇。原理：系統(tǒng)會(huì)將所有控件指定的layout_weight值相加脏毯，得到一個(gè)總值，然后每個(gè)控件所占大小的比例就是用該控件指定的layout_weight值除以剛才算出的總值幔崖。因此如果想讓EditText占據(jù)屏幕寬度的3/5食店，Button占據(jù)屏幕寬度的2/5，只需要將EditText的layout_weight改成3赏寇，Button的layout_weight改成2就可以了吉嫩。重新運(yùn)行程序，效果如圖：
接著再來(lái)看一下如何實(shí)現(xiàn)在兩個(gè)控件之間用分割線進(jìn)行分割嗅定，效果如圖：
實(shí)現(xiàn)這種效果有兩種方式：
- 1.直接在布局中添加一個(gè)view,這個(gè)view的作用僅僅是顯示出一條線自娩，實(shí)現(xiàn)如下：
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" />
實(shí)現(xiàn)代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 1" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 2" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 3" />
</LinearLayout>
- 2.使用LinearLayout的一個(gè)divider屬性,直接為L(zhǎng)inearLayout設(shè)置分割線，這里需要準(zhǔn)備一張線的圖片 1)android:divider設(shè)置作為分割線的圖片 2)android:showDividers設(shè)置分割線的位置,none(無(wú)),beginning(開(kāi)始),end(結(jié)束),middle(每?jī)蓚€(gè)組件間) 3)dividerPadding設(shè)置分割線的Padding
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/thread"
android:orientation="vertical"
android:showDividers="middle"
android:dividerPadding="10dp"
tools:context="com.example.uilayouttestone.MainActivity" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
