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

第Android四種常見布局方式示例教程目錄一、線性布局LinearLayout有兩種排序方式線性布局的權(quán)重二、相對布局RelativeLayout相對位置的取值三、網(wǎng)格布局GridLayout四、滾動視圖ScrollView

一、線性布局LinearLayout

有兩種排序方式

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

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

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

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

屬性名為layout_weight，但該屬性不在LinearLayout節(jié)點(diǎn)設(shè)置，而在線性布局的直接下級視圖設(shè)置，表示改下級視圖占據(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

二、相對布局RelativeLayout

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

與該視圖自身平級的視圖該視圖的上級視圖

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

相對位置的取值

例:

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="上級左邊對齊"

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ù)，即每列能放多少視圖。

例:

xmlversion="1.0"encoding="utf-8"

GridLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/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

四、滾動視圖ScrollView

有兩種：

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

例:

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

xmlversion="1.0"encoding="utf-8"

LinearLayoutxmlns:android="/apk/res/android"

xmlns:app="/apk/res-auto"

xmlns:tools="/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://高度跟隨上級視圖

android:orientation="horizontal"http://水平排列

View

android:layout_width="300dp"http://寬度自定義，超出屏幕

android:layout_height="match_parent"

android:background="#aaffff"/

View

and