如果对系统的ui效果不满意,可以用shape进行自定义
当然除了使用drawable这样的图片外今天谈下自定义图形shape的方法,对于button控件android上支持以下几种属性shape、gradient、stroke、corners等。
我们就以目前系统的button的selector为例说下:
<shape>
<gradient
android:startcolor="#ff8c00"
android:endcolor="#ffffff"
android:angle="270" />
<stroke
android:width="2dp"
android:color="#dcdcdc" />
<corners
android:radius="2dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
对于上面,这条shape的定义,分别为渐变,在gradient中startcolor属性为开始的颜色,endcolor为渐变结束的颜色,下面的angle是角度。接下来是stroke可以理解为边缘,corners为拐角这里radius属性为半径,最后是相对位置属性padding。
对于一个button完整的定义可以为:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://www.norkoo.com">
<item android:state_pressed="true" >
<shape>
<gradient
android:startcolor="#ff8c00"
android:endcolor="#ffffff"
android:angle="270" />
<stroke
android:width="2dp"
android:color="#dcdcdc" />
<corners
android:radius="2dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:startcolor="#ffc2b7"
android:endcolor="#ffc2b7"
android:angle="270" />
<stroke
android:width="2dp"
android:color="#dcdcdc" />
<corners
android:radius="2dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startcolor="#ff9d77"
android:endcolor="#ff9d77"
android:angle="270" />
<stroke
android:width="2dp"
android:color="#fad3cf" />
<corners
android:radius="2dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
注意!提示大家,以上几个item的区别主要是体现在state_pressed按下或state_focused获得焦点时,当当来判断显示什么类型,而没有state_xxx属性的item可以看作是常规状态下。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="hex_color"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_active=["true" | "false"]
android:state_checkable=["true" | "false"]
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_window_focused=["true" | "false"] />
</selector>
elements:
<selector>
必须。必须是根元素。包含一个或多个<item>元素。
attributes:
xmlns:android
string,必须。定义xml的命名空间,必须是
“http://schemas.android.com/apk/res/android”.
<item>
定义特定状态的color,通过它的特性指定。必须是<selector>的子元素。
attributes:
android:color
16进制颜色。必须。这个颜色由rgb值指定,可带alpha。
这个值必须以“#”开头,后面跟随alpha-red-green-blue信息:
l #rgb
l #argb
l #rrggbb
l #aarrggbb
android:state_pressed
boolean。“true”表示按下状态使用(例如按钮按下);“false”表示非按下状态使用。
android:state_focused
boolean。“true”表示聚焦状态使用(例如使用滚动球/d-pad聚焦button);“false”表示非聚焦状态使用。
android:state_selected
boolean。“true”表示选中状态使用(例如tab打开);“false”表示非选中状态使用。
android:state_checkable
boolean。“true”表示可勾选状态时使用;“false”表示非可勾选状态使用。(只对能切换可勾选—非可勾选的构件有用。)
android:state_checked
boolean。“true”表示勾选状态使用;“false”表示非勾选状态使用。
android:state_enabled
boolean。“true”表示可用状态使用(能接收触摸/点击事件);“false”表示不可用状态使用。
android:window_focused
boolean。“true”表示应用程序窗口有焦点时使用(应用程序在前台);“false”表示无焦点时使用(例如notification栏拉下或对话框显示)。
注意:记住一点,statelist中第一个匹配当前状态的item会被使用。因此,如果第一个item没有任何状态特性的话,那么它将每次都被使用,这也是为什么默认的值必须总是在最后(如下面的例子所示)。
examples:
xml文件保存在res/color/button_text.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#ffff0000"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#ff0000ff"/> <!-- focused -->
<item android:color="#ff000000"/> <!-- default -->
</selector>
这个layout xml会应用colorstatelist到一个view上:
<button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/button_text"
android:textcolor="@color/button_text" />
分享到:
相关推荐
Android studio非常实用的插件
Android-Ultra-Photo-Selector是一个多图片选择的开源框架,可以实现多图片的选择
android-selector-intellij-plugin.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
+--- V020606 ;Toolbox fuer 840D sl | | | +--- BSP_PROG | +--- PLC.INF | +--- PLC_BP/ | +--- PLCALARM | | +--- CERTIFICATE ;Abnahmeprotokolle | +--- DSP ;DSP-Starter f黵 S7HW-Addon |...
简单集成了Android-Ultra-Photo-Selector这个框架的使用,非常感谢作者,框架地址:https://github.com/AizazAZ/Android-Ultra-Photo-Selector
Android Multiple Images Selector Easy-to-use library to select images in Android application Features: select images by folders support to set max number of images to be selected allow filter images ...
Time-Selector日期选择控件,本项目基于TimePicker 实现一个优美的自定义控件。很不错噢! 下面是程序的效果图和源代码,喜欢的可以下载下来看看哦!
导入到Android Studio,使用gradle构建皮肤包(见7. 皮肤包是什么?如何生成?)(2015-12-02) 解决Fragment换肤在某些版本的support-v4包下失效的问题(感谢@javake同学)(2015-12-02) 对textColor加入selector类型...
Android-Ultra-Photo-Selector.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
robot-cases-selector-plugin插件,使用指南请查看另一篇博客
Android Ultra Photo Selector Select images from Android devices made easy :-) In preview you can also Zoom images. You can select images from different albums. I am using UIL, so you can configure ...
探索Android中selector和shape的结合使用
前端开源库-stylelint-selector-bem-patternStylelint选择器BEM Pattern,一个利用PostSS BEM Linter功能的Stylelint插件
$ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) . use ( selectorNamespace ...
css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块:CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act
android-selector-intellij-plugin - 可以根据指定颜色生成Selector Drawable的插件。
使用可以: npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const transform = selectors => { selectors . walk ( selector => { // do something with...
Android自定义矩形及selector、shape的使用Android自定义矩形及selector、shape的使用
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
仿微信的上传多张图片,上手可用。用java语言写的。 类似微信发朋友圈时的添加图片,,可以多选,方式包括从相册选择多张图片,拍照;添加后可删除