热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析Android选择器与形状绘制技术

本文深入探讨了Android中选择器(Selector)与形状绘制(ShapeDrawing)技术的应用与实现。重点分析了`Selector`的`item`元素,其中包括`android:drawable`属性的使用方法及其在不同状态下的表现。此外,还详细介绍了如何通过XML定义复杂的形状和渐变效果,以提升UI设计的灵活性和美观性。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1:Selector 

drawable的item中可以有以下属性: 
android:drawable="@[package:]drawable/drawable_resource"
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"] 

[html] view plain copy

  1. xml version="1.0" encoding="utf-8"?>  

  2. <selector xmlns:android&#61;"http://schemas.android.com/apk/res/android">  

  3.     <item android:state_enabled&#61;"true" android:state_checked&#61;"true" android:state_pressed&#61;"true"  

  4.           android:drawable&#61;"&#64;drawable/enabled_on_pressed" />  

  5.     <item android:state_enabled&#61;"true" android:state_checked&#61;"false" android:state_pressed&#61;"true"  

  6.           android:drawable&#61;"&#64;drawable/enabled_off_pressed" />  

  7.     <item android:state_enabled&#61;"true" android:state_checked&#61;"true"  

  8.           android:drawable&#61;"&#64;drawable/enabled_on" />  

  9.     <item android:state_enabled&#61;"true" android:state_checked&#61;"false"  

  10.           android:drawable&#61;"&#64;drawable/enabled_off" />  

  11.     <item android:state_enabled&#61;"false" android:state_checked&#61;"true"  

  12.           android:drawable&#61;"&#64;drawable/disabled_on" />  

  13.     <item android:state_enabled&#61;"false" android:state_checked&#61;"false"  

  14.           android:drawable&#61;"&#64;drawable/disabled_off" />                

  15. selector>  

Item顺序是有讲究的&#xff0c;条件限定越细致&#xff0c;则应该放到前面。比如这儿如果把1&#xff0c;2行和3&#xff0c;4行的item交换&#xff0c;那么pressed的就永远无法触发了&#xff0c;因为有item已经满足条件返回了。可以理解为代码中的if语句。 

 

2&#xff1a;Shape

[html] view plain copy

  1. <shape>  

  2.               

  3.             <solid android:color&#61;"#ff9d77"/>  

  4.               

  5.             <gradient  

  6.                 android:startColor&#61;"#ff8c00"  

  7.                 android:endColor&#61;"#FFFFFF"  

  8.                 android:angle&#61;"270" />  

  9.               

  10.             <stroke  

  11.                 android:width&#61;"2dp"  

  12.                 android:color&#61;"#dcdcdc" />  

  13.               

  14.             <corners  

  15.                 android:radius&#61;"2dp" />  

  16.             <padding  

  17.                 android:left&#61;"10dp"  

  18.                 android:top&#61;"10dp"  

  19.                 android:right&#61;"10dp"  

  20.                 android:bottom&#61;"10dp" />  

  21.         shape>  

solid&#xff1a;实心&#xff0c;就是填充的意思
android:color指定填充的颜色
gradient&#xff1a;渐变
android:startColor和android:endColor分别为起始和结束颜色&#xff0c;ndroid:angle是渐变角度&#xff0c;必须为45的整数倍
另外渐变默认的模式为android:type&#61;"linear"&#xff0c;即线性渐变&#xff0c;可以指定渐变为径向渐变&#xff0c;android:type&#61;"radial"&#xff0c;径向渐变需要指定半径android:gradientRadius&#61;"50"。
stroke&#xff1a;描边
android:width&#61;"2dp" 描边的宽度&#xff0c;android:color 描边的颜色。
我们还可以把描边弄成虚线的形式&#xff0c;设置方式为&#xff1a;
android:dashWidth&#61;"5dp" 
android:dashGap&#61;"3dp"
其中android:dashWidth表示&#39;-&#39;这样一个横线的宽度&#xff0c;android:dashGap表示之间隔开的距离。
corners&#xff1a;圆角
android:radius为角的弧度&#xff0c;值越大角越圆。
我们还可以把四个角设定成不同的角度&#xff0c;方法为&#xff1a;
        android:topRightRadius&#61;"20dp"    右上角
        android:bottomLeftRadius&#61;"20dp"    右下角
        android:topLeftRadius&#61;"1dp"    左上角
        android:bottomRightRadius&#61;"0dp"    左下角
 />
