【Android学习】浅谈六大布局属性与实现

写在前面

在介绍android常见的六个布局之前，我先简单介绍一下所有Layout都具有的属性，这样以下布局就不再赘述

常见属性与属性值

layout_width/layout_height（宽度与高度）：48px，warp_content，match_parent（少用fill_parent）

layout_margin/padding + 方向（外/内边距）:48px

layout_gravity/grabvity（相对兄弟/父控件距离）

LinearLayout（线性布局）

LinearLayout是最常用一种布局方式，它主要提供控件的水平或垂直的线性排列（默认是垂直排列）

常见属性与属性值

orientation（组件排列方式）：horizontal,vertical

layout_weight（分配权重比例）

代码实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ADFF2F"
android:layout_weight="1"/>

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

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#04f5ad"
android:layout_weight="2"/>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#061ab4"
android:layout_weight="3"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f12c09"
android:layout_weight="0.5"/>

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

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#eccb60"
android:layout_weight="3"/>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#722f99"
android:layout_weight="1"/>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#907e91"
android:layout_weight="1"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff7002"
android:layout_weight="1"/>

</LinearLayout>

效果图

RelativeLayout（相对布局）

RelativeLayout按照子元素之间或相对于父元素的位置关系进行布局，较为灵活，有很好的适配性，适合比较复杂的界面布局，但需要注意的是，在指定位置关系时，引用的ID必须在引用之前先被，否则将出现异常

常见属性与属性值

layout_alignParentBottom

layout_alignParentLeft

layout_alignParentRight

layout_alignParentTop

layout_centerHorizontal

layout_centerVertical

layout_centerInParent

以上为相对父元素位置

layout_above

layout_below

layout_toLeftOf

layout_toRightOf

layout_alignBottom

layout_alignLeft

layout_alignRight

layout_alignTop

layout_alignBaseline

以上为相对子控件位置

代码实例

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:text="left-bottom"
android:background="#837e7e"
android:layout_width="100px"
android:layout_height="100px"
android:layout_alignParentBottom="true"
/>

<TextView
android:text="left-top"
android:background="#837e7e"
android:layout_width="100px"
android:layout_height="100px"
android:layout_alignParentLeft="true"
/>

<TextView
android:text="right-top"
android:background="#837e7e"
android:layout_width="100px"
android:layout_height="100px"
android:layout_alignParentRight="true"
/>

<TextView
android:text="top"
android:background="#837e7e"
android:layout_width="100px"
android:layout_height="100px"
android:layout_centerHorizontal="true"
/>

<TextView
android:text="left-middle"
android:background="#837e7e"
android:layout_width="100px"
android:layout_height="100px"
android:layout_centerVertical="true"
/>

<TextView
android:id="@+id/middle"
android:text="middle"
android:background="#837e7e"
android:layout_width="100px"
android:layout_height="100px"
android:layout_centerInParent="true"
/>

<TextView
android:text="up"
android:background="#837e7e"
android:layout_width="50px"
android:layout_height="50px"
android:layout_centerHorizontal="true"
android:layout_above="@id/middle"
/>

<TextView
android:text="down"
android:background="#837e7e"
android:layout_width="50px"
android:layout_height="50px"
android:layout_centerHorizontal="true"
android:layout_below="@id/middle"
/>

<TextView
android:text="left"
android:background="#837e7e"
android:layout_width="50px"
android:layout_height="50px"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/middle"
/>

<TextView
android:text="right"
android:background="#837e7e"
android:layout_width="50px"
android:layout_height="50px"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/middle"
/>

</RelativeLayout>

效果图

TableLayout（表格布局）

TableLayout类似于html中的table，由TableRow组成，而TableRow是LinearLayout的子类，代表一行的线性布局，每向TableRow中添加一个组件则增加一列，Table的宽度由最宽的TableRow决定

常见属性与属性值

android:collapseColumns（隐藏列）

android:shrinkColumns（收缩列）

