第八章 Android 開發(fā)常見的UI布局

?? Android 實際開發(fā)過程中燕差，要想你設計的界面美觀，布局的合理利用還是不能少的坝冕。一個復雜的頁面徒探，由繁化簡的過程就是對布局頁面的合理利用。之前講過了基礎控件喂窟，在布局中测暗，嵌套基礎控件是開發(fā)頁面的基礎。
??Android 常見的UI布局包括了：線性布局（LinearLayout）磨澡，幀布局（FrameLayout）碗啄，表格布局（TableLayout），相對布局（RelativeLayout）.有時還有絕對布局（AbsoluteLayout）這個布局界面代碼太剛性稳摄，不建議采納稚字。

1.AbsoluteLayout 絕對布局

??為什么我們在開發(fā)過程中不建議采納AbsoluteLayout這個絕對布局呢？因為我們知道界面設計是在二維的平面上進行的厦酬。起點在屏幕的左上角（0,0）胆描。以此為起點向右和向下遞增。在此布局中仗阅，所有的子控件允許重疊昌讲。那么可能出現控件重疊被覆蓋的情況，所以實際開發(fā)過程中减噪，通常不采用這樣的布局短绸。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
    <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#ff521225" android:gravity="center" android:layout_x="50dp" android:layout_y="50dp" android:text="1"/>
    <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#ff654321" android:gravity="center" android:layout_x="25dp" android:layout_y="25dp" android:text="2"/>
    <TextView  android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:layout_x="125dp" android:layout_y="125dp" android:text="3"/>
</AbsoluteLayout>

這里有三個TextView控件，顯示效果為：

絕對布局

控件1 被遮擋了筹裕。

2.線性布局

2.1 android :orientation 設置方向

??線性布局是我們在實際開發(fā)過程中使用頻率較高的布局醋闭。顧名思義，線性布局的子控件在布局的時候只能成線狀橫向或者豎向排列朝卒∧考猓可以通過 android:orientation 屬性指定布局方向。

//豎向排列
android:orientation="vertical"   
//橫向排列
android:orientation="horizontal"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:orientation="horizontal"
    android:gravity="center"
  >
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="1"
        android:textSize="20sp"
        android:background="#f00"
        android:textColor="#fff"
        android:gravity="center"
        android:layout_margin="10dp"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="1"
        android:textSize="20sp"
        android:background="#f00"
        android:textColor="#fff"
        android:gravity="center"
        android:layout_margin="10dp"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="1"
        android:textSize="20sp"
        android:background="#f00"
        android:textColor="#fff"
        android:gravity="center"
        android:layout_margin="10dp"/>
</LinearLayout>

線性布局橫向排列

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:orientation="vertical"
    android:gravity="center"
  >
...
</LinearLayout>

線性布局橫向排列

2.2 android:layout_weight 設置權重

??在實際開發(fā)過程中扎运，你的控件所占的寬高不一定需要固定的數值瑟曲，例如在android:orientation="horizontal" 的情況下，不同的屏幕手機適配是不一樣的豪治，你需要的僅僅是橫向排滿就好了洞拨。這時候使用 android：layout_weight 屬性就特別的方便。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:orientation="vertical"
    android:gravity="center"
  >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="#0f0">
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:text="1"
            android:textSize="20sp"
            android:background="#f00"
            android:textColor="#fff"
            android:gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
           />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:text="1"
            android:textSize="20sp"
            android:background="#f00"
            android:textColor="#fff"
            android:gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
          />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:text="1"
            android:textSize="20sp"
            android:background="#f00"
            android:textColor="#fff"
            android:gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
          />
    </LinearLayout>
</LinearLayout>

線性布局的權重

設置權重的時候负拟，將你需要設置的控件的寬度或者高度設置為0dp,這樣就會自動幫你占滿烦衣。
如果你只將其中一個設置 android:layout_weight="1",其他的沒有設置，那么它會將除了其他控件占的位置以外的空白處占據掩浙。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:orientation="vertical"
    android:gravity="center"
  >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="#0f0">
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="1"
            android:textSize="20sp"
            android:background="#f00"
            android:textColor="#fff"
            android:gravity="center"
           />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="1"
            android:textSize="20sp"
            android:background="#0f0"
            android:textColor="#fff"
            android:gravity="center"
          />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="1"
            android:textSize="20sp"
            android:background="#00f"
            android:textColor="#fff"
            android:gravity="center"
          />
    </LinearLayout>
</LinearLayout>

線性布局的權重

3. 相對布局

??相對布局花吟，顧名思義，位置都是以某一個參照點為標準厨姚，設置它的相對位置衅澈。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="name" />

    <TextView
        android:layout_width="96dp"
        android:layout_height="50dp"
        android:layout_below="@id/name"
        android:text="GONE"
        android:background="#0093ff"
        android:gravity="center"
        android:layout_alignParentLeft="true"
        />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true"
        android:text="DONE" />
