Android五大布局詳解——LinearLayout（線性布局）

Android五大布局

本篇開始介紹Android的五大布局的知識，一個豐富的界面顯示總是要有眾多的控件來組成的，那么怎樣才能讓這些控件能夠按你的想法進行擺放，從而自定義你所想要的用戶界面呢？這就牽涉到本章將要學習的知識————五大布局。本篇將依次對LinearLayout（線性布局）、RelativeLayout（相對布局）、TableLayout（表格布局）、FrameLayout（幀布局）、GridLayout（網格布局）進行介紹。

LinearLayout（線性布局）

這是一個非常常用的布局，它會將其中的控件在線性方向上依次排列，通過android:orientation屬性指定其控件的排列方向，有vertical（垂直方向）以及horizontal（水平方向）排列。新建UILayoutTsetOne項目，其他設置保持默認。修改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>

模擬器中運行結果如下圖所示，從圖中可以看出，定義的三個button控件按照vertical依次排列。

接下來將vertical參數改變為horizontal參數。

<?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>

運行程序，效果如下，從圖中可以看出，定義的三個button組件按照horizontal依次排列。

attention！
倘若LinearLayout的排列方向指定為horizontal，則內部的控件就絕對不能將寬度指定為match_parent，因為如果這樣設置，單獨的控件將會將整個水平方向占滿，其他控件將沒有放置的位置了。

<?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，則內部的控件就絕對不能將高度指定為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>

效果如圖：

下面來看兩個長得很像的屬性：android:gravity屬性和android:layout_gravity屬性。

• android:gravity屬性：用於指定文字在控件中的對齊方式。可以選擇的值有：top、bottom、left、right、center等，還可以用“|”來同時指定多個值，其中center值將相當於center_vertical|center_horizontal，表示文字在垂直和水平方向都居中對齊。
• android:layout_gravity屬性：用於指定控件在布局中的對齊方式。其可選值和android:gravity屬性差不多，需要注意的是，當LinearLayout的排列方向是horizontal時只有垂直方向上的對齊方式才會生效，因為此時水平方向上的長度是不固定的，每添加一個控件，水平方向上的長度都會改變，因而無法指定該方向上的對齊方式。同樣，當LinearLayout的排列方向是vertical時，只有水平方向上的對齊方式才會生效。修改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>

運行效果如圖：

接下來，我們學習另一個重要屬性：android:layout_weight，它允許我們使用比例的方式來指定控件的大小，在手機的適配性方面可以起到非常重要的作用。這里通過編寫一個消息發送界面來做演示。所用到的控件有：一個文本編輯框和一個發送按鈕。
修改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>

運行程序，效果如圖：

這里你會發現EditText和Button的寬度都被指定為了0dp，你可能會擔心這樣這兩個控件還能正常的顯示出來嗎？不用擔心，因為這里，使用了android:layout_weight屬性，此時控件的寬度就不由android:layout_width來決定了，這里寫成了0dp是一種比較標准的寫法。另外，dp是Android中用於指定控件大小、間距等屬性的單位。可以看到這里通過android:layout_weight屬性將值指定為了1，這表示兩個控件在水平方向上平分寬度。原理：系統會將所有控件指定的layout_weight值相加，得到一個總值，然后每個控件所占大小的比例就是用該控件指定的layout_weight值除以剛才算出的總值。因此如果想讓EditText占據屏幕寬度的3/5，Button占據屏幕寬度的2/5，只需要將EditText的layout_weight改成3，Button的layout_weight改成2就可以了。重新運行程序，效果如圖：

接着再來看一下如何實現在兩個控件之間用分割線進行分割，效果如圖：

實現這種效果有兩種方式：

• 1.直接在布局中添加一個view,這個view的作用僅僅是顯示出一條線，實現如下：

<View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000000" />

實現代碼如下：

<?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的一個divider屬性,直接為LinearLayout設置分割線，這里需要准備一張線的圖片 1)android:divider設置作為分割線的圖片 2)android:showDividers設置分割線的位置,none(無),beginning(開始),end(結束),middle(每兩個組件間) 3)dividerPadding設置分割線的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>