Android快速入門之基礎布局

線性布局LinearLayout

線性布局是一種常用的界面是布局，在線性布局中，所有的子元素都按照垂直或水平的順序在界面上排列，每一個元素都位于上一個元素后面，當超過邊界時，將部分顯示或者不顯示，

先認識一個屬性：

• 垂直布局：android:orientation=“vertical” 每行僅包含一個界面元素
• 水平布局：android:orientation=“horizontal” 每列僅包含一個界面元素

常用的基本屬性：

• android:layout_gravity 指定子元素在LinearLayout中的對齊方式
• android:layout_weight 指定子元素在LinearLayout中所占的權重
• android:gravity 設定Layout中元素的對其方式
• android:layout_height\android:layout_width，設定元素的大小，有三個屬性
  • fill_parent 寬度或高度與父容器相同
  • match_parent 與fill_parent完全相同，從Android2.2以后推薦使用此屬性
  • wrap_content 組件的大小剛好包裹它的內容即可

案例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="30dp"
    android:orientation="vertical">
    
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="線性布局">
    </Button>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00ff00"
            android:text="垂直布局1">

        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ff0000"
            android:text="垂直布局2">

        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#0000ff"
            android:text="垂直布局3">

        </Button>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffff00"
            android:text="水平布局1">

        </Button>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ff00ff"
            android:text="水平布局2">

        </Button>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00ffff"
            android:text="水平布局3">

        </Button>

    </LinearLayout>

</LinearLayout>

運行效果圖：

相對布局RelativeLayout

利用控制元件之間的相對位置關系來進行布局，控制元件與父容器、控制元件與其他控制元件之間的相對關系

基本屬性：

第一類：屬性值為true或false

• android:layout_centerHorizontal 如果為true,將該控制元件的置于水平居中;
• android:layout_centerVertical 如果為true,將該控制元件的置于垂直居中;
• android:layout_centerInParent 如果為true,將該控制元件的置于父控制元件的中央;
• android:layout_alignParentTop 如果為true,將該控制元件的頂部與其父控制元件的頂部對齊;
• android:layout_alignParentBottom 如果為true,將該控制元件的底部與其父控制元件的底部對齊;
• android:layout_alignParentLeft 如果為true,將該控制元件的左部與其父控制元件的左部對齊;
• android:layout_alignParentRight 如果為true,將該控制元件的右部與其父控制元件的右部對齊;

第二類：相對于給定ID控制元件（@id/id_name）

• android:layout_below 將該控制元件的底部置于給定ID的控制元件之下;
• android:layout_above 將該控制元件的底部置于給定ID的控制元件之上;
• android:layout_toLeftOf 將該控制元件的右邊緣與給定ID的控制元件左邊緣對齊;
• android:layout_toRightOf 將該控制元件的左邊緣與給定ID的控制元件右邊緣對齊;
• android:layout_alignBaseline 將該控制元件的baseline與給定ID的baseline對齊;
• android:layout_alignTop 將該控制元件的頂部邊緣與給定ID的頂部邊緣對齊;
• android:layout_alignBottom 將該控制元件的底部邊緣與給定ID的底部邊緣對齊;
• android:layout_alignLeft 將該控制元件的左邊緣與給定ID的左邊緣對齊;
• android:layout_alignRight 將該控制元件的右邊緣與給定ID的右邊緣對齊;

第三類：屬性值為具體的像素值

• android:layout_marginTop 離某元素上邊緣的距離
• android:layout_marginBottom 離某元素下邊緣的距離
• android:layout_marginLeft 　　離某元素左邊緣的距離
• android:layout_marginRight 　 離某元素右邊緣的距離

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="30dp">

    <Button
        android:text="按鈕1"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="50dp"
        android:background="#00ff00">

    </Button>
    <Button
        android:text="按鈕2"
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button1"
        android:layout_below="@+id/button1"
        android:background="#ff0000">

    </Button>
    <Button
        android:text="按鈕3"
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button2"
        android:layout_below="@+id/button2"
        android:background="#0000ff">

    </Button>
    <Button
        android:text="按鈕4"
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button3"
        android:layout_below="@+id/button3"
        android:background="#ffff00">

    </Button>
    <Button
        android:text="按鈕5"
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button4"
        android:layout_below="@+id/button4"
        android:background="#ff00ff">

    </Button>
    <Button
        android:text="按鈕6"
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button2"
        android:layout_below="@+id/button2"
        android:background="#00ffff">

    </Button>