这里有个地方需要注意&#xff0c;bottomLeftRadius是右下角&#xff0c;而不是左下角&#xff0c;这个有点郁闷&#xff0c;不过不影响使用&#xff0c;记得别搞错了就行。
还有网上看到有人说设置成0dp无效&#xff0c;不过我在测试中发现是可以的&#xff0c;我用的是2.2&#xff0c;可能修复了这个问题吧&#xff0c;如果无效的话那就只能设成1dp了。
padding&#xff1a;间隔

button_selector.xml:

[html] view plain copy

  1. xml version&#61;"1.0" encoding&#61;"utf-8"?>  

  2. <selector  

  3.     xmlns:android&#61;"http://schemas.android.com/apk/res/android">  

  4.     <item android:state_pressed&#61;"true" >  

  5.         <shape>  

  6.               

  7.             <gradient  

  8.                 android:startColor&#61;"#ff8c00"  

  9.                 android:endColor&#61;"#FFFFFF"  

  10.                 android:type&#61;"radial"  

  11.                 android:gradientRadius&#61;"50" />  

  12.               

  13.             <stroke  

  14.                 android:width&#61;"2dp"  

  15.                 android:color&#61;"#dcdcdc"  

  16.                 android:dashWidth&#61;"5dp"   

  17.                 android:dashGap&#61;"3dp" />  

  18.               

  19.             <corners  

  20.                 android:radius&#61;"2dp" />  

  21.             <padding  

  22.                 android:left&#61;"10dp"  

  23.                 android:top&#61;"10dp"  

  24.                 android:right&#61;"10dp"  

  25.                 android:bottom&#61;"10dp" />  

  26.         shape>  

  27.     item>  

  28.   

  29.     <item android:state_focused&#61;"true" >  

  30.         <shape>  

  31.             <gradient  

  32.                 android:startColor&#61;"#ffc2b7"  

  33.                 android:endColor&#61;"#ffc2b7"  

  34.                 android:angle&#61;"270" />  

  35.             <stroke  

  36.                 android:width&#61;"2dp"  

  37.                 android:color&#61;"#dcdcdc" />  

  38.             <corners  

  39.                 android:radius&#61;"2dp" />  

  40.             <padding  

  41.                 android:left&#61;"10dp"  

  42.                 android:top&#61;"10dp"  

  43.                 android:right&#61;"10dp"  

  44.                 android:bottom&#61;"10dp" />  

  45.         shape>  

  46.     item>  

  47.   

  48.     <item>         

  49.         <shape>  

  50.             <solid android:color&#61;"#ff9d77"/>  

  51.             <stroke  

  52.                 android:width&#61;"2dp"  

  53.                 android:color&#61;"#fad3cf" />  

  54.             <corners   

  55.                 android:topRightRadius&#61;"5dp"  

  56.                 android:bottomLeftRadius&#61;"5dp"  

  57.                 android:topLeftRadius&#61;"0dp"  

  58.                 android:bottomRightRadius&#61;"0dp"  

  59.             />  

  60.             <padding  

  61.                 android:left&#61;"10dp"  

  62.                 android:top&#61;"10dp"  

  63.                 android:right&#61;"10dp"  

  64.                 android:bottom&#61;"10dp" />  

  65.         shape>  

  66.     item>  

  67. selector>  

运行效果如下图&#xff1a;

一般状态&#xff1a;


获得焦点状态&#xff1a;


按下状态&#xff1a;



转:https://my.oschina.net/u/2531348/blog/637740



推荐阅读
author-avatar
saanenkim
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有