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
  • 相关阅读:
    墨卡托投影坐标系(Mercator Projection)原理及实现C代码
    腾讯2018暑期实习生招聘在线笔试之字符串操作
    基于Python实现matplotlib中动态更新图片(交互式绘图)
    基于8211lib库对s57电子海图的解析和存储
    ArcGIS二次开发AO软件安装破解教程
    【持续更新】.Net 开发中给自己埋下的坑!
    Linux下测试PHP和MySQL是否正确安装
    Linux命令行抓包及包解析工具tshark(wireshark)使用实例解析
    测试Apache服务器及httpd: Could not reliably determine the server's fully qualified domain name解决办法
    CHM Navigation to the webpage was canceled 解决办法
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4282554.html
Copyright © 2011-2022 走看看