Android四種佈局詳解

線性佈局（LinearLayout）

詳解

線性佈局即會讓塔包含的控件按照線性的方式排布，具體的說分爲兩種。水平分佈和垂直分佈
1：水平分佈（horitonzal）

2：垂直分佈（vertical）

線性佈局裏常用的屬性

1：weight，可以控制控件的權重。比如在水平分佈的線性佈局中，可以指定每個控件的寬以權重的信息表示。
2：orientation，控制線性佈局的排列方向
3：layout_gravity,控制控件在佈局中的對齊方式，注意，當佈局爲垂直佈局，只有水平方向的對齊才管用，此時能設置的參數分別爲“top”，“center_”vertical“和”bottom“。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal">
    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="第一列" />
    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="第二列" />
    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="第三列" />
    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="第四列" />
</LinearLayout>

效果圖

在上圖中，雖然每個控件的width設置爲0，但是weight都設置爲1。因此每個控件的實際寬度爲整個佈局的寬減去每個控件設置的寬（值=0）之後的值乘以比值（比值=1/4）再加上該控件的設置的寬（值=0）。

相對佈局（RelativeLayout）

詳解

可以通過相對定位的方式讓控件出現在佈局鐘的指定位置，這個相對對象既可以是其他控件，也可以是佈局。

相對佈局裏常用的函數

1：android:layout_centerInParent=“true“
含義是將控件放在父對象（一般爲佈局）的中心。當然如果你設置爲”false“，就不會放在中心
2：android:layout_alignRight=”@+id/name"
含義是將控件的右邊緣與指定的控件右邊緣對齊
3：android:layout_below="@+id/name"
含義是將控件放在指定控件的下方，但不對齊
4：android:layout_alignParentLeft=“true”
含義是將控件左邊緣與父對象左邊緣對齊，一般控件位於父對象內
…

幀佈局（FrameLayout）

詳解

幀佈局默認控件擺在左上角，一層疊一層，當然也可以通過其他方式改變佈局

其他方式

通過layout_gravity可以改變控件的對齊方式。

<Button
    android:id="@+id/bu_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="01" />
<Button
    android:id="@+id/bu_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center_vertical"
    android:text="02" />
<Button
    android:id="@+id/bu_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="end"
    android:text="03" />
<Button
    android:id="@+id/bu_4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="bottom"
    android:text="04" />

效果圖

百分比佈局

詳解

這個佈局是新增佈局，通過百分比來控制控件的大小，和之前的線性佈局一樣，因此它是建立在相對佈局和幀佈局的基礎上擴展的佈局。

使用方法

這個佈局是新增佈局，需要添加遠程依賴包來實現，具體步驟，找到build.Gradle文件，在dependencies 內添加代碼

implementation 'com.android.support:percent:28.0.0'

在gradle配置好了的情況下你可能會出現這樣的問題

解決方法如下

將percentlayout這一行改成如下這樣:

androidx.percentlayout.widget.PercentRelativeLayout

代碼如下

<androidx.percentlayout.widget.PercentRelativeLayout
    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">
    <View
        android:id="@+id/top_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#ff44aacc"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%" />
    <View
        android:id="@+id/top_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/top_left"
        android:background="#ffe40000"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="30%" />
    <View
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/top_left"
        android:background="#ff00ff22"
        app:layout_heightPercent="80%" />
</androidx.percentlayout.widget.PercentRelativeLayout>

效果圖

兩種常見的佈局實現（含代碼）

1：梅花布局（使用相對佈局）

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
    <Button
        android:id="@+id/bu_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="center" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bu_1"
        android:layout_alignRight="@+id/bu_1"
        android:text="above" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bu_1"
        android:layout_alignRight="@+id/bu_1"
        android:text="below" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/bu_1"
        android:layout_toRightOf="@+id/bu_1"
        android:text="right" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/bu_1"
        android:layout_toLeftOf="@+id/bu_1"
        android:text="left" />
</RelativeLayout>

效果圖

2：橫排豎列布局（使用線性佈局）

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="第一列" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="第二列" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="第三列" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="第四列" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="第一行" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="第二行" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="第三行" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="第四行" />
    </LinearLayout>
</LinearLayout>

效果圖