Android开发之详解五大布局

- 日理万妓 2021-12-20 06:25 333阅读 0赞

为了适应各式各样的界面风格，Android系统提供了5种布局，这5种布局分别是：

**LinearLayout**(线性布局)

**TableLayout**(表格布局)

**RelativeLayout**(相对布局)

**AbsoluteLayout**(绝对布局)

**FrameLayout**(框架布局)

利用这五种布局，可以在屏幕上将控件随心所欲的摆放，而且控件的大小和位置会随着屏幕大小的变化作出相应的调整。下面是这五个布局在View的继承体系中的关系：

[![buju][]][buju]

**一，LinearLayout(线性布局)**

在一个方向上(垂直或水平)对齐所有子元素  
一个垂直列表每行将只有一个子元素(无论它们有多宽)  
一个水平列表只是一列的高度（最高子元素的高度来填充）

下面是一个简单的线性布局的例子：

[![1][]][1]

<?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">  
<EditText android:text="EditText"  
  
android:id="@+id/editText1"  
  
android:layout\_height="wrap\_content"  
  
android:layout\_width="fill\_parent">  
  
</EditText>  
<LinearLayout android:id="@+id/linearLayout1"  
  
android:layout\_height="fill\_parent"  
  
android:layout\_width="fill\_parent"  
  
android:gravity="right">  
<Button android:id="@+id/button2"  
  
android:text="Button"  
  
android:layout\_width="wrap\_content"  
  
android:layout\_height="wrap\_content"></Button>  
<Button android:text="Button"  
  
android:id="@+id/button1"  
  
android:layout\_width="wrap\_content"  
  
android:layout\_height="wrap\_content"></Button>  
</LinearLayout>  
</LinearLayout>

最外层布局为垂直线性布局，宽度为整个屏幕(fill\_parent)，高度为刚好适合子控件(wrap\_content)。然后依次添加一个 EditText，一个水平布局的LinearLayout，在这个线性布局里面，摆放两个Button，该线性布局的gravity属性设置 为”right”，所以里面的两个Button靠右显示。

二，**TableLayout(表格布局)**

把子元素放入到行与列中  
不显示行、列或是单元格边界线  
单元格不能横跨行，如HTML中一样  
表格布局模型以行列的形式管理子控件，每一行为一个TableRow的对象，当然也可以是一个View的对象。TableRow可以添加子控件，每添加一个为一列。

**android:layout\_colum**官方解释：The index of the column in which this child should be，也即是设置该控件在TableRow中所处的列。

**android:layout\_span**官方解释：Defines how many columns this child should span，也即是设置该控件所跨越的列数。

**android:collapseColumns**官方解释：The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是将TableLayout里面指定的列隐藏，若有多列需要隐藏，请用逗号将需要隐藏的列序号隔开。

**android:stretchColumns**官方解释：The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “\*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是设置指定的列为可伸展的列，可伸展的列会尽量伸展以填满所有可用的空间，若有多列需要设置为可伸展，请用逗号将需要伸展的列序号隔开。

**android:shrinkColumns**官方解释：The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “\*” instead. 设置指定的列为可收缩的列。当可收缩的列太宽以至于让其他列显示不全时，会纵向延伸空间。当需要设置多列为可收缩时，将列序号用逗号隔开。

下面用一个例子简单说明TableLayout的用法：

[![table][]][table]

<?xml version="1.0" encoding="utf-8"?>  
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout\_width="fill\_parent"  
android:layout\_height="fill\_parent"  
android:stretchColumns="1">  
<TableRow>  
<TextView  
android:layout\_column="1"  
android:padding="3dip" android:text="Row1"/>  
<TextView  
android:text="1"  
android:gravity="right"  
android:padding="3dip" />  
</TableRow>  
<View  
android:layout\_height="2dip"  
android:background="\#FF909090" />  
<TableRow>  
<TextView  
android:text="\*"  
android:padding="3dip" />  
<TextView  
android:text="Row12"  
android:padding="3dip" />  
<TextView  
android:text="2"  
android:gravity="right"  
android:padding="3dip" />  
</TableRow>  
<View  
android:layout\_height="2dip"  
android:background="\#FF909090" />  
<TableRow>  
<TextView  
android:layout\_column="1"  
android:text="Row13"  
android:padding="3dip" />  
</TableRow>  
</TableLayout>

**三、RelativeLayout(相对布局)**

相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其它子控件，但是被参照的控件必须要在参照它的控件之前定义。下面是一个简单的例子：

[![23][]][23]

<?xml version="1.0" encoding="utf-8"?>  
<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout\_width="fill\_parent"  
android:layout\_height="fill\_parent"  
>  
<AnalogClock  
android:id="@+id/aclock"  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"  
android:layout\_centerInParent="true" />  
<DigitalClock  
android:id="@+id/dclock"  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"  
android:layout\_below="@id/aclock"  
android:layout\_alignLeft="@id/aclock"  
android:layout\_marginLeft="40px" />  
<TextView  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"  
android:text="当前时间："  
android:layout\_toLeftOf="@id/dclock"  
android:layout\_alignTop="@id/aclock"/>  
</RelativeLayout>

