转发请注明出处:

安卓猴的博客(http://sunjiajia.com)

安卓猴的微博(@安卓猴)


通过本节课可以学习到的内容:

  • RelativeLayout以及它的相关属性

  • TableLayout以及它的特有属性


实例代码:

运行效果参见本课程示例App:安卓猴Demos

github地址:https://github.com/git0pen/MonkeyAndroid


RelativeLayout

顾名思义,RelativeLayout就是相对布局,置于其中的控件在摆放的时候需要相对于布局中的其它控件来摆放。

RelativeLayout相关属性

这些属性十分“众多”,因此大致了解即可,关键是在敲代码的过程中熟练运用。

属性 作用
第1组属性 相对属性
android:layout_below 将目标控件置于引用控件的下方
android:layout_above 将目标控件置于引用控件的上方
android:layout_toLeftOf 将目标控件置于引用控件的左方
android:layout_toRightOf 将目标控件置于引用控件的右方
第2组属性 对齐属性
android:layout_alignTop 目标控件和引用控件的上边缘对齐
android:layout_alignBottom 目标控件和引用控件的下边缘对齐
android:layout_alignLeft 目标控件与引用控件的左边缘对齐
android:layout_alignRight 目标控件与引用控件的右边缘对齐
android:layout_alignBaseLine 基于基准线对其,基准线就是我们写英文字母那4行线的第三条
第3组属性 这组属性的值是 true 或者 false
layout_alignParentRight 是否与父控件的右边缘对齐
layout_alignParentLeft 是否与父控件的左边缘对齐
layout_alignParentTop 是否与父控件的上边缘对齐
layout_alignParentBottom 是否与父控件的下边缘对齐
第4组属性 中间属性
layout_centerInParent 与父控件在水平方向和垂直方向都对齐
layout_centerVertical 与父控件在垂直方向都对齐
layout_centerHorizontal 与父控件在水平方向都对齐
第5组属性 引用属性
layout_alignStart 引用其他控件,表示与控件的开始位置对齐
layout_alignStop 引用其他控件,表示与控件的结束位置对齐
layout_alignParentStart 取值为true、false,表示与父控件的开始位置对齐
layout_alignParentStop 取值为true、false,表示与父控件的结束位置对齐

TableLayout

顾名思义,TableLayout布局就是表格布局。其实现的效果就如同上面的属性表格一样。

TableLayout的特有属性

  • android:stretchColumns="1"设置所用行的第二列为扩展列,如果有三列的话,剩余空间由第二列补齐。

  • android:shrinkColumns="1"设置所用行第二列为收缩列。

  • android:layout_column="0"表示当前控件在表格中的第0列,视觉效果上是第1列。

  • android:layout_span="2" 表示当前控件跨了两列。

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<?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"
>
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#41c2fa"
android:text="我右边是Button"
android:textColor="#fc0000"
android:textSize="22sp"
/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
android:layout_toEndOf="@+id/text_view"
android:layout_toRightOf="@+id/text_view"
android:text="我下边是ImageView"
/>
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button"
android:layout_alignStart="@+id/button"
android:layout_below="@+id/button"
android:src="@mipmap/ic_launcher"
/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/image_view"
android:stretchColumns="1"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/text_view_uname"
android:layout_column="0"
android:text="用户名:"
android:textSize="16sp"
/>
<EditText
android:id="@+id/edit_text_uname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/text_view_pwd"
android:layout_column="0"
android:text="密码:"
android:textSize="16sp"
/>
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:ems="10"
android:inputType="textPassword"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_gravity="right"
android:layout_span="2"
android:orientation="horizontal"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登陆"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注册"
/>
</LinearLayout>
</TableRow>
</TableLayout>
</RelativeLayout>

下课

这一节课,我们学习了RelativeLayout和TableLayout的用法,其中前者是必须重点掌握的布局,后者是需要了解的布局;熟练灵活地使用RelativeLayout布局,可以让你在今后的项目开发中对UI的把控更加游刃有余。

关于我

  • 微信公众号:Android奇想录(android_amazing)

扫描二维码关注公众号