</RelativeLayout>

運行效果：

幀布局FrameLayout

幀布局（FrameLayout），又叫框架布局，是最簡單的界面布局，是用來存放一個元素的空白空間，且子元素的位置是不能夠指定的，只能夠放置在空白空間的左上角，如果有多個子元素，后放置的子元素將遮擋先放置的子元素，使用Android SDK中提供的層級觀察器（Hierarchy Viewer）進一步分析界面布局，

層級觀察器能夠對用戶界面進行分析和除錯，并以圖形化的方式展示樹形結構的界面布局

基本的屬性：

• android:gravity屬性：對該view 內容的限定. 以button為例，android:gravity=“right”則button上面的文字靠右，
• android:layout_gravity ：用來設定該view相對與父view 的位置，比如一個button 在linearlayout里，你想把該button放在靠左、靠右等位置就可以通過該屬性設定，

案例代碼：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_frame1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#FF6143"
        android:text="第一個TextView" />

    <TextView
        android:id="@+id/tv_frame2"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_gravity="center"
        android:background="#7BFE00"
        android:text="第二個TextView" />

    <TextView
        android:id="@+id/tv_frame3"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="#FFFF00"
        android:text="第三個TextView" />

    <TextView
        android:id="@+id/tv_frame4"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:background="#0000FF"
        android:text="第四個TextView" />
</FrameLayout>

運行結果：

絕對布局AbsoluteLayout

絕對布局能通過指定界面元素的坐標位置，來確定用戶界面的整體布局，它是一種不推薦使用的界面布局，因為通過X軸和Y軸確定界面元素位置后，Android系統不能夠根據不同螢屏對界面元素的位置進行調整，降低了界面布局對不同型別和尺寸螢屏的適應能力，

兩個屬性：

• android:layout_x 控制組件X坐標
• android:layout_y 控制組件y坐標

案例代碼：

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="149dp"
        android:layout_y="197dp"
        android:background="#00ff00"
        android:text="按鈕1">

    </Button>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="261dp"
        android:layout_y="240dp"
        android:background="#ff0000"
        android:text="按鈕2">

    </Button>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="108dp"
        android:layout_y="383dp"
        android:background="#0000ff"
        android:text="按鈕3">

    </Button>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="188dp"
        android:layout_y="469dp"
        android:background="#ffff00"
        android:text="按鈕4">

    </Button>

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="238dp"
        android:layout_y="350dp"
        android:background="#ff00ff"
        android:text="按鈕5">

    </Button>

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="43dp"
        android:layout_y="265dp"
        android:background="#00ffff"
        android:text="按鈕6">

    </Button>
</AbsoluteLayout>

運行結果：

表格布局TableLayout

配合TableRow使用，表示表格的一行，TableRow內有N個控制元件，表示有N列，TableRow繼承自LinearLayout，故每一行都是水平放置，

全域屬性：

• android:stretchColumns 設定可伸展的列（設定某列可拉伸），該列可以向行方向伸展，最多可占據一整行，
• android:shrinkColumns 設定可收縮的列，當該列子控制元件的內容太多，已經擠滿所在行，該子控制元件的內容將往列方向顯示，
• android:collapseColumns 設定要隱藏的列，

單元格屬性：

• android:layout_column 指定該單元格在第幾列顯示
• android:layout_span 指定該單元格占據的列數（未指定時，為1）

案例代碼：

