一起学Android之Layout

2022-10-02 09:28:45

本文简述在Android开发中布局的简单应用，属于基础知识，仅供学习分享使用。

概述

在Android UI开发中，布局类型主要有两种：LinearLayout(线性布局)和RelativeLayout(相对布局)，两种布局类型各有各的优势与使用场景。

LinearLayout（线性布局）

线性布局允许所有的子元素，以单独的方向进行排列（水平或垂直），所有的元素像栈一样一个接一个的插入，所以如果是垂直(vertical)方向，则每一行只有一个元素。如果是水平( horizontal)方向，则只有一行。（如下图1所示）

线性布局重要属性

android:orientation 设置排列的方向。主要有两个值：horizontal(水平)，vertical(垂直)。

android:layout_weight 权重，按比例分配剩余空间。

　　　　　　　　（图1）（图2）

RelativeLayout(相对布局)

相对布局是指所有子元素以相对的位置进行定位。一个元素可以通过相对于指定的同级元素（如，左边，右边，上边，下边）进行定位，也可以通过父元素进行定位（如，布局控件的顶端，左端，右端，底部等）（如上图2 所示）。如果发现页面中有多个线性布局进行嵌套，那么你就应该用一个相对布局来替换它。

相对布局重要属性

android:layout_alignParentTop 是否位于父控件的顶部（true 或 false）
android:layout_alignParentBottom 是否位于父控件的底部（true 或 false）
android:layout_alignParentLeft 是否位于父控件的左边（true 或 false）
android:layout_alignParentRight 是否位于父控件的右边（true 或 false）
android:layout_centerInParent 是否位于父控件的中心（true 或 false）
android:layout_toLeftOf 位于指定控件的左边（值为控件的ID）
android:layout_toRightOf 位于指定控件的右边（值为控件的ID）
android:layout_above 位于指定控件的上边（值为控件的ID）
android:layout_below 位于指定控件的下边（值为控件的ID）

实例截图

如下图1所示为线性布局（相对简单），如下图2所示，为相对布局（相对复杂）

图3 图4

布局源程序

线性布局

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <LinearLayout
  3     xmlns:android="http://schemas.android.com/apk/res/android"
  4     xmlns:tools="http://schemas.android.com/tools"
  5     android:layout_width="match_parent"
  6     android:layout_height="match_parent"
  7     android:paddingBottom="@dimen/activity_vertical_margin"
  8     android:paddingLeft="@dimen/activity_horizontal_margin"
  9     android:paddingRight="@dimen/activity_horizontal_margin"
 10     android:paddingTop="@dimen/activity_vertical_margin"
 11     android:orientation="vertical"
 12     tools:context="com.hex.demolayout.LinearActivity">
 13     <TextView
 14         android:id="@+id/tv_text"
 15         android:text="@string/tv_name"
 16         android:textSize="20dp"
 17         android:layout_marginTop="5dp"
 18         android:textColor="@color/colorBlue"
 19         android:layout_width="match_parent"
 20         android:layout_height="wrap_content"/>
 21     <EditText
 22         android:id="@+id/txt_name"
 23         android:hint="@string/hint_name"
 24         android:layout_width="match_parent"
 25         android:layout_height="wrap_content"/>
 26     <TextView
 27         android:id="@+id/tv_age"
 28         android:text="@string/tv_age"
 29         android:textSize="20dp"
 30         android:layout_marginTop="5dp"
 31         android:textColor="@color/colorBlue"
 32         android:layout_width="match_parent"
 33         android:layout_height="wrap_content"/>
 34     <EditText
 35         android:id="@+id/txt_age"
 36         android:hint="@string/hint_name"
 37         android:layout_width="match_parent"
 38         android:layout_height="wrap_content"/>
 39     <TextView
 40         android:id="@+id/tv_sex"
 41         android:text="@string/tv_sex"
 42         android:textSize="20dp"
 43         android:layout_marginTop="5dp"
 44         android:textColor="@color/colorBlue"
 45         android:layout_width="match_parent"
 46         android:layout_height="wrap_content"/>
 47     <RadioGroup
 48         android:id="@+id/rg_sex"
 49         android:layout_marginTop="5dp"
 50         android:orientation="horizontal"
 51         android:layout_width="match_parent"
 52         android:layout_height="wrap_content">
 53         <RadioButton
 54             android:id="@+id/rb_male"
 55             android:text="@string/male"
 56             android:textSize="20sp"
 57             android:checked="true"
 58             android:layout_width="wrap_content"
 59             android:layout_height="wrap_content"/>
 60         <RadioButton
 61             android:id="@+id/rb_female"
 62             android:textSize="20sp"
 63             android:text="@string/female"
 64             android:layout_marginLeft="30dp"
 65             android:layout_width="wrap_content"
 66             android:layout_height="wrap_content"/>
 67     </RadioGroup>
 68     <TextView
 69         android:id="@+id/tv_love"
 70         android:text="@string/love"
 71         android:textSize="20dp"
 72         android:layout_marginTop="5dp"
 73         android:textColor="@color/colorBlue"
 74         android:layout_width="match_parent"
 75         android:layout_height="wrap_content"/>
 76     <LinearLayout
 77         android:layout_width="match_parent"
 78         android:layout_height="wrap_content"
 79         android:layout_marginTop="10dp"
 80         android:orientation="horizontal">
 81         <CheckBox
 82             android:id="@+id/ck_basketball"
 83             android:text="@string/basketball"
 84             android:textSize="20dp"
 85             android:layout_width="wrap_content"
 86             android:layout_height="wrap_content"/>
 87         <CheckBox
 88             android:id="@+id/ck_football"
 89             android:text="@string/football"
 90             android:textSize="20dp"
 91             android:layout_marginLeft="30dp"
 92             android:layout_width="wrap_content"
 93             android:layout_height="wrap_content"/>
 94         <CheckBox
 95             android:id="@+id/ck_game"
 96             android:text="@string/game"
 97             android:textSize="20dp"
 98             android:layout_marginLeft="30dp"
 99             android:layout_width="wrap_content"