</RelativeLayout>

相對布局

3.1相對布局的基本屬性

3.1.1 id 的使用

??給控件設置id，是為了在代碼中能引用到谬墙，所以創(chuàng)建控件的id格式為： android :id ="@+id/自己設置id的名稱",
??實際使用的時候今布，有時候可能會需要引用該控件。這時候你需要的是得到該id的值拭抬，再引用例如: android : layout_below="@id/引用的id的名稱".

  <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="name" />

 <TextView
        android:layout_width="96dp"
        android:layout_height="50dp"
        android:layout_below="@id/name"
        android:text="GONE"
        android:background="#0093ff"
        android:gravity="center"
        android:layout_alignParentLeft="true"
        />

3.1.2 相對位置屬性

//在父布局居中顯示
android:layout_centerInParent="true"
//水平居中
android:layout_centerHorizontal="true"
//垂直居中
android:layout_centerVertical="true"

//在某個控件的下面
android:layout_below="@id/btn1"
// 在某個控件的上面
android:layout_above="@id/btn1"
//位于父布局的右邊
android:layout_alignParentRight="true"
//位于父布局的左邊
  android:layout_alignParentLeft="true"
//位于父布局的頂部
android:layout_alignParentTop="true"
//位于父布局的底部
android:layout_alignParentBottom="true"

4. 表格布局

??表格布局使用于多行多列的布局格式部默，每個TableLayout是由多個TableRow組成，一個TableRow就表示TableLayout中的每一行造虎，這一行可以由多個子元素組成傅蹂。實際上TableLayout和TableRow都是LinearLayout的子類。但是TableRow的參數android:orientation屬性值固定為horizontal算凿，android : layout_width = MATCH_PARENT份蝴，android : layout_height = WRAP_CONTENT。所以TableRow實際是一個橫向的線性布局澎媒，且所以子元素寬度和高度一致搞乏。注意：在TableLayout中，單元格可以為空戒努，但是不能跨列请敦，意思是不能有相鄰的單元格為空。在TableLayout布局中储玫，一列的寬度由該列中最寬的那個單元格指定侍筛，而該表格的寬度由父容器指定∪銮睿可以為每一列設置以下屬性：
Shrinkable 表示該列的寬度可以進行收縮匣椰，以使表格能夠適應父容器的大小
Stretchable 表示該列的寬度可以進行拉伸，以使能夠填滿表格中的空閑空間
Collapsed 表示該列會被隱藏
TableLayout中的特有屬性：
android:collapseColumns
android:shrinkColumns
android:stretchColumns = "0,1,2,3"http:// 表示產生4個可拉伸的列

    android:shrinkColumns="0,1,2"  // 設置三列都可以收縮    
    android:stretchColumns="0,1,2" // 設置三列都可以拉伸 如果不設置這個端礼，那個顯示的表格將不能填慢整個屏幕

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:shrinkColumns="0,1,2"
    android:stretchColumns="0,1,2"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button 
            android:gravity="center"
            android:padding="10dp"
            android:text="Button1"/>
     

        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button2">
        </Button>
        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button3">
        </Button>
    </TableRow>
    <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button4">
        </Button>

        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button5">
        </Button>
    </TableRow>
    <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button6">
        </Button>
        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button7">
        </Button>
        <Button android:gravity="center"
            android:padding="10dp"
            android:text="Button8">
        </Button>
    </TableRow>
</TableLayout>

表格布局

5.幀布局

??幀布局禽笑，也可以說是層次布局入录。在這個布局中，整個界面被當成一塊空白備用區(qū)域佳镜，所有的子元素都不能被指定放置的位置僚稿，它們統(tǒng)統(tǒng)放于這塊區(qū)域的左上角，并且后面的子元素直接覆蓋在前面的子元素之上蟀伸，將前面的子元素部分和全部遮擋蚀同。如下，第一個Button被第二個Button完全遮擋啊掏，第三個Button遮擋了第二個Button的部分位置蠢络。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    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="50dp"
        android:layout_height="50dp"
        android:gravity="center" 
        android:text="按鈕1"/>
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:gravity="center" 
        android:text="按鈕2"/>
    <TextView 
        android:layout_width="100dp" 
        android:layout_height="100dp" 
        android:gravity="center" 
        android:background="#f52f5f"
        android:text="按鈕3"/>
</FrameLayout>

幀布局

幀布局的定位方式欠缺，所以實際應用場景比較少迟蜜。

6.百分比布局

