Android UI控件之CheckBox实现墨迹天气设置布局界面(漂亮)

             Android中的控件的自定义性是很强的，正因为如此我们可以更容易的做出漂亮的UI。下面就

    是通过自定义CheckBox实现墨迹天气，qq等等的设置界面。

             话不多说，直接上效果图吧！



            效果还算可以吧？下面来看看具体的实现吧！
            主xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DFE1E0"
android:orientation="vertical">
<LinearLayout
style="@style/SettingItemTop"
android:background="@drawable/setting_list_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
style="@style/MySettingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开启通知"
/>
<CheckBox
style="@style/MyCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

<LinearLayout
style="@style/SettingItemMiddle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
style="@style/MySettingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开启铃声"
/>
<CheckBox
style="@style/MyCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

<LinearLayout
style="@style/SettingItemBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
style="@style/MySettingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开启震动"
/>
<CheckBox
style="@style/MyCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

</LinearLayout>

           注意到：

style="@style/SettingItemBottom"

               使用了style.xml这个文件来控制样式。在Android开发中会有很多控件的属性是重复出现的，

        可以将重复的代码添加到style.xml的文件中去设置为一种样式，在需要这种样式的时候在使用！
        下面是该小项目的样式文件。

         style文件：

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="AppTheme" parent="android:Theme.Light" />
<style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
<item name="android:button">@drawable/check</item>
<item name="android:layout_margin">10dp</item>
<item name="android:layout_weight">1</item>
</style>
<style name="MySettingText">
<item name="android:layout_margin">10dp</item>
<item name="android:layout_weight">6</item>
</style>
<style name="SettingItemTop">
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:background">@drawable/setting_list_top</item>
</style>
<style name="SettingItemMiddle">

<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:background">@drawable/setting_list_middle</item>
</style>
<style name="SettingItemBottom">
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:background">@drawable/setting_list_bottom</item>
</style>

</resources>

                 上述效果的主要代码也就是这些了，具体是如何实现的呢？

                 首先看复选框的实现：

<CheckBox
style="@style/MyCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

                 抓出他的样式：可以的出的checkBox的样式使用了selector

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

                也就是;

<item name="android:button">@drawable/check</item>

                在资源文件res/drawable建立一个名为check的xml文件,内容为：

<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true" android:drawable="@drawable/on"/>

<item android:state_checked="false" android:drawable="@drawable/off"/>

</selector>

                这样就定义了，checkBox选中和没选中所显示的图片按钮，checkBox部分也就完成了！

                值得注意的是上面中第一项和第三项的边框都是圆形的，而中间是方的，这只是设置的

          背景图片，这里就不深究了，好了Over！

          完整源码：