AndroidUI布局设计

1.1 线性布局

　　1.1.1 线性布局的使用：

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

　　　　把元件都放在<LinearLayout>标签内，layout_width/height属性来设置控件的作用范围大小

　　1.1.2 线性布局摆放的方向

　　　android:orientation="vertical"

　　　　我们可以通过orientation属性来修改线性布局的元件拜访方向，其值为水平和竖直

　　1.1.3 线性布局的权重

　　　　某些时候，我们需要平均地给元件宽度和高度，抑或宽高成比例，这是就需要权重解决

　　　android:layout_weight="1"

　　　　通过该属性来设置权重，所占大小为所有权重值加起来分之该元件的权重值。即n/总

　　　　权重控制的宽高取决于布局摆放的方向

1.2 相对布局

　　1.2.1 相对于父控件的相对布局

　　　　常用的属性：

1         android:layout_alignParentLeft="true" 
2         android:layout_alignParentRight="true" 
3         android:layout_alignParentTop="true"
4         android:layout_alignParentBottom="true"
5         android:layout_centerInParent="true" //相对于父控件居中

　　　　属性之间有时不能同时出现，否则会导致某个属性失去作用

　　1.2.2 相对于同级控件的相对布局

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6 
 7     <Button
 8         android:id="@+id/center_button"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_centerInParent="true"
12         android:text="Center" />
13 
14     <Button
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:text="Left_Near_Center"
18         android:layout_centerVertical="true"
19         android:layout_toLeftOf="@id/center_button" />
20 
21     
22     <Button
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:text="Top_of_Center"
26         android:layout_centerHorizontal="true"
27         android:layout_above="@id/center_button"
28         />
29 
30     <Button
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:text="Right_Near_Center"
34         android:layout_centerVertical="true"
35         android:layout_toRightOf="@id/center_button" />
36 
37     <Button
38         android:layout_width="wrap_content"
39         android:layout_height="wrap_content"
40         android:text="Bottom_under_Center"
41         android:layout_centerHorizontal="true"
42         android:layout_below="@id/center_button" />
43 </RelativeLayout>

　　　　　　android:layout_above="@id/center_button"

　　　　　　android:layout_below="@id/center_button"

　　　　　　android:layout_toLeftOf="@id/center_button"

　　　　　　android:layout_toRightOf="@id/center_button"

　　　　　　这四个属性来决定相对的位置

　　　　　　android:layout_centerHorizontal="true"

　　　　　　android:layout_centerVertical="true"

　　　　　　设置水平或者竖直居中

1.3 其他布局

　　1.3.1 绝对布局

　　　　以左上角为坐标原点，建立平面直角坐标系来确定控件位置

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <AbsoluteLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6     <Button
 7         android:id="@+id/button"
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:layout_x="0dp"
11         android:layout_y="0dp"
12         android:text="Button" />
13 </AbsoluteLayout>

　　1.3.2 表格布局

　　　　控件包含于<TableRow>标签中

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

　　1.3.3 帧布局

　　　　清爽舒适的布局方式

　　　　<笔记以后待补充>

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5 
 6     <View
 7         android:layout_width="100dp"
 8         android:layout_height="100dp"
 9         android:layout_gravity="center" //居中
10         android:background="#ff00" /> //框中背景颜色为红色
11 
12 </FrameLayout>

1.4 布局中常用的单位

　　像素单位px：

　　　　像素单位不建议使用，除非是手表，或者机顶盒。

　　适配的单位dp：

　　　　这适配屏幕的单位，推荐使用，在实际开发中，UI设计师会给你标好的。

　　字体单位sp：

　　　　sp:全名 scaled pixels-best for text size,放大像素(比例像素)，与刻度无关，可以根据用户的字体大小首选项进行缩放，主要用来处理字体的大小；

1.5 屏幕适配

　　安卓（android）屏幕适配 (sunofbeach.net)

1.6 练习（计算器的模拟UI设计（简））

