Android5大布局方式

阿新 • • 發佈：2019-01-31

概述：在Android中，共有五種佈局方式，分別是：LinearLayout （線性佈局），RelativeLayout（相對佈局），AbsoluteLayout（絕對佈局），FrameLayout（幀佈局），TableLayout（表格佈局）

1、LinearLayout（線性佈局）

每個元素佔一行或者一列

LinearLayout可以是垂直佈局（android:orientation="vertical"）或者水平佈局（android:orientation="horizontal" ）

LinearLayout中有一個重要的子元素屬性android:layout_weight，它用於描述該子元素在剩餘空間中佔有的大小比例，如水平佈局時，只有一行，每個元素佔一列，如果有兩列，第一列android:layout_weight="1"

第二列android:layout_weight="2"，那麼第一列和第二列的寬度之比為2:1，寬度之比並不是簡單的layout_weight的值反比。

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#DDA0DD" android:text="@string/hello"/>
        <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
            <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#D2B48C" android:layout_weight="1" android:text="1"/>
            <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#CFCFCF" android:layout_weight="2"  android:text="2"/>
        </LinearLayout>
    </LinearLayout>

效果：

2、RelativeLayout（相對佈局）

相對佈局按照各個元素之間的相對關係完成佈局。

程式碼：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView android:id="@+id/text1" android:layout_width="50dp" android:layout_height="50dp" android:background="#BF3EFF" android:gravity="center" android:layout_alignParentBottom="true" android:text="1"/>
    <TextView android:id="@+id/text2" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF6543" android:gravity="center" android:layout_above="@id/text1" android:layout_centerHorizontal="true" android:text="2"/>
    <TextView android:id="@+id/text3" android:layout_width="50dp" android:layout_height="50dp" android:background="#CD661D" android:gravity="center" android:layout_toLeftOf="@id/text2" android:layout_above="@id/text1" android:text="3"/>

</RelativeLayout>

效果：

3、AbsoluteLayout（絕對佈局）

絕對佈局方式很簡單，主要屬性就兩個 layout_x 和 layout_y 分別定義這個元件的絕對位置。即，以螢幕左上角為（0，0）的座標軸的x，y值，當向下或向右移動時，座標值將變大。AbsoluteLayout 沒有頁邊框，允許元素之間互相重疊（儘管不推薦）。通常不推薦使用絕對佈局

程式碼：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#BF3EFF" android:gravity="center" android:layout_x="50dp" android:layout_y="50dp" android:text="1"/>
        <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#FF6543" android:gravity="center" android:layout_x="25dp" android:layout_y="25dp" android:text="2"/>
        <TextView  android:layout_width="50dp" android:layout_height="50dp" android:background="#CD661D" android:gravity="center" android:layout_x="125dp" android:layout_y="125dp" android:text="3"/>
    </AbsoluteLayout>

效果：

4、FrameLayout（幀佈局）

幀佈局t是五大布局中最簡單的一個佈局，可以說成是層佈局方式。在這個佈局中，整個介面被當成一塊空白備用區域，所有的子元素都不能被指定放置的位置，它們統統放於這塊區域的左上角，並且後面的子元素直接覆蓋在前面的子元素之上，將前面的子元素部分和全部遮擋。如下，第一個TextView被第二個TextView完全遮擋，第三個TextView遮擋了第二個TextView的部分位置。

程式碼：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#BF3EFF" android:gravity="center" android:text="1"/>
        <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#FF6543" android:gravity="center" android:text="2"/>
        <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#CD661D" android:gravity="center" android:text="3"/>
    </FrameLayout>

效果：

5、TableLayout（表格佈局）

適用於N行N列的佈局格式。一個TableLayout由許多TableRow組成，一個TableRow就代表TableLayout中的一行。

　　TableRow是LinearLayout的子類，ablelLayout並不需要明確地宣告包含多少行、多少列，而是通過TableRow，以及其他元件來控制表格的行數和列數， TableRow也是容器，因此可以向TableRow裡面新增其他元件，沒新增一個元件該表格就增加一列。如果想TableLayout裡面新增元件，那麼該元件就直接佔用一行。在表格佈局中，列的寬度由該列中最寬的單元格決定，整個表格佈局的寬度取決於父容器的寬度（預設是佔滿父容器本身）。

TableLayout繼承了LinearLayout，因此他完全可以支援LinearLayout所支援的全部XML屬性，除此之外TableLayout還支援以下屬性：

XML屬性	相關用法	說明
andriod：collapseColumns	setColumnsCollapsed（int ，boolean）	設定需要隱藏的列的序列號，多個用逗號隔開
android：shrinkColumns	setShrinkAllColumns（boolean）	設定被收縮的列的序列號，多個用逗號隔開
android：stretchColimns	setSretchAllColumnds（boolean）	設定允許被拉伸的列的序列號，多個用逗號隔開

程式碼：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView  android:background="#BF3EFF" android:gravity="center" android:padding="10dp" android:text="1"/>
            <TextView android:background="#FF6543" android:gravity="center" android:padding="10dp" android:text="2"/>
            <TextView  android:background="#CD661D" android:gravity="center" android:padding="10dp" android:text="3"/>
        </TableRow>
        <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView  android:background="#FF6543" android:gravity="center" android:padding="10dp" android:text="2"/>
            <TextView  android:background="#BF3EFF" android:gravity="center" android:padding="10dp" android:text="1"/>
            <TextView android:background="#CD661D" android:gravity="center" android:padding="10dp" android:text="3"/>
        </TableRow>
        <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:background="#CD661D" android:gravity="center" android:padding="10dp" android:text="3"/>
            <TextView  android:background="#FF6543" android:gravity="center" android:padding="10dp" android:text="2"/>
            <TextView  android:background="#BF3EFF" android:gravity="center" android:padding="10dp" android:text="1"/>
        </TableRow>
    </TableLayout>

效果：

Android5大布局方式

Android5大布局方式

Android 開發：（二）安卓常用5大布局方式

Ext常用6大布局方式

web移動端布局方式整理

aNDROID中常用的5大布局

yii控制布局方式

ss常見布局方式

Winform布局方式

移動端布局方式

css網頁布局方式的理解

幾種布局方式

Android-基本控件和詳解四種布局方式

網頁的布局方式

css 布局方式

css常見布局方式

上下高度固定中間自適應的布局方式

Java中CardLayout布局方式的應用

大話重構連載10：小設計而不是大布局

布局方式－表格布局

布局方式-flex布局

Android5大布局方式

相關推薦