关于shape和selector和layer-list的drawable详细说明

  在Android开发中,但凡涉及控件的的特效问题,<shape>,<selector>以及<layer-list>都是不可或缺的drawable。但是发现有同事并不了解或系统的记得一些常用的特性,经常是不知道就搜,用完又忘了……今天特意总结一下这几个。

  <shape> —— 用于设置控件的自身属性的效果形状,这些效果不会因为状态的改变而改变,比如圆形,圆角,边框效果等等。

  <selector> —— 顾名思义就是选择器,所以使用Selector设置的是跟状态有关的效果,比如点击时,获取焦点时,选中时等所展现的控件效果。

  <layer-list> —— 用于控件效果的层叠。每一个item都可以实现独立的效果,比如shape或者selector,甚至item中也可以再包含一个layer-list。

  有了总体概念,我们一一来分析各个drawable的使用格式:

  一,<shape>属性

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/holo_purple" />
    <corners android:radius="20dp" />
    <gradient
        android:centerColor="@android:color/holo_purple"
        android:endColor="@android:color/holo_blue_dark"
        android:startColor="@android:color/holo_blue_light" />
</shape>

<shape>属性的设置比较中规中矩,没有什么特别好说的,只要你跟着属性设置规则走就行了。

<shape>常用属性如下:

<shape> android:shape=["rectangle" | "oval" | "line" | "ring"] 其中rectagle矩形,oval椭圆,line水平直线,ring环形
<shape>中子节点的常用属性:
  <gradient> 设置渐变
      android:startColor  起始颜色
      android:endColor  结束颜色
      android:angle  渐变角度,0从左到右,90表示从下到上,数值为45的整数倍,默认为0;
      android:type 渐变的样式 liner线性渐变 radial环形渐变 sweep
  <solid > 设置填充
      android:color  填充的颜色
  <stroke >描边
      android:width 描边的宽度
      android:color 描边的颜色
      android:dashWidth 表示‘-‘横线的宽度
      android:dashGap 表示‘-‘横线之间的距离
  <corners >圆角
      android:radius  圆角的半径 值越大角越圆
      android:topRightRadius 右上圆角半径
      android:bottomLeftRadius 右下圆角角半径
      android:topLeftRadius 左上圆角半径
      android:bottomRightRadius 左下圆角半径

  <padding >填充
      android:bottom="1.0dip"  底部填充
      android:left="1.0dip"  左边填充
      android:right="1.0dip" 右边填充
      android:top="0.0dip"  上面填充

二,<selector>属性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <transition android:opacity="transparent" android:paddingBottom="30dp" android:paddingLeft="10dp">
            <item android:drawable="@android:drawable/ic_delete" />
        </transition>
    </item>
    <item android:state_selected="false">
        <animated-rotate android:drawable="@android:drawable/dark_header" android:pivotX="30%" android:pivotY="70%" android:visible="true" />
    </item>
</selector>

如上所示,selector每一个item都会有状态的设置,如果没有设置就是默认状态。而每一个item里面包含的则是对应该item状态的效果。比如上面的transition就是在点击的时候背景显示ic_delete的图片,而不点击的时候,则是一个翻转的动画,很有意思。

由于item设置比较灵活,大家直接在编辑器的xml里面边设置边学习就可以了。主要就是关注一下shape标签的各种state属性设置,那些都是设置效果生效的状态的值。

三,<layer-list>属性

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@android:color/holo_red_light" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/background_light" />
        </shape>
    </item>

    <item>
        <selector>
            <item android:state_pressed="true">
                <transition
                    android:opacity="transparent"
                    android:paddingBottom="30dp"
                    android:paddingLeft="10dp">
                    <item android:drawable="@android:drawable/ic_delete" />
                </transition>
            </item>

            <item android:state_selected="false">
                <animated-rotate
                    android:drawable="@android:drawable/dark_header"
                    android:pivotX="30%"
                    android:pivotY="70%"
                    android:visible="true" />
            </item>
        </selector>
    </item>

</layer-list>

layer-list就更加灵活了,每一个item都是独立存在的,都可以独当一面,然后item可以包含任何的上面所说的效果设置!当然也包括layer-list自己本身。而item自身的属性中有各种left,gravity,width等属性跟我们平时在布局文件中使用的是一个意思,只是这次的对象是那些drawable图层罢了。最后要注意的是由于是层叠效果,所以后面的总是覆盖前面的。就比如上面的例子,如果把selector的属性挪到前面,那么动画就会被挡住。

结束语:纸上得来终觉浅,绝知此事要躬行~

时间: 2024-11-01 12:09:07

关于shape和selector和layer-list的drawable详细说明的相关文章

Android shape和selector完全总结

shape和selector嵌套版 <?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"> <!-- 非触摸模式下获得焦点并单击时的背景图片 --><item android:state_focused="true" androi

Android开发:shape和selector和layer-list的(详细说明)

shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 XML中:Android:background="@drawable/文件的名称&

代码设置Shape和Selector

开发中经常需要使用Shape和Selector,如果每个都用xml设置的话,会占用apk大小,同时命名多了也会混乱,使用代码来设置会方便很多. 需要用到2个类:GradientDrawable和StateListDrawable 相关API: setColor(rgb); //填充颜色setGradientType(GradientDrawable.RECTANGLE); //shape矩形setCornerRadius(radius); //四周圆角半径setStroke(1,strokenC

shape和selector和layer-list的详细说明

<shape>和<selector>在Android UI设计中经常用到,例如:通过xml文件实现自定义的圆角镂空按钮,以及点击效果中就要用到<shape>和<selector>去美化控件. 1.Shape:xml中定义的几何形状,文件中的位置为:res/drawable/文件名称.xml 使用方法: Java代码中:R.drawable.文件名称 XML中:Android:background="@drawable/文件名称" 属性:

【Android进阶学习】shape和selector的结合使用(转)

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/732310 shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形

android使用shape做selector按钮按下和弹起的动画

平时效果: 按下效果: selector代码: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"><shape> <solid andro

Android开发教程:shape和selector的结合使用

shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 XML中:Android:background="@drawable/文件的名称&

图形—9patch,shape ,selector

9patch shape 创建 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!--尺寸--> <size android:height="50dp" android:width="100dp"/&g

【转】Android开发:shape和selector和layer-list的(详细说明)

<shape>和<selector>在Android UI设计中经常用到.比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape>和<selector>.可以这样说,<shape>和<selector>在美化控件中的作用是至关重要. 在看这篇文章之前,可以看下这个小例子:镂空按钮的实现 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法