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！

          完整源码：