100             android:layout_height="wrap_content"/>
101     </LinearLayout>
102     <TextView
103         android:id="@+id/tv_school"
104         android:text="@string/school"
105         android:textSize="20dp"
106         android:layout_marginTop="5dp"
107         android:textColor="@color/colorBlue"
108         android:layout_width="match_parent"
109         android:layout_height="wrap_content"/>
110     <EditText
111         android:id="@+id/txt_school"
112         android:hint="@string/hint_school"
113         android:layout_width="match_parent"
114         android:layout_height="wrap_content"/>
115     <TextView
116         android:id="@+id/tv_addr"
117         android:text="@string/addr"
118         android:textSize="20dp"
119         android:layout_marginTop="5dp"
120         android:textColor="@color/colorBlue"
121         android:layout_width="match_parent"
122         android:layout_height="wrap_content"/>
123     <EditText
124         android:id="@+id/txt_addr"
125         android:hint="@string/hint_addr"
126         android:layout_width="match_parent"
127         android:layout_height="wrap_content"/>
128     <Button
129         android:id="@+id/bn_submit"
130         android:text="@string/bn_submit"
131         android:textColor="@color/colorBlue"
132         android:layout_width="match_parent"
133         android:layout_height="wrap_content"/>
134 </LinearLayout>

View Code

