快捷導(dǎo)航

Android四種常見布局方式示例教程

更新時(shí)間：2022年09月28日 11:35:42 作者：Shewyoo

Android四種布局有線性布局LinearLayout、相對(duì)布局RelativeLayout、網(wǎng)格布局GridLayout、和滾動(dòng)視圖ScrollView，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

一、線性布局LinearLayout

有兩種排序方式

orientation屬性值為horizontal時(shí)，內(nèi)部視圖在水平方向從左往右排列。
orientation屬性值為vertical時(shí)，內(nèi)部視圖在垂直方向從上往下排列。

如果不指定orientation屬性，則LinearLayout默認(rèn)水平方向排列。

線性布局的權(quán)重

指線性布局的下級(jí)視圖各自擁有多大比例的寬高。

屬性名為layout_weight，但該屬性不在LinearLayout節(jié)點(diǎn)設(shè)置，而在線性布局的直接下級(jí)視圖設(shè)置，表示改下級(jí)視圖占據(jù)的寬高比例。

layout_width為0dp時(shí)，表示水平方向的寬度比例
layout_height為0dp時(shí)，表示垂直方向的高度比例

例：

第一個(gè)線性布局：width = 0dp 說明在水平方向設(shè)置寬度比例，weight = 1，占據(jù)weight總數(shù)的1/2，則占據(jù)一半空間。

第二個(gè)線性布局：height = 0dp 說明在垂直方向設(shè)置寬度比例，weight = 1，占據(jù)weight總數(shù)的1/3，則占據(jù)三分之一空間。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"http://寬度為0dp，通過權(quán)重設(shè)置寬度比例
            android:layout_height="wrap_content"
            android:layout_weight="1"http://weight為1，下面的weight也為1，占1/2，即寬度比例占1/2
            android:text="橫排第一個(gè)"
            android:textSize="17sp"
            android:textColor="#000000"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="橫排第二個(gè)"
            android:textSize="17sp"
            android:textColor="#000000"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"http://高度為0dp，通過權(quán)重設(shè)置高度比例
            android:layout_weight="1"http://weight為1，下面的weight為2，占1/3，即寬度比例占1/3
            android:text="豎排第一個(gè)"
            android:textSize="17sp"
            android:textColor="#000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:text="豎排第二個(gè)"
            android:textSize="17sp"
            android:textColor="#000000"/>
    </LinearLayout>

二、相對(duì)布局RelativeLayout

相對(duì)布局的視圖位置由平級(jí)或上級(jí)視圖決定，用于確定下級(jí)視圖位置的參考物分兩種：

與該視圖自身平級(jí)的視圖
該視圖的上級(jí)視圖

如果不設(shè)定下級(jí)視圖的參照物，那么下級(jí)視圖默認(rèn)顯示在RelativeLayout內(nèi)部的左上角。

相對(duì)位置的取值

例:

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerInParent="true"
        android:text="中間"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerHorizontal="true"
        android:text="水平中間"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerVertical="true"
        android:text="垂直中間"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_alignParentLeft="true"
        android:text="上級(jí)左邊對(duì)齊"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_toLeftOf="@id/tv_center"
        android:layout_alignTop="@id/tv_center"
        android:text="中間左邊"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_above="@id/tv_center"
        android:layout_alignLeft="@id/tv_center"
        android:text="中間上邊"
        android:textSize="11sp"
        android:textColor="#000000"/>

三、網(wǎng)格布局GridLayout

網(wǎng)格布局支持多行多列的表格排列。

網(wǎng)格布局默認(rèn)從左往右、從上到下排列，新增兩個(gè)屬性：

columnCount屬性：指定網(wǎng)格的列數(shù)，即每行能放多少視圖。
rowCount屬性：指定網(wǎng)格行數(shù)，即每列能放多少視圖。

例:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">
    <TextView
        android:layout_width="0dp"http://設(shè)置權(quán)重，占滿屏幕
        android:layout_columnWeight="1"
        android:layout_height="60dp"
        android:background="#ffcccc"
        android:text="淺紅色"
        android:gravity="center"http://設(shè)置文字位于網(wǎng)格中間
        android:textColor="#000000"
        android:textSize="17sp"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#ffaa00"
        android:text="淺紅色"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#00ff00"
        android:text="綠色"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#660066"
        android:text="深紫色"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp"/>
</GridLayout>

四、滾動(dòng)視圖ScrollView

有兩種：

ScrollView：垂直方向的滾動(dòng)視圖，垂直方向滾動(dòng)時(shí)，layout_width屬性值設(shè)置為match_parent，layout_height 屬性值設(shè)置為wrap_content。
HorizontalScrollView：水平方向的滾動(dòng)視圖，水平方向滾動(dòng)時(shí)，layout_width屬性值設(shè)置為wrap_content，layout_height屬性值設(shè)置為match_parent。

例:

水平方向兩個(gè)View共600dp，超出屏幕，所以上級(jí)視圖使用HorizontalScrollView，寬度自適應(yīng)，高度跟隨上級(jí)視圖。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="200dp">
<!--        水平方向的線性布局-->
        <LinearLayout
            android:layout_width="wrap_content"http://寬度自適應(yīng)
            android:layout_height="match_parent"http://高度跟隨上級(jí)視圖
            android:orientation="horizontal">//水平排列
        <View
            android:layout_width="300dp"http://寬度自定義，超出屏幕
            android:layout_height="match_parent"
            android:background="#aaffff"/>
        <View
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:background="#ffff00"/>
        </LinearLayout>
    </HorizontalScrollView>
<!--        垂直方向的線性布局-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <View
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:background="#aaffff"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:background="#ffff00"/>
</LinearLayout>
    </ScrollView>
</LinearLayout>