【安卓基础】02Android四种基本布局

安卓应用的界面由多种空间共同组成，可以想象当界面趋于复杂，空间之间的位置就会难以定位摆放。安卓的布局可以使控件有条不紊的摆放。布局能够按照规律摆放空间的位置，也能在空间中嵌套空间，实现更加复杂的见面。基于布局的不同摆放规则，安卓提供了多种布局，本文介常用的四种基本布局：线性布局、相对布局、帧布局以及百分比布局。

1. 线性布局

1.1 android:orientation 指定排列方向

线性布局 LinearLayout 即按照线性进行排列，可以分成横向和纵向两种情况，通过 android:orientation 属性进行控制：

横向 : android:orientation=”horizontal”

纵向 : android:orientation=”vertical”

横向

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    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="button1" />

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

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

</LinearLayout>

纵向，修改orientation值

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

1.2 android:layout_gravity 指定对齐方式

通过对齐方式的参数控制按钮的位置

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    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_gravity="top"
        android:text="button1" />

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

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

</LinearLayout>

1.3 android:layout_weight 控制空间排列占比

android:layout_weight 后面的数值表示该空间所占百分比，总共三个控件各占一份，则一个控件占1/3空间

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

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

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="button3" />

</LinearLayout>

2. 相对布局

相对布局 RelativeLayout ,相较LinerLayout更加自由。相对布局顾名思义需要有一个参照物，再相对参照物进行布局。这个参照物可以是父类布局，也可以是其他控件。

2.1 相对父类布局进行布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    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_centerInParent="true"
        android:text="button1" />

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

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

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="button4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="button6" />

</RelativeLayout>

android:layout_centerInParent=”true” — 位于中心

android:layout_alignParentLeft=”true” — 左

android:layout_alignParentTop=”true” — 上

android:layout_alignParentRight=”true” — 右

android:layout_alignParentBottom=”true” — 下

2.2 相对空间布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    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_centerInParent="true"
        android:text="button1" />

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

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

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

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

</RelativeLayout>

Button1 位于父类布局中心位置，其他按钮以其为基准进行布局

android:layout_above=”@+id/button1” — 上

android:layout_toLeftOf=”@+id/button1” — 左

android:layout_below=”@+id/button1” — 下

android:layout_toRightOf=”@+id/button1” — 右

3. 帧布局

帧布局 FrameLayout,，所有空间默认堆积在左上角，后添加的空间堆叠在前面添加的空间上面，定位不便，应用场景较少。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    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_centerInParent="true"
        android:textColor="@android:color/holo_red_dark"
        android:text="Button1Button1Button1Button1" />

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

</FrameLayout>

为了能看清楚，给 Button1 的字体添加了颜色。Button2 在 Button1 之后创建，所以在 Button1 上一层，并且都堆叠在左上角。

可以使用android:layout_gravity 指定对齐方式

4. 百分比布局

百分比布局是新引进的布局。前面三种布局，除了 LinearLayout 可以使用 layout_weight 属性来自定义空间百分比大小，其他布局都不支持。比如希望将三个按钮三等分分布，用其他布局就很难实现。所以引入了百分比布局，对RelativeLayout 和 FrameLayout 进行扩展，提供 RercentRelativeLayout 和 RercentFrameLayout 。

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

<Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>

    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>

    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>

</android.support.percent.PercentFrameLayout>

直接使用以上的百分比布局方式会报错

百分比布局是新增的，为了能让其在所有版本Android版本上应用，被定义在support库中，所以使用前需要先在app – build.gradle添加百分比布局库的依赖：

compile ‘com.android.support:percent:24.2.1’

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:percent:24.2.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
}

接下来，再次build一下项目

初学安卓，通过《第一行代码》学习，通俗易懂。