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到源代码里面可以找到,具体位置在\base\core\res\res\values\里
- 项目源码下载:http://download.csdn.net/source/347022
Android 风格化的 Toggle Buttons的更多相关文章
- Android解决AVD Hardware Buttons 和DPAD无法使用问题
如图所示按键用鼠标点击时无法响应. 解决方案: 以我创建的AVD名为Tablet为例 1.找到用户目录(我的用户目录yummy),然后进入如下目录 mac: ~/yummy/.android/avd/ ...
- In Depth : Android Shutdown Sequence
What happened when I long press power button ?What is shutdown sequence ?How is it different from de ...
- Android API 指南
原文链接:http://android.eoe.cn/topic/android_sdk Android API 指南 - Android API Guides 应用的组成部分 - Applicati ...
- Android开发之API应用指南
原文:http://android.eoe.cn/topic/android_sdk 编辑流程 这里主要是和Android技术相关的开发指南,很多都是来源于官方的API Guides( http:// ...
- android基础组件---->Checkboxe的使用
由于使用比较简单,这篇博客涵盖Checkboxes和Radio Buttons和Toggle Buttons.好了我们开始今天的学习.我被世俗隐瞒,转身又被自己撞倒.从莫须有的罪名起步,行色简单,心术 ...
- Android Lint Checks
Android Lint Checks Here are the current list of checks that lint performs as of Android Studio 2.3 ...
- Android 自学之基本界面组件(下)
按钮(Button)与图片按钮(ImageButton)组件的功能和用法 Button继承了TextView,ImageButton继承了Button.不管是Button还是ImageButton,他 ...
- android开发之merge结合include优化布局
merge结合include优化android布局,效果不知道,个人感觉使用上也有很大的局限,不过还是了解一下,记录下来. 布局文件都要有根节点,但android中的布局嵌套过多会造成性能问题,于是在 ...
- android开发布局优化之ViewStub
使用ViewStub可以延迟加载一个布局文件,提高显示速率.刚开始接触到,记录下来. 关于viewstub的使用,我们可以在不同的布局中使用,比如可以根据设备的大小动态决定显示哪个界面. viewst ...
随机推荐
- SQL Server高级内容之表表达式和复习
1. 表表达式 (1) 将表作为一个源或将查询的一个结果集作为一个源,对源做处理,然后得到一个新的数据源,对其进行查询. (2)表表达式放在from子句中 (3)派生表,将表的查询得到的结果集作为一 ...
- 帝国CMS附件大小限制
做文件的上传下载,在我们本地测试总是顺利通过,一上传到服务器各种问题都来了. 帝国CMS,我们先看网站配制中附件大小限制. 附件存放目录设置: 单击菜单“系统”>“系统设置”>“系统参数设 ...
- Java线程间通信--生产者消费者
class ProducerConsumerDemo { public static void main(String[] args) { Resource r = new ...
- Java线程练习
/*线程练习创建两个线程,与主线程交替运行 */ class Text extends Thread{ private String name; Text(String name) ...
- HTML5之地理信息应用 获取自己的位置
上代码: window.onload = function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosit ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- jQuery EasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...
- React Native在虚拟运行app时,报错RCTRootView not found,怎么解决?
报错: 解决方案:
- oracle日期格式数据修改
select * from INVOICE_NEW where ref_no='32308' update INVOICE_NEW set check_d=to_date('2015/11/16', ...
- 走进WCF一 (异常如此多娇,引无数码农竞折煞)
对于WCF一直都是只知其然,公司框架的架构者也只是对我们授之以鱼,而不授之以渔. 带着初学者的态度进入了大神Artech的博客,逐步慢慢上手. 我的解决方案(和大神的一模一样,只是过程中一波三折的) ...