　　layout中的文件　　caculator_layout.xml

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <LinearLayout
  3     xmlns:android="http://schemas.android.com/apk/res/android"
  4     android:layout_width="match_parent"
  5     android:layout_height="match_parent"
  6     android:orientation="vertical">　　//大的线性布局框架用垂直来规范每行线性布局
  7 
  8     <LinearLayout
  9         android:layout_width="match_parent"
 10         android:layout_height="100dp"
 11         android:orientation="horizontal">　　//每行的线性布局框架用水平来规范控件
 12 
 13         <TextView
 14             android:layout_width="0dp"
 15             android:layout_height="match_parent"
 16             android:layout_weight="1"
 17             android:background="@color/cardview_shadow_start_color">
 18         </TextView>
 19     </LinearLayout>
 20 
 21     <LinearLayout
 22         android:layout_width="match_parent"
 23         android:layout_height="80dp"
 24         android:orientation="horizontal" >
 25 
 26         <TextView
 27             android:layout_width="0dp"
 28             android:layout_height="match_parent"
 29             android:layout_weight="1"
 30             android:background="@drawable/shape_rectangle"　　//引用自定义的边框文件
 31             android:gravity="center"　　//文字居中
 32             android:text="AC"
 33             android:textSize="40sp" />
 34 
 35         <TextView
 36             android:layout_width="0dp"
 37             android:layout_height="match_parent"
 38             android:layout_weight="1"
 39             android:background="@drawable/shape_rectangle"　　
 40             android:text="+/-"
 41             android:textSize="40sp"
 42             android:gravity="center"
 43             />
 44 
 45         <TextView
 46             android:layout_width="0dp"
 47             android:layout_height="match_parent"
 48             android:layout_weight="1"
 49             android:background="@drawable/shape_rectangle"
 50             android:text="%"
 51             android:textSize="40sp"
 52             android:gravity="center"
 53             />
 54 
 55         <TextView
 56             android:layout_width="0dp"
 57             android:layout_height="match_parent"
 58             android:layout_weight="1"
 59             android:text="/"
 60             android:textSize="40sp"
 61             android:gravity="center"
 62             android:background="@drawable/shape_rectangle_orange"　　//引用另外一个
 63             />
 64     </LinearLayout>
 65 
 66     <LinearLayout
 67         android:layout_width="match_parent"
 68         android:layout_height="80dp"
 69         android:orientation="horizontal" >
 70 
 71         <TextView
 72             android:layout_width="0dp"
 73             android:layout_height="match_parent"
 74             android:layout_weight="1"
 75             android:background="@drawable/shape_rectangle"
 76             android:text="1"
 77             android:textSize="40sp"
 78             android:gravity="center"
 79             />
 80 
 81         <TextView
 82             android:layout_width="0dp"
 83             android:layout_height="match_parent"
 84             android:layout_weight="1"
 85             android:background="@drawable/shape_rectangle"
 86             android:text="2"
 87             android:textSize="40sp"
 88             android:gravity="center"
 89             />
 90 
 91         <TextView
 92             android:layout_width="0dp"
 93             android:layout_height="match_parent"
 94             android:layout_weight="1"
 95             android:background="@drawable/shape_rectangle"
 96             android:text="3"
 97             android:textSize="40sp"
 98             android:gravity="center"
 99             />
