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));