AndroidUI之开关效果的设计

最终效果如下:

具体来说就是实现了checkbox自定义选中和为选择样式,菜单项根据不同位置设置不同背景.

先上整体布局文件代码:

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     
2. xmlns:tools="http://schemas.android.com/tools"     
3. android:layout_width="match_parent"     
4. android:layout_height="match_parent"       
5. android:background="#DFE1E0"     
6. android:orientation="vertical">  
7.     <LinearLayout        style="@style/SettingItemTop"  
8.         android:background="@drawable/setting_list_top"  
9.         xmlns:android="http://schemas.android.com/apk/res/android"  
10.         xmlns:tools="http://schemas.android.com/tools"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.          android:orientation="horizontal">  
14.          <TextView  
15.             style="@style/MySettingText"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:text="开启通知"            />  
19.         <CheckBox  
20.              style="@style/MyCheckBox"  
21.             android:layout_width="wrap_content"  
22.             android:layout_height="wrap_content"/>  
23.     </LinearLayout>  
24.         <LinearLayout  
25.         style="@style/SettingItemMiddle"  
26.         android:layout_width="match_parent"  
27.         android:layout_height="wrap_content"  
28.          android:orientation="horizontal">  
29.         <TextView  
30.             style="@style/MySettingText"  
31.             android:layout_width="wrap_content"  
32.             android:layout_height="wrap_content"  
33.             android:text="开启铃声"            />  
34.         <CheckBox  
35.             style="@style/MyCheckBox"  
36.             android:layout_width="wrap_content"  
37.             android:layout_height="wrap_content"/>  
38.     </LinearLayout>  
39.         <LinearLayout  
40.         style="@style/SettingItemBottom"  
41.         android:layout_width="match_parent"  
42.         android:layout_height="wrap_content"  
43.          android:orientation="horizontal">  
44.          <TextView  
45.             style="@style/MySettingText"  
46.             android:layout_width="wrap_content"  
47.             android:layout_height="wrap_content"  
48.             android:text="开启震动"            />  
49.         <CheckBox  
50.              style="@style/MyCheckBox"  
51.             android:layout_width="wrap_content"  
52.             android:layout_height="wrap_content"/>  
53.     </LinearLayout>  
54. </LinearLayout>  

注意到:

style="@style/MySettingText"
这一句,这里用了style.xml这个文件来控制样式.Android实际开发中,会有很多时候一些部件的属性是要重复出现的,如果每个控件都要单独的 把这些属性单独的输入一次,那样会很没有效率.可以将重复的代码添加到style.xml中,设置成一种样式,在用到这些属性是引用这个样式即 可.style="@style/MySettingText"这个是设置文字的属性,代码如下:

[html]  view plain copy

1. <style name="MySettingText">  
2.         <item name="android:layout_margin">10dp</item>  
3.         <item name="android:layout_weight">6</item>  
4. </style>  

这里仅用了两个属性.开发中可以根据实际需要自行修改.以后每个设置项的文字不需要再把这些属性再添加一边,引用一下这个style即可.

CheckBox样式自定义用到了selector.

style="@style/MyCheckBox"
此句对应的代码:

[html]  view plain copy

1. <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">  
2.         <item name="android:button">@drawable/check</item>  
3.         <item name="android:layout_margin">10dp</item>  
4.         <item name="android:layout_weight">1</item>   
5. </style>  

注意到此句:

<item name="android:button">@drawable/check</item>
这里就用了selector自定义样式.
在res/drawable下建立一名为check(自定)的xml文件,代码如下:

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   <item android:state_checked="true" android:drawable="@drawable/on"/>  
4.   <item android:state_checked="false" android:drawable="@drawable/off"/>  
5. </selector>  

 

其中

@drawable/on为选择时checkbox的图像,@drawable/off反之.

还注意到菜单中第一项上方为圆角,中间项为四角都为方,最后一项为下部圆角,这个就是通过设置不同的背景图片实现的了,具体不细表.

  转载请标明出处 http://blog.csdn.net/shimiso 

技术交流群:173711587