android布局------LinearLayout(線性布局)詳解

線性布局(LinearLayout)

ps:線性布局的話是我們用的最多的一個布局方式，一種好的布局習慣是利用LinearLayout的weight布局參數和RelativeLayout相對布局來完成界面的布局

至于AbsoluteLayout坐标(絕對布局)我們使用得比較少,因為現在很多螢幕的分辨率都是不同,利用坐标布局會導緻應用的可移植性降低

基本屬性的使用

先給大家說下比較重要以及常用的屬性

android:orientation:布局中元件的排列方式,有horizontal(水準),vertical(豎直,預設),兩種方式

android:gravity:控制元件所包含的子元素的對其方式,可通過時組合多種對其方式:left|buttom

android:layout_gravity:控制該元件在父容器裡的對其方式

android:layout_width:布局的寬度,通常不直接寫數字的,用wrap_content(元件實際大小),

   fill_parent或者match_parent填滿父容器

android:layout_height:布局的高度,參數同上

android:id:為該元件設定一個資源id,在java檔案中可以通過findViewById(id)找到該元件

android:background:為該元件設定一個背景圖檔,或者直接用顔色覆寫

好吧先奉上我們要實作的界面

如圖,其實很簡單,在豎直方向的線性布局中依次加入:TextView + EditText + LinearLayout(水準){設定布局裡面元件向右對齊,并添加兩個按鈕}

簡單地說就是布局的嵌套

示例代碼:

[html]  view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/LinearLayout1"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:orientation="vertical"  
7.     tools:context=".MainActivity" >  
8.     <TextView  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:text="請輸入要儲存的電話号碼"    
12.         />  
13.     <EditText  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="wrap_content"   
16.         />  
17.     <LinearLayout  
18.         android:layout_width="fill_parent"  
19.         android:layout_height="wrap_content"  
20.         android:orientation="horizontal"  
21.         android:gravity="right"    
22.         >  
23.         <Button  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:text="儲存"  
27.             />  
28.         <Button  
29.             android:layout_width="wrap_content"  
30.             android:layout_height="wrap_content"  
31.             android:text="清空"  
32.         />  
33.     </LinearLayout>  
34. </LinearLayout>  

妙用layout_weight權重屬性

通常我們使用layout_weight屬性都是為了按比例劃分的區域的

下面講下比較使用的兩種方法,大家可以參考一下

等比例劃分水準或者豎直方向

效果圖:

實作原理:

這個是最簡單的用法

等分水準方向:将layout_widht屬性設定為"0dp",接着為weight設定比例,這裡是按比例劃分的

同理豎直方向:将layout_height屬性設定為"0dp"....

話不多說,上代碼:

[html]  view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/LinearLayout1"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="horizontal"     
7.     >  
8.     <LinearLayout  
9.         android:layout_width="0dp"  
10.         android:layout_height="fill_parent"  
11.         android:background="#ADFF2F"   
12.         android:layout_weight="1"/>  
13.     <LinearLayout  
14.         android:layout_width="0dp"  
15.         android:layout_height="fill_parent"  
16.         android:background="#DA70D6"   
17.         android:layout_weight="2"/>  
18. </LinearLayout>  

這個是最簡單的用法了= =,接着下面的是詳細解析layout_weigth屬性的,讀者

有需要的話可以了解下

layout_weight屬性詳解:

其實,來來去去還是糾結采用了wrap_content還是match_parent

有人會問:怎麼區分是水準劃分還是豎直劃分?

其實隻要看android:orientation是水準還是豎直即可

以下以1:2:3的比例依次示範效果:

用wrap_content

效果圖如下:

如圖,我們可以知道,當我們采用wrap_content的話

對應比例也是1:2:3

代碼如下:

[html]  view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/LinearLayout1"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.     <TextView  
7.         android:layout_weight="1"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="fill_parent"  
10.         android:text="one"   
11.         android:background="#98FB98"  
12.      />  
13.      <TextView  
14.         android:layout_weight="2"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="fill_parent"  
17.         android:text="two"   
18.         android:background="#FFFF00"  
19.      />  
20.      <TextView  
21.         android:layout_weight="3"  
22.         android:layout_width="wrap_content"  
23.         android:layout_height="fill_parent"  
24.         android:text="three"   
25.         android:background="#FF00FF"  
26.      />  
27. </LinearLayout>  

用fill_parent的話

效果圖如下:

哎呦，這three哪裡去了,代碼裡明明有three的啊!

貼下代碼:

[html]  view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/LinearLayout1"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.     <TextView  
7.         android:layout_weight="1"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:text="one"   
11.         android:background="#98FB98"  
12.      />  
13.      <TextView  
14.         android:layout_weight="2"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="fill_parent"  
17.         android:text="two"   
18.         android:background="#FFFF00"  
19.      />  
20.      <TextView  
21.         android:layout_weight="3"  
22.         android:layout_width="fill_parent"  
23.         android:layout_height="fill_parent"  
24.         android:text="three"   
25.         android:background="#FF00FF"  
26.      />  
27. </LinearLayout>  

是有three,其實這裡沒那麼簡單,要算一算的,算法有幾種,這裡給出一種比較容易了解的

①個個都是fill_parent,但是螢幕隻有一個啦,那麼1 - 3 = - 2 fill_parent

②依次比例是1/6,2/6,3/6

③先到先得,先分給one,計算: 1 - 2 * (1/6) = 2/3 fill_parent

    接着到two,計算: 1 - 2 * (2/6) = 1/3 fill_parent

            最後到three,計算 1 - 2 * (3/6) = 0 fill_parent

④是以最後的結果是:one占了兩份,two占了一份,three什麼都木有

以上就是為什麼three木有出現的原因了,有的朋友覺得這樣算有點莫名其妙

一個例子肯定不夠的,如果是1:1:1呢？

[html]  view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/LinearLayout1"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.     <TextView  
7.         android:layout_weight="1"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:text="one"   
11.         android:background="#98FB98"  
12.      />  
13.      <TextView  
14.         android:layout_weight="1"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="fill_parent"  
17.         android:text="two"   
18.         android:background="#FFFF00"  
19.      />  
20.      <TextView  
21.         android:layout_weight="1"  
22.         android:layout_width="fill_parent"  
23.         android:layout_height="fill_parent"  
24.         android:text="three"   
25.         android:background="#FF00FF"  
26.      />  
27. </LinearLayout>  

效果圖:

算一算就知道結果是:1/3  1/3  1/3 了

還不信麼= =,試下2:3:4

算一算,結果是   5/9  3/9  1/9 

效果圖:

好了,以上就是layout_weight權重屬性的全部講解了,

筆者曾在這裡糾結了一段時間,現在總結一下,希望可以幫到各位朋友

當然還有其他計算方法,個人喜歡,有什麼纰漏的希望可以指出!O(∩_∩)O謝謝

最後附上:

在Java代碼中設定權重屬性:

[java]  view plain copy print ?

1. setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,   
2.         LayoutParams.WRAP_CONTENT, 1));