相对布局

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <RelativeLayout
  3     xmlns:android="http://schemas.android.com/apk/res/android"
  4     xmlns:tools="http://schemas.android.com/tools"
  5     android:layout_width="match_parent"
  6     android:layout_height="match_parent"
  7     android:paddingBottom="@dimen/activity_vertical_margin"
  8     android:paddingLeft="@dimen/activity_horizontal_margin"
  9     android:paddingRight="@dimen/activity_horizontal_margin"
 10     android:paddingTop="@dimen/activity_vertical_margin"
 11     tools:context="com.hex.demolayout.MainActivity">
 12 
 13     <TextView
 14         android:id="@+id/tv_title"
 15         android:layout_centerHorizontal="true"
 16         android:layout_alignParentTop="true"
 17         android:layout_width="wrap_content"
 18         android:layout_height="wrap_content"
 19         android:textSize="30dp"
 20         android:textColor="@color/colorBlue"
 21         android:layout_margin="3dp"
 22         android:text="@string/nine_tip"/>
 23     <TextView
 24         android:id="@+id/tv_center"
 25         android:text="@string/center"
 26         android:textSize="30dp"
 27         android:layout_margin="3dp"
 28         android:onClick="open"
 29         android:textColor="@color/colorRed"
 30         android:layout_centerInParent="true"
 31         android:layout_width="wrap_content"
 32         android:layout_height="wrap_content"/>
 33     <TextView
 34         android:id="@+id/tv_east"
 35         android:text="@string/east"
 36         android:textSize="30dp"
 37         android:layout_margin="3dp"
 38         android:textColor="@color/colorRed"
 39         android:layout_alignParentLeft="true"
 40         android:layout_centerVertical="true"
 41         android:layout_width="wrap_content"
 42         android:layout_height="wrap_content"/>
 43     <TextView
 44         android:id="@+id/tv_west"
 45         android:text="@string/west"
 46         android:textSize="30dp"
 47         android:layout_margin="3dp"
 48         android:textColor="@color/colorRed"
 49         android:layout_alignParentRight="true"
 50         android:layout_centerVertical="true"
 51         android:layout_width="wrap_content"
 52         android:layout_height="wrap_content"/>
 53     <TextView
 54         android:id="@+id/tv_north"
 55         android:text="@string/north"
 56         android:textSize="30dp"
 57         android:layout_margin="3dp"
 58         android:textColor="@color/colorRed"
 59         android:layout_alignParentBottom="true"
 60         android:layout_centerHorizontal="true"
 61         android:layout_width="wrap_content"
 62         android:layout_height="wrap_content"/>
 63     <TextView
 64         android:id="@+id/tv_south"
 65         android:text="@string/south"
 66         android:textSize="30dp"
 67         android:layout_margin="3dp"
 68         android:textColor="@color/colorRed"
 69         android:layout_below="@id/tv_title"
 70         android:layout_centerHorizontal="true"
 71         android:layout_width="wrap_content"
 72         android:layout_height="wrap_content"/>
 73     <TextView
 74         android:id="@+id/tv_east_south"
 75         android:text="@string/east_south"
 76         android:textSize="30dp"
 77         android:layout_margin="3dp"
 78         android:textColor="@color/colorRed"
 79         android:layout_below="@id/tv_title"
 80         android:layout_alignParentLeft="true"
 81         android:layout_width="wrap_content"
 82         android:layout_height="wrap_content"/>
 83     <TextView
 84         android:id="@+id/tv_west_south"
 85         android:text="@string/west_south"
 86         android:textSize="30dp"
 87         android:layout_margin="3dp"
 88         android:textColor="@color/colorRed"
 89         android:layout_below="@id/tv_title"
 90         android:layout_alignParentRight="true"
 91         android:layout_width="wrap_content"
 92         android:layout_height="wrap_content"/>
 93     <TextView
 94         android:id="@+id/tv_east_north"
 95         android:text="@string/east_north"
 96         android:textSize="30dp"
 97         android:layout_margin="3dp"
 98         android:textColor="@color/colorRed"
 99         android:layout_alignParentBottom="true"
