Android UI系列-----LinearLayout的綜合使用

這裡將會對LinearLayout的佈局方式進行一個綜合的使用，通過一個例子來看看LinearLayout的巢狀佈局方式，在這之前首先介紹三個屬性：

1.①android:layout_weigth：這個屬性是用來控制子控制元件佔據的比例的。如果一個父控制元件在擺放了子控制元件後，還有剩餘空間，那麼我們可以通過layout_weigth這個屬性可以將剩餘的空間按比例分配給子控制元件。注意：layout_weight 瓜分的是父控制元件的剩餘空間，而不是瓜分整個父控制元件。

例如：

<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="wrap_content"
    android:background="#AC8720"
    android:baselineAligned="false"
    android:orientation="horizontal"
    tools:context=".MainActivity" >

    <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#ABCDEF"
        android:layout_weight="1"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="android"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="android"/>
    </LinearLayout>
    
    <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#FEDCBA"
        android:layout_weight="1"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="java"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="java"/>
    </LinearLayout>

</LinearLayout>

小技巧：既然layout_weight瓜分的是父控制元件的剩餘空間，那麼我們如果要設定子控制元件佔同樣的空間比例的時候，可以將子控制元件的 layout_width 設定成 0dp，然後將layout_weigth設定成1，因為如果layout_width設定成0dp，則表示寬度為0，那麼所有的空間都是剩餘空間，然後設定layout_weigth=1，這樣兩個控制元件就佔同樣的空間了。即：

android:layout_width="0dp"
android:layout_weight="1"

②android:layout_gravity：這個屬性是用來設定控制元件的放置位置的，例如居中放置，居左放置等。

③android:gravity：這個屬性是用來設定控制元件中字型的放置位置的，同樣可以設定居中、居左等。

2.通過一個例項來熟悉一下LinearLayout的使用方法：

佈局檔案的程式碼如下：

<?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" >
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="猜拳遊戲"
        android:textSize="30sp"/>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <LinearLayout 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_weight="1"
            android:orientation="vertical">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"
                android:scaleType="centerCrop"/>
            <RadioGroup 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <RadioButton 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="石頭"/>
                <RadioButton 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="剪子"/>
                <RadioButton 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="布"/>
            </RadioGroup>
        </LinearLayout>
        <LinearLayout 
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:orientation="vertical">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"
                android:scaleType="centerCrop"/>
            <RadioGroup 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <RadioButton 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="石頭"/>
                <RadioButton 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="剪子"/>
                <RadioButton 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="布"/>
            </RadioGroup>
        </LinearLayout>
    </LinearLayout>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="確定"
        android:textSize="30sp"/>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="結果"
            android:textSize="20sp"/>
        <TextView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="測試結果"
            android:textSize="20sp"/>
    </LinearLayout>

</LinearLayout>