**四、AbsoluteLayout(绝对布局)**

绝对布局的子控件需要指定相对于此坐标布局的横纵坐标值，否则将会像框架布局那样被排在左上角。手机应用需要适应不同的屏幕大小，而这种布局模型不能自适应屏幕尺寸大小，所以应用的相对较少。下面以一个例子简单说明绝对布局：

[![1][1 1]][1 1]

<?xml version="1.0" encoding="utf-8"?>  
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout\_width="fill\_parent"  
android:layout\_height="fill\_parent"  
>  
<TextView  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"  
android:layout\_x="10px"  
android:layout\_y="10px" android:text="Textview"/>  
<TextView  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"  
android:layout\_x="30px"  
android:layout\_y="30px" android:text="Textview"/>  
<TextView  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"  
android:layout\_x="50px"  
android:layout\_y="50px" android:text="Textview"/>  
</AbsoluteLayout>

**五、****FrameLayout(框架布局)**

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。下面举一个简单的例子

[![1][1 2]][1 2]

<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout\_width="fill\_parent" android:layout\_height="fill\_parent">  
<LinearLayout android:id="@+id/linearLayout1"  
android:layout\_height="match\_parent"  
android:layout\_width="match\_parent">  
<Button android:text="Button"  
android:id="@+id/button1"  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"></Button>  
</LinearLayout>  
<LinearLayout android:layout\_width="match\_parent"  
android:id="@+id/linearLayout3"  
android:layout\_height="match\_parent"  
android:gravity="bottom|right">  
<Button android:text="Button"  
android:id="@+id/button3"  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"></Button>  
</LinearLayout>  
<LinearLayout android:layout\_height="match\_parent"  
android:id="@+id/linearLayout2"  
android:layout\_width="match\_parent"  
android:gravity="right">  
<Button android:text="Button"  
android:id="@+id/button2"  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"></Button>  
</LinearLayout>  
<LinearLayout android:layout\_width="match\_parent"  
android:id="@+id/LinearLayout01"  
android:layout\_height="match\_parent"  
android:gravity="bottom|left">  
<Button android:id="@+id/Button01"  
android:text="Button"  
android:layout\_width="wrap\_content"  
android:layout\_height="wrap\_content"></Button>  
</LinearLayout>  
</FrameLayout>

下面介绍一下RelativeLayout用到的一些重要的属性：

**第一类****:****属性值为****true****或****false**  
android:layout\_centerHrizontal                                           水平居中  
android:layout\_centerVertical                                            垂直居中  
android:layout\_centerInparent                                           相对于父元素完全居中  
android:layout\_alignParentBottom                     贴紧父元素的下边缘  
android:layout\_alignParentLeft                        贴紧父元素的左边缘  
android:layout\_alignParentRight                       贴紧父元素的右边缘  
android:layout\_alignParentTop                        贴紧父元素的上边缘  
android:layout\_alignWithParentIfMissing               如果对应的兄弟元素找不到的话就以父元素做参照物

**第二类：属性值必须为****id****的引用名****“@id/id-name”**  
android:layout\_below                          在某元素的下方  
android:layout\_above                          在某元素的的上方  
android:layout\_toLeftOf                       在某元素的左边  
android:layout\_toRightOf                     在某元素的右边

android:layout\_alignTop                      本元素的上边缘和某元素的的上边缘对齐  
android:layout\_alignLeft                      本元素的左边缘和某元素的的左边缘对齐  
android:layout\_alignBottom                 本元素的下边缘和某元素的的下边缘对齐  
android:layout\_alignRight                    本元素的右边缘和某元素的的右边缘对齐

**第三类：属性值为具体的像素值，如****30dip****，****40px**  
android:layout\_marginBottom              离某元素底边缘的距离  
android:layout\_marginLeft                   离某元素左边缘的距离  
android:layout\_marginRight                 离某元素右边缘的距离  
android:layout\_marginTop                   离某元素上边缘的距离

http://www.andcoder.com/archives-2011-08-227.html

转载于:https://www.cnblogs.com/bill-joy/archive/2012/02/29/2372933.html

[buju]: http://www.andcoder.com/wp-content/uploads/2011/08/buju.jpg
[1]: http://www.andcoder.com/wp-content/uploads/2011/08/12.png
[table]: http://www.andcoder.com/wp-content/uploads/2011/08/table.png
[23]: http://www.andcoder.com/wp-content/uploads/2011/08/23.png
[1 1]: http://www.andcoder.com/wp-content/uploads/2011/08/13.png
[1 2]: http://www.andcoder.com/wp-content/uploads/2011/08/14.png