Android的UI佈局

時間 2019-11-18

原文原文鏈接

Android的佈局分爲6種（教材有點老，遲點會更新），分別是相對佈局、線性佈局、表格佈局、網格佈局、幀佈局、絕對佈局。Visio畫圖以下：android

相對佈局（RelativeLayout）

相對佈局一般有兩種形式，一種是相對於容器而言，一種是相對於控件而言。部分經常使用的屬性以下：app

屬性聲明佈局	功能描述spa
android:layout_alignParentLeft3d	是否跟父佈局左對齊code
android:layout_alignParentRightxml	是否跟父佈局右對齊對象
android:layout_alignParentTopblog	是否跟父佈局頂部對齊utf-8
android:layout_alignParentBottom	是否跟父佈局底部對齊
android:layout_toRightOf	在指定控件的右邊
android:layout_toLeftOf	在指定控件的左邊
android:layout_above	在指定控件的上邊
android:layout_below	在指定控件的下邊
android:layout_alignBaseline	與指定控件水平對齊
android:layout_alignLeft	與指定控件左對齊
android:layout_alignRight	與指定控件右對齊
android:layout_alignTop	與指定控件頂部對齊
android:layout_alignBottom	與指定控件底部對齊

示例：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context=".MainActivity">
 8 
 9     <Button
10         android:id="@+id/btn1"
11         android:text="Button1"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_centerVertical="true"
15         android:layout_centerHorizontal="true"/>
16 
17     <Button
18         android:id="@+id/btn2"
19         android:text="Button2"
20         android:layout_width="wrap_content"
21         android:layout_height="wrap_content"
22         android:layout_toRightOf="@id/btn1"
23         android:layout_above="@id/btn1"/>
24 
25     <Button
26         android:id="@+id/btn3"
27         android:text="Button3"
28         android:layout_width="wrap_content"
29         android:layout_height="wrap_content"
30         android:layout_below="@id/btn1"
31         android:layout_toLeftOf="@id/btn1"/>
32 
33     <Button
34         android:id="@+id/btn4"
35         android:text="Button4"
36         android:layout_width="wrap_content"
37         android:layout_height="wrap_content"
38         android:layout_toRightOf="@id/btn3"
39         android:layout_alignBaseline="@id/btn3"/>
40 
41 </RelativeLayout>

效果圖

線性佈局（LinearLayout）

線性佈局是Android中較爲常見的佈局方式，使用的是<LinearLayout>標籤。線性佈局主要有兩種形式，由屬性android:orientation指定，分別爲水平線性佈局（horizontal）、垂直線性佈局（vertical）。

示例：

<?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:orientation="horizontal">

    <Button
        android:id="@+id/btn1"
        android:text="button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn2"
        android:text="button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn3"
        android:text="button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

水平線性佈局

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6 
 7     <Button
 8         android:id="@+id/btn1"
 9         android:text="button1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"/>
12     <Button
13         android:id="@+id/btn2"
14         android:text="button2"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"/>
17     <Button
18         android:id="@+id/btn3"
19         android:text="button3"
20         android:layout_width="wrap_content"
21         android:layout_height="wrap_content"/>
22 
23 </LinearLayout>