Android 设置页面的设计

在Android 的程序中设置项可以说是一个必须要有的页面。下面说一下如何写一个基本的设置页面。我们先来看一下常用安卓程序的设置页面：

  

  都是大同小异，下面说一下如何实现。其实就是layout的组合，关键是如何去设置图中的圆角。因为大家都知道Android默认的方形的，要想实现圆角就需要我们自己来实现了。方法有很多种，一种实现方法就是做一个背景图片，把图片边角改成圆角的.9.png格式的。如下：

                                                                                                        

  这样的话就比较容易实现了，再看一下整体的Layout布局情况：

                        

                                                 

 xml布局文件如下：注意层次的嵌套。先是一个RelativeLayout，它有两个子布局，RelativeLayout和LinearLayout。

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/empty_cart_view"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:background="#ffefebe7" >  
7.   
8.     <RelativeLayout  
9.         android:id="@+id/top_relative"  
10.         android:layout_width="fill_parent"  
11.         android:background="#106184"  
12.         android:layout_height="50.0dip" >  
13.      
14.         <TextView  
15.             android:id="@+id/titleText"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_centerInParent="true"  
19.             android:padding="10.0dip"  
20.             android:singleLine="true"  
21.             android:text="设置"  
22.             android:textColor="@color/white"  
23.             android:textSize="15dp" />  
24.     </RelativeLayout>  
25.   
26.     <ScrollView  //用来垂直滚动视图，用于设置项较多的情形。如果设置项不多，例如上面的qq，那么就不需要了。  
27.         android:layout_width="fill_parent"  
28.         android:layout_height="wrap_content"  
29.         android:layout_below="@+id/top_relative"  
30.         android:fadingEdge="none" >  
31.   
32.         <LinearLayout  
33.             android:layout_width="fill_parent"  
34.             android:layout_height="wrap_content"  
35.             android:gravity="center_vertical"  
36.             android:orientation="vertical"  
37.             android:paddingBottom="60.0dip"  
38.             android:paddingLeft="10.0dip"  
39.             android:paddingRight="10.0dip"  
40.             android:paddingTop="10.0dip" >  
41.   
42.             <LinearLayout  
43.                 android:layout_width="fill_parent"  
44.                 android:layout_height="wrap_content" >  
45.   
46.                 <TableLayout  
47.                     android:id="@+id/MorePageTableLayout_Favorite"  
48.                     android:layout_width="fill_parent"  
49.                     android:layout_height="wrap_content"  
50.                     android:shrinkColumns="0"  
51.                     android:stretchColumns="0" >  
52.   
53.                     <TableRow  
54.                         android:id="@+id/more_page_row0"  
55.                         android:layout_width="fill_parent"  
56.                         android:layout_marginLeft="2.0dip"  
57.                         android:layout_marginRight="2.0dip"  
58.                         android:background="@drawable/more_item_press"//.9.png图片圆角的实现。  
59.                         android:paddingBottom="16.0dip"  
60.                         android:paddingTop="8.0dip" >  
61.   
62.                         <TextView  
63.                             android:layout_width="wrap_content"  
64.                             android:layout_height="fill_parent"  
65.                             android:drawableLeft="@drawable/mylike"  
66.                             android:drawablePadding="10.0dip"  
67.                             android:gravity="center_vertical"  
68.                             android:includeFontPadding="false"  
69.                             android:paddingLeft="17.0dip"  
70.                             android:text="我的设置"  
71.                             android:textColor="#ff333333"  
72.                             android:textSize="16.0sp" />  
73.   
74.                         <ImageView  
75.                             android:layout_width="wrap_content"  
76.                             android:layout_height="fill_parent"  
77.                             android:layout_gravity="right"  
78.                             android:gravity="center_vertical"  
79.                             android:paddingRight="20.0dip"  
80.                             android:src="@drawable/ic_arrow" />  
81.                     </TableRow>  
82.                 </TableLayout>  
83.             </LinearLayout>  
84.   
85.             <TextView  
86.                 android:layout_width="fill_parent"  
87.                 android:layout_height="wrap_content"  
88.                 android:layout_marginBottom="10.0dip"  
89.                 android:layout_marginTop="10.0dip"  
90.                 android:gravity="center_vertical"  
91.                 android:paddingLeft="4.0dip"  
92.                 android:text="我的设置"  
93.                 android:textColor="#ff888888"  
94.                 android:textSize="16.0sp" />  
95.   
96.             <LinearLayout  
97.                 android:layout_width="fill_parent"  
98.                 android:layout_height="wrap_content" >  
99.   
100.                 <TableLayout  
101.                     android:id="@+id/MorePageTableLayout_Follow"  
102.                     android:layout_width="fill_parent"  
103.                     android:layout_height="wrap_content"  
104.                     android:paddingLeft="1.0dip"  
105.                     android:shrinkColumns="0"  
106.                     android:stretchColumns="0" >  
107.   
108.                     <TableRow  
109.                         android:id="@+id/more_page_row1"  
110.                         android:layout_width="fill_parent"  
111.                         android:layout_marginLeft="2.0dip"  
112.                         android:layout_marginRight="2.0dip"  
113.                         android:background="@drawable/more_itemtop_press"  
114.                         android:paddingBottom="16.0dip"  
115.                         android:paddingTop="16.0dip" >  
116.   
117.                         <TextView  
118.                             android:layout_width="wrap_content"  
119.                             android:layout_height="fill_parent"  
120.                             android:drawableLeft="@drawable/myfollow"  
121.                             android:drawablePadding="10.0dip"  
122.                             android:gravity="center_vertical"  
123.                             android:includeFontPadding="false"  
124.                             android:paddingLeft="17.0dip"  
125.                             android:text="账号管理"  
126.                             android:textColor="#ff333333"  
127.                             android:textSize="16.0sp" />  
128.   
129.                         <ImageView  
130.                             android:layout_width="wrap_content"  
131.                             android:layout_height="fill_parent"  
132.                             android:layout_gravity="right"  
133.                             android:gravity="center_vertical"  
134.                             android:paddingRight="20.0dip"  
135.                             android:src="@drawable/ic_arrow" />  
136.                     </TableRow>  
137.   
138.                     <TableRow  
139.                         android:id="@+id/more_page_row2"  
140.                         android:layout_width="fill_parent"  
141.                         android:layout_marginLeft="2.0dip"  
142.                         android:layout_marginRight="2.0dip"  
143.                         android:background="@drawable/more_itemmiddle_press"  
144.                         android:paddingBottom="16.0dip"  
145.                         android:paddingTop="16.0dip" >  
146.   
147.                         <TextView  
148.                             android:layout_width="wrap_content"  
149.                             android:layout_height="fill_parent"  
150.                             android:drawableLeft="@drawable/search_friends"  
151.                             android:drawablePadding="10.0dip"  
152.                             android:gravity="center_vertical"  
153.                             android:includeFontPadding="false"  
154.                             android:paddingLeft="17.0dip"  
155.                             android:text="个人爱好"  
156.                             android:textColor="#ff333333"  
157.                             android:textSize="16.0sp" />  
158.   
159.                         <ImageView  
160.                             android:layout_width="wrap_content"  
161.                             android:layout_height="fill_parent"  
162.                             android:layout_gravity="right"  
163.                             android:gravity="center_vertical"  
164.                             android:paddingRight="20.0dip"  
165.                             android:src="@drawable/ic_arrow" />  
166.                     </TableRow>  
167.   
168.                     <TableRow  
169.                         android:id="@+id/more_page_row3"  
170.                         android:layout_width="fill_parent"  
171.                         android:layout_marginLeft="2.0dip"  
172.                         android:layout_marginRight="2.0dip"  
173.                         android:background="@drawable/more_itembottom_press"  
174.                         android:paddingBottom="16.0dip"  
175.                         android:paddingTop="16.0dip" >  
176.   
177.                         <TextView  
178.                             android:layout_width="wrap_content"  
179.                             android:layout_height="fill_parent"  
180.                             android:drawableLeft="@drawable/invite_friends"  
181.                             android:drawablePadding="10.0dip"  
182.                             android:gravity="center_vertical"  
183.                             android:includeFontPadding="false"  
184.                             android:paddingLeft="17.0dip"  
185.                             android:text="浏览记录"  
186.                             android:textColor="#ff333333"  
187.                             android:textSize="16.0sp" />  
188.   
189.                         <ImageView  
190.                             android:layout_width="wrap_content"  
191.                             android:layout_height="fill_parent"  
192.                             android:layout_gravity="right"  
193.                             android:gravity="center_vertical"  
194.                             android:paddingRight="20.0dip"  
195.                             android:src="@drawable/ic_arrow" />  
196.                     </TableRow>  
197.                 </TableLayout>  
198.             </LinearLayout>  
199.   
200.             <TextView  
201.                 android:layout_width="fill_parent"  
202.                 android:layout_height="wrap_content"  
203.                 android:layout_marginBottom="10.0dip"  
204.                 android:layout_marginTop="10.0dip"  
205.                 android:gravity="center_vertical"  
206.                 android:paddingLeft="4.0dip"  
207.                 android:text="客户端"  
208.                 android:textColor="#ff888888"  
209.                 android:textSize="16.0sp" />  
210.   
211.             <LinearLayout  
212.                 android:layout_width="fill_parent"  
213.                 android:layout_height="wrap_content" >  
214.   
215.                 <TableLayout  
216.                     android:id="@+id/MorePageTableLayout_Client"  
217.                     android:layout_width="fill_parent"  
218.                     android:layout_height="wrap_content"  
219.                     android:paddingLeft="1.0dip"  
220.                     android:shrinkColumns="0"  
221.                     android:stretchColumns="0" >  
222.   
223.                     <TableRow  
224.                         android:id="@+id/more_page_row4"  
225.                         android:layout_width="fill_parent"  
226.                         android:layout_marginLeft="2.0dip"  
227.                         android:layout_marginRight="2.0dip"  
228.                         android:background="@drawable/more_itemtop_press"  
229.                         android:paddingBottom="16.0dip"  
230.                         android:paddingTop="16.0dip" >  
231.   
232.                         <TextView  
233.                             android:layout_width="wrap_content"  
234.                             android:layout_height="fill_parent"  
235.                             android:drawableLeft="@drawable/setting_mor"  
236.                             android:drawablePadding="10.0dip"  
237.                             android:gravity="center_vertical"  
238.                             android:includeFontPadding="false"  
239.                             android:paddingLeft="17.0dip"  
240.                             android:text="设置"  
241.                             android:textColor="#ff333333"  
242.                             android:textSize="16.0sp" />  
243.   
244.                         <ImageView  
245.                             android:layout_width="wrap_content"  
246.                             android:layout_height="fill_parent"  
247.                             android:layout_gravity="right"  
248.                             android:gravity="center_vertical"  
249.                             android:paddingRight="20.0dip"  
250.                             android:src="@drawable/ic_arrow" />  
251.                     </TableRow>  
252.   
253.                     <TableRow  
254.                         android:id="@+id/more_page_row5"  
255.                         android:layout_width="fill_parent"  
256.                         android:layout_marginLeft="2.0dip"  
257.                         android:layout_marginRight="2.0dip"  
258.                         android:background="@drawable/more_itemmiddle_press"  
259.                         android:paddingBottom="16.0dip"  
260.                         android:paddingTop="16.0dip" >  
261.   
262.                         <TextView  
263.                             android:layout_width="wrap_content"  
264.                             android:layout_height="fill_parent"  
265.                             android:drawableLeft="@drawable/feed_back"  
266.                             android:drawablePadding="10.0dip"  
267.                             android:gravity="center_vertical"  
268.                             android:includeFontPadding="false"  
269.                             android:paddingLeft="17.0dip"  
270.                             android:text="意见反馈"  
271.                             android:textColor="#ff333333"  
272.                             android:textSize="16.0sp" />  
273.   
274.                         <ImageView  
275.                             android:layout_width="wrap_content"  
276.                             android:layout_height="fill_parent"  
277.                             android:layout_gravity="right"  
278.                             android:gravity="center_vertical"  
279.                             android:paddingRight="20.0dip"  
280.                             android:src="@drawable/ic_arrow" />  
281.                     </TableRow>  
282.   
283.                     <TableRow  
284.                         android:id="@+id/more_page_row6"  
285.                         android:layout_width="fill_parent"  
286.                         android:layout_marginLeft="2.0dip"  
287.                         android:layout_marginRight="2.0dip"  
288.                         android:background="@drawable/more_itemmiddle_press"  
289.                         android:paddingBottom="16.0dip"  
290.                         android:paddingTop="16.0dip" >  
291.   
292.                         <TextView  
293.                             android:layout_width="wrap_content"  
294.                             android:layout_height="fill_parent"  
295.                             android:drawableLeft="@drawable/moreitems_version"  
296.                             android:drawablePadding="10.0dip"  
297.                             android:gravity="center_vertical"  
298.                             android:includeFontPadding="false"  
299.                             android:paddingLeft="17.0dip"  
300.                             android:text="检测更新"  
301.                             android:textColor="#ff333333"  
302.                             android:textSize="16.0sp" />  
303.   
304.                         <ImageView  
305.                             android:layout_width="wrap_content"  
306.                             android:layout_height="fill_parent"  
307.                             android:layout_gravity="right"  
308.                             android:gravity="center_vertical"  
309.                             android:paddingRight="20.0dip"  
310.                             android:src="@drawable/ic_arrow" />  
311.                     </TableRow>  
312.   
313.                     <TableRow  
314.                         android:id="@+id/more_page_row7"  
315.                         android:layout_width="fill_parent"  
316.                         android:layout_marginLeft="2.0dip"  
317.                         android:layout_marginRight="2.0dip"  
318.                         android:background="@drawable/more_itembottom_press"  
319.                         android:paddingBottom="16.0dip"  
320.                         android:paddingTop="16.0dip" >  
321.   
322.                         <TextView  
323.                             android:layout_width="wrap_content"  
324.                             android:layout_height="fill_parent"  
325.                             android:drawableLeft="@drawable/about_page_mor"  
326.                             android:drawablePadding="10.0dip"  
327.                             android:gravity="center_vertical"  
328.                             android:includeFontPadding="false"  
329.                             android:paddingLeft="17.0dip"  
330.                             android:text="关于"  
331.                             android:textColor="#ff333333"  
332.                             android:textSize="16.0sp" />  
333.   
334.                         <ImageView  
335.                             android:layout_width="wrap_content"  
336.                             android:layout_height="fill_parent"  
337.                             android:layout_gravity="right"  
338.                             android:gravity="center_vertical"  
339.                             android:paddingRight="20.0dip"  
340.                             android:src="@drawable/ic_arrow" />  
341.                     </TableRow>  
342.                 </TableLayout>  
343.             </LinearLayout>  
344.         </LinearLayout>  
345.     </ScrollView>  
346.   
347. </RelativeLayout>  

   看一下效果图：

                                                                     

转自：http://blog.youkuaiyun.com/wangjinyu501/article/details/8200779