100 
101         <TextView
102             android:layout_width="0dp"
103             android:layout_height="match_parent"
104             android:layout_weight="1"
105             android:text="*"
106             android:textSize="40sp"
107             android:gravity="center"
108             android:background="@drawable/shape_rectangle_orange"
109             />
110     </LinearLayout>
111 
112     <LinearLayout
113         android:layout_width="match_parent"
114         android:layout_height="80dp"
115         android:orientation="horizontal" >
116 
117         <TextView
118             android:layout_width="0dp"
119             android:layout_height="match_parent"
120             android:layout_weight="1"
121             android:background="@drawable/shape_rectangle"
122             android:text="4"
123             android:textSize="40sp"
124             android:gravity="center"
125             />
126 
127         <TextView
128             android:layout_width="0dp"
129             android:layout_height="match_parent"
130             android:layout_weight="1"
131             android:background="@drawable/shape_rectangle"
132             android:text="5"
133             android:textSize="40sp"
134             android:gravity="center"
135             />
136 
137         <TextView
138             android:layout_width="0dp"
139             android:layout_height="match_parent"
140             android:layout_weight="1"
141             android:background="@drawable/shape_rectangle"
142             android:text="6"
143             android:textSize="40sp"
144             android:gravity="center"
145             />
146 
147         <TextView
148             android:layout_width="0dp"
149             android:layout_height="match_parent"
150             android:layout_weight="1"
151             android:text="-"
152             android:textSize="40sp"
153             android:gravity="center"
154             android:background="@drawable/shape_rectangle_orange"
155             />
156     </LinearLayout>
157 
158     <LinearLayout
159         android:layout_width="match_parent"
160         android:layout_height="80dp"
161         android:orientation="horizontal" >
162 
163         <TextView
164             android:layout_width="0dp"
165             android:layout_height="match_parent"
166             android:layout_weight="1"
167             android:background="@drawable/shape_rectangle"
168             android:text="7"
169             android:textSize="40sp"
170             android:gravity="center"
171             />
172 
173         <TextView
174             android:layout_width="0dp"
175             android:layout_height="match_parent"
176             android:layout_weight="1"
177             android:background="@drawable/shape_rectangle"
178             android:gravity="center"
179             android:text="8"
180             android:textSize="40sp" />
181 
182         <TextView
183             android:layout_width="0dp"
184             android:layout_height="match_parent"
185             android:layout_weight="1"
186             android:background="@drawable/shape_rectangle"
187             android:text="9"
188             android:textSize="40sp"
189             android:gravity="center"
190             />
191 
192         <TextView
193             android:layout_width="0dp"
194             android:layout_height="match_parent"
195             android:layout_weight="1"
196             android:text="+"
197             android:textSize="40sp"
198             android:gravity="center"
199             android:background="@drawable/shape_rectangle_orange"
200             />
201     </LinearLayout>
202 
203     <LinearLayout
204         android:layout_width="match_parent"
205         android:layout_height="80dp"
206         android:orientation="horizontal" >
207 
208         <TextView
209             android:layout_width="0dp"
210             android:layout_height="match_parent"
211             android:layout_weight="2"
212             android:background="@drawable/shape_rectangle"
213             android:text="0"
214             android:textSize="40sp"
215             android:gravity="center_vertical"
216             android:paddingLeft="40dp"
217             />
218 
219 
220         <TextView
221             android:layout_width="0dp"
222             android:layout_height="match_parent"
223             android:layout_weight="1"
224             android:background="@drawable/shape_rectangle"
225             android:text="."
226             android:textSize="40sp"
227             android:gravity="center"
228             />
229 
230         <TextView
231             android:layout_width="0dp"
232             android:layout_height="match_parent"
233             android:layout_weight="1"
234             android:text="="
235             android:textSize="40sp"
236             android:gravity="center"
237             android:background="@drawable/shape_rectangle_orange"
238             />
239     </LinearLayout>
240 
241 </LinearLayout>

　　drawable内文件　　shape_rectangle.xml　　用在背景不是橘色的框

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:shape="rectangle">　　　//定义其背景形状为方形
 4     <solid android:color="#ffffff" />　　//背景颜色为白色
 5     <stroke
 6         android:color="#333333"　　//方框颜色
 7         android:width="1dp"/>　　//1dp宽
 8 
 9 </shape>

　　drawable内文件　　shape_rectangle_orange.xml　　用在背景是橘色的框

1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
3     android:shape="rectangle">
4     <solid android:color="#e47f26" />
5     <stroke
6         android:color="#333333"
7         android:width="1.5dp"/>　　//1.5dp宽，有助于显示
8 
9 </shape>

posted on 2021-07-14 12:09 EndlessShw 阅读(96) 评论(0) 编辑收藏举报