Android常用布局-有解無憂

1.線性布局（LinearLayout）

常用屬性

1.orientation：布局中組件的排列方式（默認為水平方向（horizontal），垂直方向（vertical））
新建一個布局檔案：linearLayout.xml

<?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"
    tools:context=".MainActivity">

<!--    水平（默認）方向的效果-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="horizontal">
        <Button
            android:text="水平第一個"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <Button
            android:text="水平第二個"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <Button
            android:text="水平第三個"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
    </LinearLayout>
<!--    垂直方向的效果-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:text="垂直第一個"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <Button
            android:text="垂直第二個"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <Button
            android:text="垂直第三個"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
    </LinearLayout>

</LinearLayout>

效果圖：
排列方式

從上圖可以看出第一個線性布局采用的是默認的水平方向的排列方式，第二個采用垂直方向的排列方式，

2.gravity：控制組件所包含的子元素的對齊方式，可以多個組合
默認情況：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:background="@color/black"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
    <LinearLayout
        android:background="@color/purple_500"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
    <LinearLayout
        android:background="@color/teal_200"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

</LinearLayout>

設定gravity屬性后：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:background="@color/black"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
    <LinearLayout
        android:background="@color/purple_500"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
    <LinearLayout
        android:background="@color/teal_200"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

</LinearLayout>

gravity屬性設定為center_vertical，組件垂直居中顯示，也可以通過 “|”來進行屬性的組合
例如：android:gravity=“center_vertical|center_horizontal”：這時就會居中顯示

3.layout:gravity：控制組件在父容器中的對齊方式（和gravity不同的是gravity是父容器設定組件在其中的對齊方式，layout:gravity是組件設定自身在父容器中的對齊方式）
4.background：設定一個背景圖片或者直接用顏色覆寫
5.divider：設定分割線
6.showDividers：設定分割線所在的位置，none（無），beginning（開始位置），end（結束位置），middle（每兩個組件之間）
7.dividerPadding：設定分割線的padding（分割線距離父容器的邊距）
分割線可以使用drawable資源，直接在父容器的屬性中進行設定，

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:orientation="vertical"
    android:gravity="center_vertical|center_horizontal"
    android:divider="@drawable/ic_baseline_arrow_right_alt_24"
    android:showDividers="middle"
    android:dividerPadding="150dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

分割線

8.layout_weight：權重（進行等比例劃磁區域）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <LinearLayout
       android:background="@color/black"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"/>
    <LinearLayout
        android:background="@color/purple_200"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>
    <LinearLayout
        android:background="@color/teal_700"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"/>
</LinearLayout>

從上圖可以看出三個線性布局按照1：2：3的比例均勻的分配了父容器的空間，

，如果不使用0dp的方式，使用match_parent的方式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <LinearLayout
       android:background="@color/black"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_weight="2"/>
    <LinearLayout
        android:background="@color/purple_200"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <LinearLayout
        android:background="@color/teal_700"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
</LinearLayout>

權重2
可以發現，權重為2的黑色區域沒有分配到空間，
這時就需要計算一下了：

三個區域全部是match_parent，但是螢屏只有一個，所以每個區域分配到的螢屏是：
1-3= -2個螢屏
然后按照每塊區域的權重比例進行分配（2：1：1）
第一個線性布局分配到的區域是：1-2*（2/4）=0，所以沒有顯示黑色的區域，剩下兩個線性布局也一次計算，分別分配到的區域是1/2,1/2.所以就造成了如上圖顯示的情況，

2.相對布局（RelativeLayout）

根據父容器定位

layout_alignParentLeft：左對齊
layout_alignParentRight：右對齊
layout_alignParentTop：頂部對齊
layout_alignParentBottom：底部對齊
layout_alignHorizontal：水平居中
layout_alignVertical：垂直居中
layout_centerInParent：中間位置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_alignParentLeft="true"
        android:background="#ff0000"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
    <RelativeLayout
        android:layout_alignParentRight="true"
        android:background="#00ff00"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
    <RelativeLayout
        android:layout_centerInParent="true"
        android:background="#0000ff"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
</RelativeLayout>

示例圖：
根據父容器定位

根據兄弟組件定位

layout_toLeftOf：放置于參考組件的左邊
layout_toRightOf：放置于參考組件的右邊
layout_above：放置于參考組件的上方
layout_below：放置于參開組件的下方
layout_alignTop：對其與參考組件的上邊界
layout_alignBottom：對其參考組件的下邊界
layout_alignLeft：對齊參考組件的左邊界
layout_alignRight：對齊參考組件的右邊界

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:background="@color/white"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <RelativeLayout
       android:id="@+id/one"
       android:background="#ff0000"
       android:layout_width="200dp"
       android:layout_height="200dp"/>
   <RelativeLayout
       android:id="@+id/two"
       android:layout_below="@id/one"
       android:background="#00ff00"
       android:layout_width="200dp"
       android:layout_height="200dp"/>
   <RelativeLayout
       android:layout_below="@id/one"
       android:layout_toRightOf="@id/two"
       android:id="@+id/three"
       android:background="#0000ff"
       android:layout_width="200dp"
       android:layout_height="200dp"/>
