Android 常用布局

LinearLayout（线性布局）

cd988578dae93dcf.png

实现效果图

da81eaf74ef884bc.png

activity_linear_layout.xml 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?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"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="横排第一个"
            android:textSize="17sp">
        </TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="横排第二个"
            android:textSize="17sp">
        </TextView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="竖排第一个"
            android:textSize="17sp">
        </TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="竖排第二个"
            android:textSize="17sp">
        </TextView>
    </LinearLayout>


</LinearLayout>

线性布局的权重

85a51d62606f341a.png

activity_linear_layout.xml 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#ff0000">

        <TextView
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="横排第一个"
            android:textSize="17sp">
        </TextView>

        <TextView
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="横排第二个"
            android:textSize="17sp">
        </TextView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#00ffff"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="竖排第一个"
            android:textSize="17sp">
        </TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="竖排第二个"
            android:textSize="17sp">
        </TextView>
    </LinearLayout>


</LinearLayout>

相对布局RelativeLayout

5556d17336d70509.png

3d935df473375233.png

效果图

34f19e82993c7b9f.png

实现代码activity_relative_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?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="150dp">
    
    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerInParent="true"
        android:text="我在中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerHorizontal="true"
        android:text="我在水平中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerVertical="true"
        android:text="我在垂直中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_alignParentLeft="true"
        android:text="我跟上级左边对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_alignParentRight="true"
        android:text="我跟上级右边对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_alignParentTop="true"
        android:text="我跟上级顶部对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_alignParentBottom="true"
        android:text="我跟上级底部对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_left_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_toLeftOf="@id/tv_center"
        android:layout_alignTop="@id/tv_center"
        android:text="我在中间左边"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_right_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_toRightOf="@id/tv_center"
        android:layout_alignBottom="@id/tv_center"
        android:text="我在中间右边"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_above_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_above="@id/tv_center"
        android:layout_alignLeft="@id/tv_center"
        android:text="我在中间上面"
        android:textSize="11sp"
        android:textColor="#000000"/>

    <TextView
        android:id="@+id/tv_below_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_below="@id/tv_center"
        android:layout_alignRight="@id/tv_center"
        android:text="我在中间下面"
        android:textSize="11sp"
        android:textColor="#000000"/>

</RelativeLayout>

网格布局GridLayout

1570f0c0100d69bb.png

代码实现activity_grid_layout.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">

    <TextView
        android:gravity="center"
        android:layout_width="0dp"
        android:layout_columnWeight="1"
        android:layout_height="60dp"
        android:background="#FFCCCC"
        android:text="浅红色"
        android:textColor="#000000"
        android:textSize="17sp"
        />
    <TextView
        android:gravity="center"
        android:layout_width="0dp"
        android:layout_columnWeight="1"
        android:layout_height="60dp"
        android:background="#FFAA00"
        android:text="橙色"
        android:textColor="#000000"
        android:textSize="17sp"
        />
    <TextView
        android:gravity="center"
        android:layout_width="0dp"
        android:layout_columnWeight="1"
        android:layout_height="60dp"
        android:background="#00FF00"
        android:text="绿色"
        android:textColor="#000000"
        android:textSize="17sp"
        />
    <TextView
        android:gravity="center"
        android:layout_width="0dp"
        android:layout_columnWeight="1"
        android:layout_height="60dp"
        android:background="#660066"
        android:text="深紫色"
        android:textColor="#000000"
        android:textSize="17sp"
        />
    
</GridLayout>

滚动视图ScrollView

e12df3bcafeb92a5.png

效果图

2ecd18c78efc6ff3.png

activity_scroll_view.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?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="vertical"
    >
    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="200dp">
        <!-- 水平方向的线性布局，两个子视图的颜色分别为青色和黄色-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <View
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:background="#aaffff"/>

        <View
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:background="#ffff00"/>

    </LinearLayout>

    </HorizontalScrollView>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 垂直方向的线性布局，两个子视图的颜色分别为绿色和橙色-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#00ff00"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#ffffaa"/>

        </LinearLayout>

    </ScrollView>

  </LinearLayout>