線性佈局（LinearLayout）——Mars Android開發視頻之第一季第十二集（重）

##1·LinearLayout佈局的嵌套 下圖爲三個線性佈局嵌套的結果。最外層爲一個水平排列的線性佈局，內層爲兩個垂直排列的線性佈局， 其中每一個包含兩個文本框。

###1.1·實現：

首先，外層爲水平排列的線性佈局

<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:padding="10dp"
    android:orientation="horizontal">

</LinearLayout>

而後在裏面添加兩個垂直排列的線性佈局，每一個含兩個文本框：

第一個

<LinearLayout 
        android:layout_width="wrap_content"
    	android:layout_height="match_parent"
    	android:layout_margin="10dp"
    	android:padding="5dp"
    	android:background="@drawable/border"<!--給邊框設置的顏色，詳情見附錄-->
		android:orientation="vertical">
		
        <TextView 
            android:id="@+id/textView_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00FFFF"
            android:textSize="15sp"
            android:text="文本框1"/>
        <TextView 
            android:id="@+id/textView_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0000"
            android:textSize="15sp"
            android:text="文本框2"/>
        
    </LinearLayout>

第二個：

<LinearLayout 
        android:layout_width="wrap_content"
    	android:layout_height="match_parent"
    	android:background="@drawable/border"
    	android:padding="5dp"
    	android:layout_margin="10dp"
		android:orientation="vertical">
		
        <TextView 
            android:id="@+id/textView_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:textSize="15sp"
            android:text="文本框3"/>
        <TextView 
            android:id="@+id/textView_4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0000"
            android:textSize="15sp"
            android:text="文本框4"/>
        
    </LinearLayout>

至此，咱們就完成了一個線性佈局嵌套-----水平方向的線性佈局嵌套兩個垂直方向的線性佈局：

##2·layout_weight屬性 ###2.1·做用: 子控件佔父控件的空餘空間的比例

• 要求1：子控件並未佔滿父控件的全部空間，也就是要有空餘空間。

• 要求2：layout_weight的值（整型）用於指定父控件的空閒空間的分配比例

例： 控件1和控件2的layout_weight屬性值都設置爲1的話。

它們將平分父控件的空閒空間，其效果爲：

爲了方便理解，咱們用剛纔的代碼作個試驗：

咱們把文本框3和4的layout_weight屬性設置爲1，文本框1和2不變，效果爲：

父控件白色空餘部分平均分配給了文本框3和4.

注意，平均分配的部分僅僅是父控件的空餘空間。兩個子控件所佔空間並不是必定相等。

一樣的代碼，我僅僅將文本框3的文本內容多增長了一點，就是這樣一種效果。 layout_weight爲1的話，子控件並不是必定相等，它們僅僅是平均分配了父控件的空餘空間而已。

###2.2·精確控制子控件在整個父控件中所佔比例 假如，咱們想要讓兩個子控件在父控件中精確的佔據三分之一，和三分之二的空間。

那麼咱們只需將：

• 兩個子控件的高度設置爲0dp（佈局若是是水平排列，那麼就將寬度設置爲0dp）；
• layout_weight分別設置爲1和2。

這時的效果爲：

如此，咱們就實現了，精確控制兩個子控件分別佔據整個父控件的三分之一和三分之二。 ##3·練習 實現這樣的佈局：

###3.1實現： 最外層一個垂直方向的線性佈局：

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

</LinearLayout>

第一部分爲一個文本域： （內容居中使用gravity屬性）

<TextView 
	    android:id="@+id/title"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:text="猜拳遊戲"
	    android:textSize="20dp"
	    android:gravity="center"/>

接着是一個按鈕（中間那個複雜的部分留在最後來實現）：

<Button
	    android:id="@+id/startBtn"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:text="肯定"/>

接着是兩個文本域，它們須要放在水平的線性佈局裏：

<LinearLayout 
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    
	</LinearLayout>

在水平的線性佈局裏放入兩個寬度同樣的文本域：

<TextView 
	        android:id="@+id/resultTextView"
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="wrap_content"
	        android:text="結果"/>
	    
	    <TextView 
	        android:id="@+id/testResultTextView"
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="wrap_content"
	        android:text="測試結果"/>

最後是，中間複雜的部分。

首先，是一個水平線性佈局：

<LinearLayout 
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    
	    
	</LinearLayout>

而後在這個線性佈局中，又包含兩個寬度相等的垂直線性佈局：

<LinearLayout 
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="match_parent"
	        android:orientation="vertical">
	        
	    </LinearLayout>
	    <LinearLayout 
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="match_parent"
	        android:orientation="vertical">
	        
	    </LinearLayout>

而後在兩個垂直線性佈局中，各有一個圖片視圖：

<ImageView 
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:src="@drawable/z"/>

最後在圖片下面有一組單選按鈕:

<RadioGroup 
	            android:id="@+id/radioGroup_1"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:orientation="vertical">
	            
	            <RadioButton 
	                android:id="@+id/radioBtn_Cut_A"
	                android:layout_width="wrap_content"
	                android:layout_height="wrap_content"
	                android:text="剪刀"/>
	            <RadioButton 
	                android:id="@+id/radioBtn_Rock_A"
	                android:layout_width="wrap_content"
	                android:layout_height="wrap_content"
	                android:text="石頭"/>
	            <RadioButton 
	                android:id="@+id/radioBtn_Cloth_A"
	                android:layout_width="wrap_content"
	                android:layout_height="wrap_content"
	                android:text="布"/>	            	            
	        </RadioGroup>

這樣，就完成了。

##4·附錄 給邊框設置顏色：

首先，在res目錄下的drawable文件夾下建立一個border.xml 而後替換爲如下代碼，以後在經過android:background="@drawable/border.xml"調用便可。：

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
  
  <solid android:color="#FFFFFF" />

	<stroke android:width="1dp" android:color="#000000" />

	<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" />
</shape>