zoukankan      html  css  js  c++  java
  • Android 风格化的 Toggle Buttons

     Android到默认UI比iOS到默认UI在美观程度上还是有一定到差距的,我们希望能够美化UI,并且替换掉系统默认的UI风格,使得程序在使用这些UI的时候都默认使用我们自定义到UI。本文以ToggleButton为例,介绍如何使用,下图是效果图。


    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@+android:id/background" android:drawable="@android:color/transparent" />
        <item android:id="@+android:id/toggle" android:drawable="@drawable/btn_toggle" />
    </layer-list>

    在这里,我们使用layer-list把ToggleButton分成2个图层,底层是背景(设置成透明),顶层是selector效果图

    接下来,设置ToggleButton的on和off的selector效果图:

    建立/res/drawable/btn_toggle.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="false" android:drawable="@drawable/btn_toggle_no" />
        <item android:state_checked="true" android:drawable="@drawable/btn_toggle_yes" />
    </selector>

    使用到以下两张图,也可通过以下链接查找http://bit.ly/pn5dmA

        
    到此,我们已经把ToggleButton的效果已经制作完毕.

    2、设置Style & Theme

    ToggleButton到效果图已经制作完毕,接下来,我们就要把这种效果设置成一种统一的风格,否则我们在使用的时候必须每次都得显示指定这种 风格,在这里,即:在声明ToggleButton的时候,每次都得指定 android:background="@drawable/btn_toggle_bg"。

    我们希望达到到效果是,当我们每次使用ToogleButton的时候,默认就是使用我们所设置的风格。在此之前,最好先阅读下android自带到文档:basics of creating Android themes,对style和theme有一定的了解。

    接下来,建立/res/drawable/themes.xml文件

    <style name="Widget.Button.Toggle" parent="android:Widget">
        <item name="android:background">@drawable/btn_toggle_bg</item>
        <item name="android:textOn">@null</item>
        <item name="android:textOff">@null</item>
        <item name="android:clickable">true</item>
        <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
    </style>

    在这里,要把textOn和textOff的属性设置为null,否则,系统会在按钮上显示文字,这个可根据使用情况而定。

    然后,把该风格设置成主题

    <style name="YourThemeName" parent="@android:Theme.Black">
        <!-- 告诉Android当创建ToggleButton的时候使用自定义风格 -->
        <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
        <!-- 在这里可以添加更多的选项... -->
    </style>

    之后,只需要在AndroidManifest.xml的<application>标签里设置主题即可(android:theme="@style/YourThemeName")

    3、注意事项

    • <重要>为了提供更通用到效果,应该把图片设置成.9.png格式,使图片可扩展
    • 很多人都以疑问,到底如何知道这些控件或者主题到属性? 这些都在Android到源代码里面可以找到,具体位置在asecore es esvalues里
    • 项目源码下载:http://download.csdn.net/source/347022
  • 相关阅读:
    .net注册iis
    hdu 1081To The Max
    hdu 1312Red and Black
    hdu 1016Prime Ring Problem
    hdu 1159Common Subsequence
    hdu 1372Knight Moves
    hdu 1686Oulipo
    hdu 1241Oil Deposits
    hdu 1171Big Event in HDU
    hdu 4006The kth great number
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4282554.html
Copyright © 2011-2022 走看看