004 Android XML文件常用五大頁面布局方式

1.線性布局（LinearLayout）最常用

<1>使用線性布局，首先在xml文件中修改布局為LinearLayout

修改完成后，可在Component Tree中看見如下內容：

<2>點擊LinearLayout,可在右側的Attributes(屬性)中進一步設置是水平放置或者垂直放置

 

注意：每個控件的大小其實還是需要設置的，即需要設置布局高度(layout_width)和布局寬度(layout_height)，默認采用match_parent

<3>對齊方式設置：即可以在xml文件中輸入

android:gravity="center" 設置該線性布局內的組件居中放置

<4> 控件屬性設置（attribute）

Plain Test控件設置提示字符

方法：在Attributes中的hint中設置提示字符

<5>設置組件的大小為自適應大小

必須刪除xml文件中組件屬性里的 android:layout_weight="1"

<6>設置控件的對齊方式、邊距

<?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"
    tools:context=".MainActivity"
    android:gravity="center_horizontal">
    
    <TextView
        android:id="@+id/textView"
        android:layout_marginLeft="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>

(1)在父容器的線性布局中設置屬性

android:gravity="center_horizontal"

使得，該線性布局內的所有組件全都水平居中。

(2)在子容器TextView中設置屬性

android:layout_marginLeft="80dp"

使得，這個TextView組件在水平居中的基礎上，向右移動的80dp（即左邊距為80dp）

<7>設置字體的大小、顏色

<TextView
        android:id="@+id/tv_login"
        android:layout_marginLeft="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#044BA3"
        android:textSize="20dp"
        android:text="TextView" />

(1)在組件中添加

android:textColor="#044BA3"

設置字體的顏色。

(2)在組件中添加

android:textSize="20dp"

設置字體的大小。

<8>設置控件的id

<TextView
        android:id="@+id/tv_login"
        android:layout_marginLeft="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

注意：設置組件的id的命名方法為提取組件的兩個駝峰+組件實際功能(例如：TextView---> 變為tv_login)

2.表格布局(TableLayout)

注意：表格布局不推薦使用。

<1>使用表格布局，首先在xml文件中修改布局為TableLayout

 

<2>外部圖片導入工程后的存放位置

任選project 工程名-->app-->src-->main下的一個文件夾

<3>app設置背景圖片

在xml文件中輸入 android:background="@mipmap/background"

<4>圖片組件

palatte-->widgets--->imageview

多個圖片設置對齊方式

選擇父容器，選擇對齊方式(orientation、gratity)

TableLayout布局使用案例(test02)：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:background="@mipmap/background"
    tools:context=".MainActivity">


    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@mipmap/blockbg_big"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2019/3/2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@mipmap/blockbg_big"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img01" />

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img07" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img06" />

        </LinearLayout>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:background="@mipmap/blockbg_big"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img05" />

            <ImageView
                android:id="@+id/imageView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img03a" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img02" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:background="@mipmap/blockbg_big"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView12"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img07" />

            <ImageView
                android:id="@+id/imageView11"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/ic_launcher" />

            <ImageView
                android:id="@+id/imageView10"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/img03a" />
        </LinearLayout>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:background="@mipmap/blockbg_big"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:srcCompat="@mipmap/email" />
        </LinearLayout>
    </TableRow>
</TableLayout>

效果圖為：

3 約束布局（ConstraintLayout）

<1>圖片組件(imageview)分別與約束布局的父容器的上下左右對齊

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

<2>imageview 組件與imageview 組件可以在design中采用拖拽的方式使其對齊(注意：下圖的連線方式)

注意：約束布局(ConstraintLayout)最大的特點是可以以拖拽的方式固定組件的位置

案例：test03

4 相對布局(RelativeLayout)   常用

下面是RelativeLayout各個屬性 

android:layout_above="@id/xxx"  --將控件置於給定ID控件之上

android:layout_below="@id/xxx"  --將控件置於給定ID控件之下

android:layout_toLeftOf="@id/xxx"  --將控件的右邊緣和給定ID控件的左邊緣對齊

android:layout_toRightOf="@id/xxx"  --將控件的左邊緣和給定ID控件的右邊緣對齊

android:layout_alignLeft="@id/xxx"  --將控件的左邊緣和給定ID控件的左邊緣對齊

android:layout_alignTop="@id/xxx"  --將控件的上邊緣和給定ID控件的上邊緣對齊

android:layout_alignRight="@id/xxx"  --將控件的右邊緣和給定ID控件的右邊緣對齊

android:layout_alignBottom="@id/xxx"  --將控件的底邊緣和給定ID控件的底邊緣對齊

android:layout_alignParentLeft="true"  --將控件的左邊緣和父控件的左邊緣對齊

android:layout_alignParentTop="true"  --將控件的上邊緣和父控件的上邊緣對齊

android:layout_alignParentRight="true"  --將控件的右邊緣和父控件的右邊緣對齊

android:layout_alignParentBottom="true" --將控件的底邊緣和父控件的底邊緣對齊

android:layout_centerInParent="true"  --將控件置於父控件的中心位置

android:layout_centerHorizontal="true"  --將控件置於水平方向的中心位置

android:layout_centerVertical="true"  --將控件置於垂直方向的中心位置

(1)使用小案例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".UserGuideActivity">

    <Button
        android:id="@+id/bt_userguide_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:text="開始體驗"/>
</RelativeLayout>

(2)效果圖

(3)代碼分析

<1>設置按鈕距離底部60dp

android:layout_alignParentBottom="true"
android:layout_marginBottom="60dp"

<2>水平方向居中

android:layout_centerHorizontal="true"

5、網格布局(GridLayout)

典型應用：計算器的布局

源碼案例：test16

<?xml version="1.0" encoding="utf-8"?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:columnCount="4"
        android:orientation="horizontal"
        android:rowCount="5"
        android:useDefaultMargins="true"
        tools:context=".MainActivity">


        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="0"
            android:text="1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="1"
            android:text="2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="2"
            android:text="3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="3"
            android:text="+" />

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:text="4" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:text="5" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="2"
        android:text="6" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="3"
        android:text="-" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="0"
        android:text="7" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="1"
        android:text="8" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="2"
        android:text="9" />

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="3"
        android:text="*" />

    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="0"
        android:text="0" />

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="刪除" />

    <Button
        android:id="@+id/button15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="3"
        android:text="/" />

    <Button
        android:id="@+id/button18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"

        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="clear" />

    <Button
        android:id="@+id/button20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="Button" />


</GridLayout>