第二章 UI开发——Android 布局类型

一、线性布局（LinearLayout）

1. 使用

<LinearLayout>

标签表示

2. 有两种方法指定控件位置，一种是水平方向，一种是竖直方向。

3. 属性：

- android:layout_gravity用于指定控件在布局的对齐方式

- android:gravity用于指定文字在控件中的对齐方式

- android:orientation用于指定控件的方向

（注意：当android:orientation=”vertical”时，只有水平方向的设置才起作用，垂直方向的设置不起作用。即：left, right, center_horizontal是生效的。当android :orientation=”horizontal”时，只有竖直方向上的设置起作用。即：top, bottom, center_vertical是生效的。）

例：

<?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="horizontal">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:hint="Button2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"

android:hint="Button3"/>
</LinearLayout>

4.重要属性：

- android:layout_weight（权重）这个属性允许我们使用比例的方式来指定控件的大小

例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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:background="#6666"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:background="#000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:background="#000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:background="#666"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:background="#6666"/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

使用权重使五个TextView平分容器



(注：android:layout_marginTop=”10dp”使控件与容器顶部或上一个控件相隔10dp)

二、相对布局(RelativeLayout)

1. 相对于父布局进行定位的属性

- android:layout_alignParentLeft

- android:layout_alignParentRight

- android:layout_alignParentTop

- android:layout_alignParentBottom

- android:layout_centInParent

例：

<?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"
4000

>
<Button android:layout_width="wrap_content"                   android:layout_height="wrap_content"        android:layout_alignParentLeft="true"
android:text="Button1"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"            android:layout_alignParentRight="true"        android:layout_alignParentTop="true"
android:text="Button2"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button3"/>

<Button
android:layout_width="wrap_content"        android:layout_height="wrap_content"      android:layout_alignParentBottom="true"       android:layout_alignParentLeft="true"

<Button
android:layout_width="wrap_content     android:layout_height="wrap_content"       android:layout_alignParentBottom="true"       android:layout_alignParentRight="true" android:text="Button5"/>
</RelativeLayout>

2.相对于控件进行定位的属性

android:layout_above

android:layout_below

android:layout_toLeftOf

android:layout_toRightOf

与控件对齐方式：

android:layout_alignLeft

android:layout_alignRight

android:layout_alignTop

android:layout_alignBottom

例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent"
>
<Button
android:id="@+id/zhongxin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="o"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/zhongxin"
android:layout_alignLeft="@id/zhongxin"
android:text="↑"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/zhongxin"
android:layout_alignBottom="@id/zhongxin"
android:text="←"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/zhongxin"
android:layout_alignBottom="@id/zhongxin"
android:text="→"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/zhongxin"
android:layout_alignLeft="@id/zhongxin"
android:text="↓"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:text="A" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/a"
android:layout_centerVertical="true"
android:text="B"
/>

</RelativeLayout>
</LinearLayout>

三、表格布局(TableLayout)

1.在TableLayout中，行数由TableLayout对象指控的，即布局中多少TableRow对象，就有多少行。

2.属性

android:stretchColumns 拉伸指定列填充满TableRow

android:layout_column 指定控件所在的列数

例：

<?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="wrap_content"
android:stretchColumns="1">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Account:"

/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input your accpunt"
android:layout_column="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password:"

/>

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint=""
android:id="@+id/editText" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:layout_weight="1"
/>
</TableRow>
</TableLayout>

四、网格布局(GridLayout)

1.实现了控件的交错显示

2.是用一组无限细的的直线将绘图区域分成若干行、列和单元，并将指定控件的显示区域和控件在该区域的显示方法

2.属性

android:columnCount 指定布局容器中的列数

android:layout_columnSpan 指定控件所跨的列数

android:layout_rowSpan 指定控件所跨的行数

例：

<?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:layout_gravity="center"
android:columnCount="4">
<Button

android:text="/" android:layout_column="3"/>
<Button android:text="1"/>
<Button android:text="2"/>
<Button android:text="3"/>
<Button android:text="*"/>
<Button android:text="4"/>
<Button android:text="5"/>
<Button android:text="6"/>
<Button android:text="-"/>
<Button android:text="7"/>
<Button android:text="8"/>
<Button android:text="9"/>
<Button android:text="+" android:layout_rowSpan="3" android:layout_gravity="fill"/>
<Button android:text="0" android:layout_columnSpan="2" android:layout_gravity="fill"/>
<Button android:text="00"/>
<Button android:text="=" android:layout_columnSpan="3" android:layout_gravity="fill"/>
</GridLayout>

5.帧布局（FrameLayout）