一定能看到懂的Android常見介面佈局詳解

一、View檢視

所有的UI元素都是透過View與ViewGroup構建的，對於一個Android應用的使用者介面來說，ViewGroup作為容器盛裝介面中的控制元件，它可以包含普通的View控制元件，也可以包含ViewGroup。

二、介面佈局編寫方式

有兩種介面佈局方式，第一種是在XML檔案中編寫佈局，最常用的也是這種；第二種是在java程式碼中編寫佈局，如圖：

1、在XML檔案中編寫佈局

UI介面如圖：

2、在java程式碼中編寫佈局

UI介面如圖：

三、常見介面佈局

1、常用佈局及特點：

2、佈局的通用屬性
Android系統提供的五種常用佈局直接或者間接繼承自ViewGroup，因此它們也支援在ViewGroup中定義的屬性，這些屬性可以看作是佈局的通用屬性。

3、RelativeLayout相對佈局
（1）概述
相對佈局（RelativeLayout）是透過相對定位的方式指定子控制元件位置，即以其它控制元件或父容器為參照物，擺放控制元件位置。
（2）定義格式

（3）相對佈局—控制元件位置屬性

（4）UI介面

4、LinearLayout線性佈局
（1）概述
線性佈局（LinearLayout）主要以水平或垂直方式來顯示介面中的控制元件。當控制元件水平排列時，顯示順序依次為從左到右，當控制元件垂直排列時，顯示順序依次為從上到下。

（2）orientation屬性

orientation屬性控制控制元件排列方向，包含兩個屬性值：vertical(垂直)、horizontal(水平)；
weight屬性表示權重。

比如一共有三個按鈕水平排列，分別為按鈕1、按鈕2、按鈕3，那麼orientation屬性為horizontal,按鈕1的weight為1，按鈕2的weight為1，按鈕3的weight為2。那麼它們的寬度將按照比重來，按鈕1佔1/4,按鈕2佔1/4，按鈕3佔1/2也就是一半，如圖：

（3）線性佈局—注意事項

5、TableLayout表格佈局

（1）概述
採用行、列的形式來管理控制元件，它不需要明確宣告包含多少行、多少列，而是透過在TableLayout佈局中新增TableRow佈局來控制表格的行數，透過在TableRow佈局中新增控制元件來控制表格的列數。

（2）程式碼樣式

<TableLayout xmlns:android="
             屬性 = ”屬性值”>
             <TableRow>
    UI控制元件             </TableRow>
                 ......</TableLayout>複製程式碼

（3）佈局屬性和控制元件屬性

（4）UI介面

<TableLayout xmlns:android="
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stretchColumns="2">//第3列可被拉伸        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"//設定控制元件所在列                android:text="按鈕1" />
    ......        </TableRow>
    </TableLayout>複製程式碼

6、FrameLayout幀佈局

（1）概述
幀佈局（FrameLayout）用於在螢幕上建立一塊空白區域，新增到該區域中的每個子控制元件佔一幀，這些幀會一個一個疊加在一起，後加入的控制元件會疊加在上一個控制元件上層
所有控制元件都預設顯示在螢幕左上角。

（2）定義格式

<FrameLayout xmlns:android="
    屬性 ="屬性值"></FrameLayout>複製程式碼

（3）UI介面

<FrameLayout xmlns:android="
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@mipmap/ic_launcher"//設定幀佈局容器的前景影像（始終在所有子控制元件之上）
        android:foregroundGravity="left" >//設定前景影像顯示位置
    </FrameLayout>
複製程式碼

7、ConstraintLayout約束佈局

（1）概述
ConstraintLayout是Android Studio2.2新新增的佈局。
它適合使用視覺化的方式編寫介面佈局——當然，視覺化操作的背後仍然是使用XML程式碼實現的，只不過這些程式碼是Android Studio根據我們的操作自動生成的。包含相對定位、居中定位和傾向、Chain三項。

（2）相對定位
相對定位是在ConstraintLayout中建立佈局的基本構建方法之一。相對定位即一個控制元件相對於另一個控制元件進行定位。
ConstraintLayout佈局中的控制元件可以在橫向和縱向上以新增約束關係的方式進行相對定位，其中，橫向邊包括Left、Start、Right、End，縱向邊包括Top、Bottom、Baseline（文字底部的基準線）。

（3）相對定位關係的屬性

（4）居中定位和傾向

（5）Chain

四、總結：

部落格內容主要針對Android介面佈局的相關知識進行講解。透過本次的學習，我們希望讀者能夠掌握View和ViewGroup的功能、掌握不同介面佈局以及佈局中控制元件屬性的使用，因為在Android應用中，所有功能大部分都體現在介面上，介面的美觀會給使用者一個友好的體驗。

《Android常見介面佈局解析》——→ 影片詳細講解地址

作者：振華OPPO
來源：
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。