android:stretchColumns（拉伸列）

android:layout_span（跨越列）

代码实例

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- TableRow具有linearLayout的属性 -->
<TableRow>
<TextView
android:text="1,1"
android:background="#f70808"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<TextView
android:text="1,2"
android:background="#eac54c"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<TextView
android:text="1,3"
android:background="#35d40d"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
</TableRow>
<TableRow>
<TextView
android:text="2,1"
android:background="#f28c8c"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
</TableRow>
<TableRow>

<TextView
android:text="3,1"
android:background="#fa5017"
android:layout_width="wrap_content"
/>
<TextView
android:layout_span="2"
android:text="3,2"
android:background="#fcfc19"
android:layout_width="wrap_content"
/>
</TableRow>
<TableRow>

<TextView
android:text="4,1"
android:background="#6265fc"
android:layout_width="wrap_content"
/>
<TextView
android:text="4,2"
android:background="#1a3aca"
android:layout_width="wrap_content"
/>
<TextView
android:text="4,2"
android:background="#08047e"
android:layout_width="wrap_content"
/>
</TableRow>

</TableLayout>

效果图

FrameLayout（帧布局）

布局中的所有元素都被至于左上角，从坐标（0，0）开始，无法指定确切位置，后者覆盖前者，其中的控件也会被覆盖

常见属性与属性值

android:foreground（前景图）

android:foregroundGravity（前景图位置）

代码实例

<?xml version="1.0" encoding="utf-8"?>

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

<TextView
android:text="1"
android:textSize="150px"
android:layout_gravity="end"
android:textAlignment="textEnd"
android:background="#f28c8c"
android:layout_width="600px"
android:layout_height="600px"
/>

<TextView
android:text="2"
android:textSize="150px"
android:background="#37efe3"
android:layout_width="400px"
android:layout_height="400px"
/>

<TextView
android:text="3"
android:textSize="150px"
android:layout_gravity="center"
android:textAlignment="center"
android:background="#fdf905"
android:layout_width="350px"
android:layout_height="400px"
/>
</FrameLayout>

效果图

GridLayout（线性布局）

Android 4.0后的，和TableLayout有点类似，但多了一些自定义的新功能，如自定义网格的行数列树，组件位于几行几列，甚至是横跨几行几列，以及设置布局中组件的排列方式，

常见属性与属性值

orientation : vertical , horizontal

layout_gravity

rowCount

columnCount

以上设置于GridLayout中

layout_row : from 0

layout_column : from 0

layout_rowSpan

layout_columnSpan

以上设置于GridLayout的控件中

代码实例

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="7">　

<Button
android:background="#000000"
android:layout_gravity="fill"
android:layout_columnSpan="4"
android:text="0" />
<Button
android:background="#000000"
android:layout_gravity="fill"
android:layout_columnSpan="4"
android:text="0" />

<Button android:text="C" />　　

<Button android:text="+/-" />　　　

<Button android:text="%" />
　　
<Button android:text="/" />　　

<Button android:text="7" />

<Button android:text="8" />
　　
<Button android:text="9" />
　　
<Button android:text="*" />
　　
<Button android:text="4" />
　　
<Button android:text="5" />
　　
<Button android:text="6" />

<Button android:text="-" />

<Button android:text="1" />

<Button android:text="2" />

<Button android:text="3" />

<Button android:text="+" />

<Button
android:layout_gravity="fill"
android:layout_columnSpan="2"
android:text="0" />

<Button android:text="." />

<Button android:text="=" />

</GridLayout>

效果图

AbsoluteLayout（绝对定位布局）

从名称就可以猜测，这种布局方式利用坐标轴（如左上角：（0，0），往右X轴递增，往下Y轴递增）的方式定位了组件的位置，不可改变，但由于不同手机的屏幕尺寸以及分辨率可能导致界面的适配性低下，故该种布局方式已经过时，不再演示

参考资料：http://www.runoob.com/w3cnote/android-tutorial-intro.html