Android 讲解：布局

Android 的界面配置在项目res\layout 路径的XML 文件。

XML 的根标签代表界面的布局模式。用来设置一个界面的控件布局。

当然布局里面还可以有其他布局。

<LinearLayout>...</LinearLayout>

线性布局

<RelativeLayout>...</RelativeLayout>

相对布局

<FrameLayout>...</FrameLayout>

帆布局

<TableLayout>...</TableLayout>

表格布局

<AbsoluteLayout>...</AbsoluteLayout>

绝对布局

线性布局

线性布局是比较常用的布局方式，而线性布局分两种排列方式，一种是水平，一种是垂直。

线性布局的排列方式由根标签的android:orientation 属性进行设置。

垂直布局

android:orientation="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="vertical" >

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />

</LinearLayout>

水平布局

android:orientation="horizontal"

为水平布局

<?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:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />

</LinearLayout>

相对布局

相对布局也是android 里面比较常用的布局方式，它可以相对屏幕布局，也可以相对控件布局。

根据屏幕相对布局

android:layout_alignParentLeft="true"

控件左边显示

android:layout_centerInParent="true"

控件居中显示

android:layout_alignParentRight="true"

控件右边显示

android:layout_alignParentBottom="true"

控件下边显示

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

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

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

根据控件相对布局

android:layout_below

根据控件的id进行控件相对布局。

<?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:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ccc"
android:textSize="20dp"
android:text="hello gril !! " />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/text1"
android:background="#ccc"
android:textSize="20dp"
android:text="hello boy" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

<Button
android:background="#2177C7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="send" />
</LinearLayout>

</RelativeLayout>

帆布局

帆布局应用非常少，它的布局规则是所有控件在左上角显示。

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

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />

</FrameLayout>

表格布局

表格布局应用场景不是很多。但是也是比较简单的。

表格布局不能知道宽度，只能知道高度。

表格的行数由TableRow 绝定。

表格的列数由TableRow 里的控件个数决定。

<TableRow></TableRow>

创建一行

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 >
<TextView android:textSize="20dp" android:text="username"/>
<EditText/>
</TableRow>

<TableRow >
<TextView android:textSize="20dp" android:text="password"/>
<EditText/>
</TableRow>
<TableRow>
<Button android:layout_span="2" android:text="Login"/>
</TableRow>

</TableLayout>

上图的表格布局的控件没有足够的应用屏幕宽度。

android:stretchColumns="1"

第二列填充剩余屏幕

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

android:stretchColumns="1"
>

<TableRow >
<TextView android:textSize="20dp" android:text="username"/>
<EditText/>
</TableRow>

<TableRow >
<TextView android:textSize="20dp" android:text="password"/>
<EditText/>
</TableRow>
<TableRow>
<Button android:layout_span="2" android:text="Login"/>
</TableRow>

</TableLayout>

绝对布局

绝对布局是通过屏幕的坐标来控制控件的位置，由于兼容性较差，应用不是很广泛。

android:layout_x

设置垂直坐标

android:layout_y

设置水平坐标

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="46dp"
android:layout_y="77dp"
android:text="Button" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="48dp"
android:layout_y="138dp"
android:text="Button" />

</AbsoluteLayout>