100         android:layout_width="wrap_content"
101         android:layout_height="wrap_content"/>
102     <TextView
103         android:id="@+id/tv_west_north"
104         android:text="@string/west_north"
105         android:textSize="30dp"
106         android:layout_margin="3dp"
107         android:textColor="@color/colorRed"
108         android:layout_alignParentBottom="true"
109         android:layout_alignParentRight="true"
110         android:layout_width="wrap_content"
111         android:layout_height="wrap_content"/>
112     <TextView
113         android:id="@+id/tv_xun"
114         android:text="@string/xun"
115         android:textSize="30dp"
116         android:layout_margin="3dp"
117         android:textColor="@color/colorGreen"
118         android:layout_below="@id/tv_east_south"
119         android:layout_width="wrap_content"
120         android:layout_height="wrap_content"/>
121     <TextView
122         android:id="@+id/tv_li"
123         android:text="@string/li"
124         android:textSize="30dp"
125         android:layout_margin="3dp"
126         android:textColor="@color/colorGreen"
127         android:layout_below="@id/tv_south"
128         android:layout_centerHorizontal="true"
129         android:layout_width="wrap_content"
130         android:layout_height="wrap_content"/>
131     <TextView
132         android:id="@+id/tv_kun"
133         android:text="@string/kun"
134         android:textSize="30dp"
135         android:layout_margin="3dp"
136         android:textColor="@color/colorGreen"
137         android:layout_below="@id/tv_west_south"
138         android:layout_alignParentRight="true"
139         android:layout_width="wrap_content"
140         android:layout_height="wrap_content"/>
141     <TextView
142         android:id="@+id/tv_zen"
143         android:text="@string/zen"
144         android:textSize="30dp"
145         android:layout_margin="3dp"
146         android:textColor="@color/colorGreen"
147         android:layout_toRightOf="@id/tv_east"
148         android:layout_centerVertical="true"
149         android:layout_width="wrap_content"
150         android:layout_height="wrap_content"/>
151     <TextView
152         android:id="@+id/tv_dui"
153         android:text="@string/dui"
154         android:textSize="30dp"
155         android:layout_margin="3dp"
156         android:textColor="@color/colorGreen"
157         android:layout_toLeftOf="@id/tv_west"
158         android:layout_centerVertical="true"
159         android:layout_width="wrap_content"
160         android:layout_height="wrap_content"/>
161     <TextView
162         android:id="@+id/tv_gen"
163         android:text="@string/gen"
164         android:textSize="30dp"
165         android:layout_margin="3dp"
166         android:textColor="@color/colorGreen"
167         android:layout_above="@id/tv_east_north"
168         android:layout_width="wrap_content"
169         android:layout_height="wrap_content"/>
170     <TextView
171         android:id="@+id/tv_kan"
172         android:text="@string/kan"
173         android:textSize="30dp"
174         android:layout_margin="3dp"
175         android:layout_above="@id/tv_north"
176         android:textColor="@color/colorGreen"
177         android:layout_centerHorizontal="true"
178         android:layout_width="wrap_content"
179         android:layout_height="wrap_content"/>
180     <TextView
181         android:id="@+id/tv_qan"
182         android:text="@string/qan"
183         android:textSize="30dp"
184         android:layout_margin="3dp"
185         android:textColor="@color/colorGreen"
186         android:layout_above="@id/tv_west_north"
187         android:layout_alignRight="@id/tv_west_north"
188         android:layout_width="wrap_content"
189         android:layout_height="wrap_content"/>
190     <TextView
191         android:id="@+id/tv_mu"
192         android:text="@string/mu"
193         android:textSize="30dp"
194         android:layout_margin="3dp"
195         android:textColor="@color/colorBlue"
196         android:layout_below="@id/tv_xun"
197         android:layout_width="wrap_content"
198         android:layout_height="wrap_content"/>
199     <TextView
200         android:id="@+id/tv_huo"
201         android:text="@string/huo"
202         android:textSize="30dp"
203         android:layout_margin="3dp"
204         android:textColor="@color/colorBlue"
205         android:layout_below="@id/tv_li"
206         android:layout_centerHorizontal="true"
207         android:layout_width="wrap_content"
208         android:layout_height="wrap_content"/>
209     <TextView
210         android:id="@+id/tv_tu"
211         android:text="@string/tu"
212         android:textSize="30dp"
213         android:layout_margin="3dp"
214         android:textColor="@color/colorBlue"
215         android:layout_below="@id/tv_kun"
216         android:layout_alignParentRight="true"
217         android:layout_width="wrap_content"
218         android:layout_height="wrap_content"/>
219     <TextView
220         android:id="@+id/tv_mu2"
221         android:text="@string/mu"
222         android:textSize="30dp"
223         android:layout_margin="3dp"
224         android:textColor="@color/colorBlue"
225         android:layout_below="@id/tv_zen"
226         android:layout_alignLeft="@id/tv_zen"
227         android:layout_width="wrap_content"
228         android:layout_height="wrap_content"/>
229     <TextView
230         android:id="@+id/tv_tu2"
231         android:text="@string/tu"
232         android:textSize="30dp"
233         android:layout_margin="3dp"
234         android:textColor="@color/colorBlue"
235         android:layout_below="@id/tv_center"
236         android:layout_alignLeft="@id/tv_center"
237         android:layout_width="wrap_content"
238         android:layout_height="wrap_content"/>
239     <TextView
240         android:id="@+id/tv_jin"
241         android:text="@string/jin"
242         android:textSize="30dp"
243         android:textColor="@color/colorBlue"
244         android:layout_margin="3dp"
245         android:layout_below="@id/tv_dui"
246         android:layout_alignLeft="@id/tv_dui"
247         android:layout_width="wrap_content"
248         android:layout_height="wrap_content"/>
249     <TextView
250         android:id="@+id/tv_tu3"
251         android:text="@string/tu"
252         android:textSize="30dp"
253         android:layout_margin="3dp"
254         android:textColor="@color/colorBlue"
255         android:layout_above="@id/tv_gen"
256         android:layout_width="wrap_content"
257         android:layout_height="wrap_content"/>
258     <TextView
259         android:id="@+id/tv_shui"
260         android:text="@string/shui"
261         android:textSize="30dp"
262         android:layout_margin="3dp"
263         android:layout_above="@id/tv_kan"
264         android:textColor="@color/colorBlue"
265         android:layout_centerHorizontal="true"
266         android:layout_width="wrap_content"
267         android:layout_height="wrap_content"/>
268     <TextView
269         android:id="@+id/tv_jin2"
270         android:text="@string/jin"
271         android:textSize="30dp"
272         android:layout_margin="3dp"
273         android:layout_above="@id/tv_qan"
274         android:textColor="@color/colorBlue"
275         android:layout_alignLeft="@id/tv_qan"
276         android:layout_width="wrap_content"
277         android:layout_height="wrap_content"/>
278 </RelativeLayout>