??在LinearLayout布局中刹孔，支持layout_weight 屬性實現按比例指定控件大小。別的布局不支持小泉，如果在RelativeLayout的布局中實現兩個按鈕平分布局寬度的效果比較困難芦疏。為此Android 引入了全新的百分比布局，解決這樣的問題微姊，使用起來也很簡單酸茴。
??由于LinearLayout 已經可以處理按比例指定控件的大小。所以百分比布局只為了FrameLayout和 RelativeLayout 這兩個提供了 PercentFrameLayout和PercentRelativeLayout這兩個全新的布局方式兢交。下面是使用的步驟

1.打開 build.gradle 文件薪捍，在dependencies閉包中加上 compile 'com.android.support:percent:25.3.1' ,后面的版本號可按照自己的版本號寫。添加完了之后 sync now一下配喳。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
     compile 'com.android.support:percent:25.3.1'
    testCompile 'junit:junit:4.12'
}

2.創(chuàng)建一個layout文件酪穿，最外層使用PercentFrameLayout ，這個布局不是系統(tǒng)自帶的布局需要把完整的路徑寫出來晴裹，所以還要加一個 xmlns:app="http://schemas.android.com/apk/res-auto" 然后添加四個button 控件被济，引用 app:layout_widthPercent="50%"，app : layout_heightPercent = "50%"來設置它所占的布局的百分比涧团。

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button 
        android:id="@+id/btn01"
        android:text="Button01"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/btn02"
        android:text="Button02"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>   
    <Button
    android:id="@+id/btn03"
    android:text="Button03"
    android:layout_gravity="left|bottom"
    app:layout_widthPercent="50%"
    app:layout_heightPercent="50%"/>   
    <Button
    android:id="@+id/btn04"
    android:text="Button04"
    android:layout_gravity="right|bottom"
    app:layout_widthPercent="50%"
    app:layout_heightPercent="50%"/>
</android.support.percent.PercentFrameLayout>

百分比布局

最后編輯于：2017.12.10 07:48:52

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末只磷，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子泌绣，更是在濱河造成了極大的恐慌钮追，老刑警劉巖，帶你破解...
沈念sama閱讀 206,482評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件阿迈，死亡現場離奇詭異元媚，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
沈念sama閱讀 88,377評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門刊棕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來炭晒，“玉大人，你說我怎么就攤上這事甥角⊙。” “怎么了？”我有些...
開封第一講書人閱讀 152,762評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵蜈膨，是天一觀的道長。經常有香客問我牺荠，道長翁巍，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,273評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任休雌，我火速辦了婚禮灶壶，結果婚禮上，老公的妹妹穿的比我還像新娘杈曲。我一直安慰自己驰凛，他們只是感情好，可當我...
茶點故事閱讀 64,289評論 5贊 373
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布担扑。她就那樣靜靜地躺著恰响，像睡著了一般。火紅的嫁衣襯著肌膚如雪涌献。梳的紋絲不亂的頭發(fā)上胚宦，一...
開封第一講書人閱讀 49,046評論 1贊 285
城市分裂傳說
那天，我揣著相機與錄音燕垃，去河邊找鬼枢劝。笑死，一個胖子當著我的面吹牛卜壕，可吹牛的內容都是我干的您旁。我是一名探鬼主播，決...
沈念sama閱讀 38,351評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼轴捎，長吁一口氣：“原來是場噩夢啊……” “哼鹤盒！你這毒婦竟也來了？” 一聲冷哼從身側響起轮蜕，我...
開封第一講書人閱讀 36,988評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤昨悼，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后跃洛，有當地人在樹林里發(fā)現了一具尸體率触，經...
沈念sama閱讀 43,476評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 35,948評論 2贊 324
?白月光啟示錄
正文我和宋清朗相戀三年汇竭，在試婚紗的時候發(fā)現自己被綠了葱蝗。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片穴张。...
茶點故事閱讀 38,064評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖两曼，靈堂內的尸體忽然破棺而出皂甘，到底是詐尸還是另有隱情，我是刑警寧澤悼凑，帶...
沈念sama閱讀 33,712評論 4贊 323
?日本核電站爆炸內幕
正文年R本政府宣布偿枕，位于F島的核電站，受9級特大地震影響户辫，放射性物質發(fā)生泄漏渐夸。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,261評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一渔欢、第九天我趴在偏房一處隱蔽的房頂上張望墓塌。院中可真熱鬧，春花似錦奥额、人聲如沸苫幢。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,264評論 0贊 19
一樁弒父案垫挨，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽韩肝。三九已至，卻和暖如春棒拂，著一層夾襖步出監(jiān)牢的瞬間伞梯，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,486評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工帚屉，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谜诫，地道東北人。一個月前我還...
沈念sama閱讀 45,511評論 2贊 354
代替公主和親
正文我出身青樓攻旦，卻偏偏與公主長得像喻旷，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子牢屋，可洞房花燭夜當晚...
茶點故事閱讀 42,802評論 2贊 345