<?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:layout_margin="30dp">

    <TableRow>
        <TextView
            android:id="@+id/info"
            android:layout_height="wrap_content"
            android:layout_span="4"
            android:gravity="right"
            android:text="0"
            android:textSize="40dp" />
        </TableRow>
    <TableRow>

        <Button android:text="AC"/>

        <Button android:text="B-X"/>

        <Button android:text="%" />

        <Button android:text="/" />
    </TableRow>

    <TableRow>
        <Button android:text="7" />

        <Button android:text="8" />

        <Button android:text="9" />

        <Button android:text="X" />
    </TableRow>

    <TableRow>
        <Button android:text="4" />

        <Button android:text="5" />

        <Button android:text="6" />

        <Button android:text="-" />
    </TableRow>

    <TableRow>
        <Button android:text="1" />

        <Button android:text="2" />

        <Button android:text="3" />

        <Button android:text="+" />
    </TableRow>

    <TableRow>
        <Button android:text="E" />

        <Button android:text="0" />

        <Button android:text="."/>

        <Button android:text="="/>
    </TableRow>

</TableLayout>

運行結果：

網格布局GridLayout

類似于表格布局，是Android 4.0及以上版本新增加的布局，使用虛細線將布局劃分為行、列和單元格，也支持一個控制元件在行、列上都有交錯排列，

網格布局分為水平和垂直兩種方式，默認是水平布局，一個控制元件挨著一個控制元件從左到右依次排列

• 指定android:columnCount設定列數的屬性后，控制元件會自動換行進行排列，指定某控制元件顯示在固定的行或列，只需設定該子控制元件的android:layout_row和android:layout_column屬性即可，計數從0開始

設定某控制元件跨越多行或多列： 將子控制元件的android:layout_rowSpan或者layout_columnSpan屬性設定為數值，再設定其layout_gravity屬性為fill即可，前一個設定表明該控制元件跨越的行數或列數，后一個設定表明該控制元件填滿所跨越的整行或整列，

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:columnCount="4"
    android:rowCount="6">

    <TextView
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="25sp"
        android:text="0"/>

    <Button android:text="C"/>

    <Button
        android:layout_column="3"
        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:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" />
    <Button android:text="0"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="2"
        android:text="00"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="3"
        android:text="="/>
</GridLayout>

運行結果：

約束性布局ConstraintLayout

約束性布局是Google在2016年的I/O大會上推出來的一個新的布局，根據布局中其他元素或視圖，確定View在螢屏中的位置，受到其他視圖、父容器和基準線三類約束，

ConstraintLayout 是一個新的 Support 庫，支持 Android 2.3 (API level 9) 以及以后的版本，使用ConstraintLayout需要確保在Android Stuido 2.2及以后版本，并且在 Android Studio 中使用 ConstraintLayout 之前需要先下載最新的 ConstraintLayout 庫，
ConstraintLayout有五十幾個布局屬性，可以分為ConstraintLayout本身使用的屬性、Guideline使用的屬性、相對定位屬性、Margin屬性、居中和偏移屬性、子View的尺寸控制屬性、UI編輯器使用的屬性

常用屬性：

• layout_constraintTop_toTopOf ?： View頂部與另一View頂部對齊
• layout_constraintTop_toBottomOf ?：View頂部另一View底部對齊
• layout_constraintBottom_toTopOf ?： View底部與另一View頂部對齊
• layout_constraintBottom_toBottomOf ?：View與另一View底部對齊
• layout_constraintLeft_toLeftOf ：View左邊與另一View左對齊
• layout_constraintRight_toLeftOf ?：? View右邊與另一View左邊對齊，

案例代碼：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        
        android:layout_marginStart="84dp"
        android:layout_marginTop="64dp"
        android:text="Submit"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText5"
        tools:ignore="MissingConstraints"
        android:layout_marginLeft="84dp" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="36dp"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText4" />

    <Button
        android:id="@+id/btnCancle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="64dp"
        android:text="Cancle"
        app:layout_constraintBottom_toBottomOf="@+id/btnSubmit"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.37"
        app:layout_constraintStart_toEndOf="@+id/btnSubmit"
        app:layout_constraintTop_toBottomOf="@+id/editText5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="192dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

運行結果：