Android布局——線性布局、相對布局、幀布局、表格布局、網格布局、限制布局

1.概述

1.1 布局的作用：布局是對界面結構的全面規劃和安排，通過api中提供的各種布局能夠快速的完成對界面的設計和規劃

1.2 布局的種類：線性布局（LinearLayout）、相對布局(RelativeLayout)、幀布局(FrameLayout)、表格布局（TableLayout）、網格布局（GridLayout）、限制布局（ConstraintLayout）其中三種不常用布局幀布局、表格布局、網格布局

1.3 常用屬性：layout_width 寬度、layout_height 高度、layout_padding 内邊距、layout_margin 外邊距，這個四個屬性是所有布局共有的屬性，取值有三種：match_parent比對父容器、wrap_content适應内容、xxdp具體數值，比如200dp

2.線性布局

1.方向屬性orientation：内容擺放的方向，有垂直（vertical）、水準（horizontal）兩種

<?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_margin="20dp"
         android:padding="20dp">
      
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#ff0000"
             android:text="登入按鈕"/>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00ff00"
             android:text="退出按鈕"/>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#0000ff"
             android:text="注冊按鈕"/>
     </LinearLayout>      

2.權重屬性layout_weight

如果要出現下圖的布局

這裡隻需要給第一個控件添權重重

渲染的時候先展示沒有權重的，最後剩餘的空間會被有權重的全部擁有

如果要合理的按比例配置設定，此時要設定layout_width="0dp"(如果垂直設定高度為0dp)

總共5份，以此占1/5 2/5 2/5，并且控件的内容是不會影響這個比列的

3.重力屬性

讓控件左，右，上，下，居中等進行偏移，但是如果水準上的布局比例已經确定，重力屬性在水準不再起作用，

如下讓中間的偏移到垂直居中

2.相對布局

相對布局是通過相對定位的方式讓控件出現在布局任意位置； 

在相對布局中如果不指定控件擺放的位置，那麼控件都會被預設放在RelativeLayout的左上角。是以要先指定第一個控件的位置，再根據此控件去給其他控件布局。

RelativeLayout常見屬性

相對于父容器layout_centerInParent（取值:true/false）

效果如下

其他常用屬性如下：

    android:layout_centerHrizontal  水準居中

    android:layout_centerVertical 垂直居中

    android:layout_centerInparent    相對于父元素完全居中

    android:layout_alignParentBottom 位于父元素的下邊緣

    android:layout_alignParentLeft   位于父元素的左邊緣

    android:layout_alignParentRight  位于父元素的右邊緣

    android:layout_alignParentTop    位于父元素的上邊緣

    android:layout_alignWithParentIfMissing  如果對應的兄弟元素找不到的話就以父元素做參照物

相對于其他控件(取值：其他控件id)

其他屬性：

android:layout_below      位于元素的下方

    android:layout_above      位于元素的的上方

    android:layout_toLeftOf   位于元素的左邊

    android:layout_toRightOf  位于元素的右邊

    android:layout_alignTop   該元素的上邊緣和某元素的的上邊緣對齊

    android:layout_alignLeft  該元素的左邊緣和某元素的的左邊緣對齊

    android:layout_alignBottom 該元素的下邊緣和某元素的的下邊緣對齊

    android:layout_alignRight  該元素的右邊緣和某元素的的右邊緣對齊

3.幀布局

如上圖類似這種布局就是幀布局，後面的子元素直接覆寫在前面的子元素之上，将前面的子元素部分和全部遮擋

常用屬性

android:layout_gravity="center"//控件重力

android:gravity="center"//控件内容相對于控件本身的位置

android:foreground="@mipmap/bg"//前景

android:foregroundGravity="center_vetical"//前景重力

案例代碼

<TextView
     android:layout_width="350dp"
     android:layout_height="350dp"
     android:background="#ff0000"
     android:layout_gravity="center"/>
 <TextView
     android:layout_width="200dp"
     android:layout_height="200dp"
     android:background="#00ff00"
     android:layout_gravity="center"
    />
 <TextView
     android:layout_width="100dp"
     android:layout_height="100dp"
     android:background="#0000ff"
     android:layout_gravity="center"
     android:text="測試内容"
     android:textColor="#ffffff"
     android:gravity="center"
     />      

效果

4.表格布局

通過行列的形式展示我們的控件，這樣的布局就是表格布局

常見屬性

android:stretchColumns="*"//設定可伸展的列，傳入的是整型資料，即列的索引，*代表所有，也可多個比如1,2

android:shrinkColumns="1"//可伸縮的列

android:collapseColumns="2,3"//隐藏的列

案例代碼

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:stretchColumns="*"
     >
     <!--
     1.直接在Tablelayout中添加控件，預設控件和父容器等寬，要讓一些控件出現在同一行，把這些控件放在TableRow
     裡面，寬度預設是内容寬度
     -->
     <EditText/>
     <TableRow>        <Button android:text="7" />
         <Button android:text="8" />
         <Button android:text="9" />
         <Button android:text="/" />
     </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="." />
         <Button android:text="0" />
         <Button android:text="=" />
         <Button android:text="*" />
     </TableRow>
     
 </TableLayout>      

5.網格布局

如上圖，網格布局和表格布局類似，但是網格能自身确定整個布局應該出現多少行多少列。控件放入的時候從左到右擺滿指定的列數，再從第二行開始擺放

常用屬性

android:orientation="horizontal"//表示控件在網格中從左到右順序擺放還是上到下的順序擺放

android:rowCount="4"//行數

android:columnCount="3"//列數

android:layout_rowSpan="2"//跨2行

android:layout_columnSpan="2"//跨2列

android:layout_gravity="fill"//填充展示

案例

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="horizontal"
     android:rowCount="4"
     android:columnCount="3"
     >
     <Button android:text="1"/>
     <Button android:text="2"/>
     <Button android:text="3"/>
     <Button android:text="4"
         android:layout_rowSpan="2"
         android:layout_columnSpan="2"
         android:layout_gravity="fill"/>
     <Button android:text="5"/>
     <Button android:text="6"/>
     <Button android:text="7"/>
     <Button android:text="8"/>
     <Button android:text="9"/>
 </GridLayout>      

6.限制布局

限制布局特點

1.前面介紹的布局，雖然在AS中可以拖拽控件實作，但寫代碼更加友善，但是限制布局更加傾向通過拖拽設計可視化

2.能夠有效解決布局過多問題，讓頁面更加扁平化

（由于是通過動手拖拽實作，是以需要多次嘗試才能熟練掌握）

常用屬性

app:layout_constraintBottom_toBottomOf="@+id/m"//目前控件的下邊線限制到到指定控件或者父容器下邊線

在AS中拖拽實作限制布局界面（嘗試多用幾次掌握）