</RelativeLayout>

示例圖：
根據兄弟組件定位

3.FrameLayout（幀布局）

FrameLayout是六大布局中最簡單的一個，在該布局中放置的所有空間都默認放到螢屏的左上方，幀布局的大小由控制元件中最大的子控制元件決定，如果控制元件一樣大的話，同一時刻我們只能看到最上方的控制元件，雖然FrameLayout會默認將子控制元件放置于左上方，但是我們也可以通過layout_gravity指定控制元件的位置，

在FrameLayout中有一個前景影像，這個前景影像永遠在幀布局的最上方，是用戶可以直接看到的，這個前景影像是不會被子控制元件覆寫的，

用一個最簡單的例子來介紹：

<?xml version="1.0" encoding="utf-8"?>
<!--android:foreground="@drawable/ic_baseline_format_bold_24：設定前景圖片（可以是drawable資源）
android:foregroundGravity：設定前景影像顯示的位置，這里沒有進行設定-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/ic_baseline_format_bold_24">

    <FrameLayout
        android:background="#0000ff"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
    <FrameLayout
        android:background="#ff0000"
        android:layout_width="150dp"
        android:layout_height="150dp"/>
    <FrameLayout
        android:background="#00ff00"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

</FrameLayout>

示例圖：
FrameLayout
從上圖可以看出，字母B也就是前景影像并沒有受到子控制元件的影響，而其他三個子控制元件同通過顏色的區分也能明顯看出，每添加一個子控制元件就會默認放置于父容器的左上方，并且覆寫之前已經添加的子控制元件，

4.GridLayout（網格布局）

網格布局是Android4.0之后引入的一個布局，在網格布局中我們可以直接自己設定布局的排列方式，可以自定義網格布局有多少列多少行，同時也可以直接設定組件在第幾行第幾列，也可以設定組件可以橫跨幾列或者幾行，

基礎屬性

android：orientation：設定排列方式（水平或者垂直）
android：layout_gravity：設定對齊方式（left，right，bottom，top，也可以使用“|”進行組合排列）
android：rowCount：設定行數（一行可以顯示多少列）
android：columCount：設定列數
android：layout_row：設定組件所在的行
android：layout_colum：設定組件所在的列
android：layout_rowSpan：設定組件跨幾行
android：layout_rowSpan：設定組件跨幾列

網格布局最簡單的例子就是計算器，接下來用網格布局實作一個計算器的界面：

簡易計算器

貼下xml代碼：

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />

    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="-" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="*" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:text="." />

    <Button android:text="0" />

    <Button android:text="=" />

</GridLayout>

當設定一個組件橫跨幾列的時候可能會發現并不會達到預期的效果，這個時候就需要使用：
android:layout_gravity=“fill”，讓該組件填充滿所占的空間，
在上面可以發現，默認每個組件都是占一行一列，可以通過weight（權重）來進行等比例劃分，會讓界面看的更加美觀，

5.TableLayout（表格布局）

如果我們在TableLayout中直接添加一個控制元件的話，這個控制元件就會占滿一行，如果想讓一行有多個控制元件的話就需要和TableRow一起使用，這里TableRow組件個數決定了該行的列數，

常用屬性

android:collapseColumns:設定需要被隱藏的列的序號，從0開始
android:shrinkColumns:設定可以被收縮的列的序號，從0開始（需要前置條件：子控制元件占滿當前行）
android:stretchColumns:設定運行被拉伸的列的列序號，從0開始（需要當前行有剩余空間）

子控制元件的設定屬性

android:layout_column：顯示在第幾列
android:layout_span：組件可以橫跨幾列

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="1"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="2"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="3"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="4"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="5"/>
    </TableRow>
    <TableRow>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="6"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="7"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="8"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="9"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="10"/>
    </TableRow>

</TableLayout>

collapseColumns：隱藏列

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns="2">
    <TableRow>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="1"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="2"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="3"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="4"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="5"/>
    </TableRow>
    <TableRow>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="6"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="7"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="8"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="9"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="10"/>
    </TableRow>

</TableLayout>

可以發現第三列被隱藏了，拉伸和收縮列也是如此進行設定，
當然還有一個AbsoluteLayout(絕對布局)，但是這個布局局限性太大，所以一般是不會使用的，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/337733.html

標籤：其他

上一篇：今天周一呀

下一篇：移動端測驗(adb命令)