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!

          完整源码:

          

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值