码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-04-04 14:46:47      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

  在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的属性挪到前面,那么动画就会被挡住。

 

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

 

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

标签:

原文地址:http://www.cnblogs.com/wytings/p/5351284.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!