一起学Android之Layout

本文简述在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>

view code

 

备注

基础知识学习，从零开始。