Android Drawable 详解(教你画画!)

时间:2019-06-18
本文章向大家介绍Android Drawable 详解(教你画画!),主要包括Android Drawable 详解(教你画画!)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

参考

1、Android中的Drawable基础与自定义Drawable
2、android中的drawable资源
3、Android开发之Shape详细解读

Drawable分类

Noxml标签Class类含义
1 shape ShapeDrawable 特定形状,模型的图样
2 selector StateListDrawable 不同状态选择不同的图样
3 layer-list LayerDrawable 层叠图样
4 level-list LevelListDrawable 不同程度图样
5 transition TransitionDrawable 渐变图样
6 ripple RippleDrawable 波纹图样
7 inset InsetDrawable 内嵌图样
8 scale ScaleDrawable 缩放图样
9 clip ClipDrawable 剪切图样
10 rotate RotateDrawable 旋转图样
11 animation-list AnimationDrawable 动画效果
12 bitmap BitmapDrawable 图片图样
13 nine-patch NinePatchDrawable .9图

一、shape - ShapeDrawable : 特定形状,模型的图样

>>标签含义

1、shape标签
属性含义值等解释
shape 形状,样式 rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
oval: 椭圆形,用得比较多的是画正圆
line: 线形,可以画实线和虚线
ring: 环形,可以画环形进度条
tint 着色 给shape着色
tintMode 着色模式 着色模式(有关tint和tintMode请参看文章:http://blog.csdn.net/u010687392/article/details/47399719
dither 抖动平滑:建议true 将在位图的像素配置与屏幕不同时(例如:ARGB 8888 位图和 RGB 565 屏幕)启用位图的抖动;值为“false”时则停用抖动。默认值为 true。
visible - -
useLevel 使用等级,建议为false 如果为true,则可在LevelListDrawable中使用。这通常应为“false”,否则形状不会显示。
thickness 外环厚度 环的厚度,指内环与外环的环间距。(只适用于shape为ring)
thicknessRatio 同上,浮点型 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖(只适用于shape为ring)
innerRatio 内环半径 内环半径(只适用于shape为ring)
innerRadiusRatio 同上,浮点型 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖(只适用于shape为ring)
2、shape下size标签:设置shape宽高值

注意事项:只有控件宽高设置成wrap_content时,此处宽高才起作用,但是起到的却是最小宽高值。也就是说,当控件宽高超过你此处指定的值时,它会变化(wrap_content!!!)

属性含义
width 宽度
height 高度
3、shape下solid标签:设置形状填充颜色
属性含义
color 指定颜色
4、shape下padding标签:设置内容与边界的距离
属性含义
left 左内边距
top 上内边距
right 右内边距
bottom 左内边距
5、shape下corners标签:设置四个角的圆角
属性含义
radius 四个角圆角
topLeftRadius 左上角的圆角
topRightRadius 右上角的圆角
bottomLeftRadius 左下角的圆角
bottomRightRadius 右下角的圆角
6、shape下stroke标签:设置shape的外边界线
属性含义
color 描边的颜色
width 边界线的宽度
dashWidth 段虚线的宽度
dashGap 段虚线的间隔
7、shape下的gradient标签:设置形状渐变
属性含义值等解释
type 渐变的类型 1.linear:线性渐变,默认的渐变类型
2.radial:放射渐变,设置该项时,必须设置android:gradientRadius渐变半径属
3.sweep:扫描性渐变
angle 渐变角度 渐变的角度,线性渐变时(linear也是默认的渐变类型)才有效,必须是45的倍数,0表示从左到右,90表示从下到上
centerX 渐变中心的相对X坐标 放射渐变时(radial)才有效,在0.0到1.0之间,默认为0.5,表示在正中间
centerY 渐变中心的相对Y坐标 放射渐变时(radial才有效,在0.0到1.0之间,默认为0.5,表示在正中间
useLevel 使用等级 如果为true,则可在LevelListDrawable中使用。这通常应为“false”,否则形状不会显示
startColor 渐变开始的颜色 -
centerColor 渐变中间的颜色 -
endColor 渐变结束的颜色 -
gradientRadius 渐变半径 渐变的半径,只有渐变类型为radial时才使用

>>案例

1、Rectangle-矩形样式
 
shape-rectangle.png

矩形:填充+描边+弧边

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <!-- 填充颜色 -->
    <solid android:color="@color/wx_green" />
    <!-- 线的宽度 -->
    <stroke
        android:width="5dp"
        android:color="@color/orchid"/>
    <!-- 矩形的圆角半径 -->
    <corners android:radius="12dp" />

</shape>

矩形:填充+描边+上部弧边

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="@color/wx_green" />
    <!-- 线的宽度 -->
    <stroke
        android:width="5dp"
        android:color="@color/orchid"/>
    <!-- 矩形的圆角半径,设置四个角 -->
    <corners
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"/>

</shape>

矩形:填充+描边虚线+弧边半圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="@color/wx_green" />
    <!-- 线的宽度,虚线宽度,虚线间隔 -->
    <stroke
        android:width="5dp"
        android:color="@color/orchid"
        android:dashWidth="5dp"
        android:dashGap="3dp"/>
    <!-- 矩形的圆角半径,半圆形,设置大一点就好了 -->
    <corners android:radius="100dp" />

</shape>
2、Oval-图圆形样式
 
shape-oval.png

椭圆形+横向渐变色,没有调整角度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <!--渐变色:线性-->
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="@color/wx_red"
        android:centerColor="@color/wx_green"
        android:endColor="@color/yellow"/>

</shape>

椭圆形:圆形+发射形渐变色,如果设置的高宽大于gradientRadius*2的话,那么外围颜色是endColor

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--渐变色:放射,必须设置android:gradientRadius
    如果设置的高宽大于gradientRadius*2的话,那么外围颜色是endColor-->
    <gradient
        android:type="radial"
        android:startColor="@color/white"
        android:endColor="@color/wx_green"
        android:gradientRadius="60dp"/>

</shape>

椭圆形:圆形+扫描渐变色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--渐变色:放射,必须设置android:gradientRadius-->
    <gradient
        android:type="sweep"
        android:startColor="@color/wx_green"
        android:endColor="@color/white"
        android:gradientRadius="20dp"/>

</shape>
3、Ring-环形样式
 
shape-ring.png

环形:只有填充色,inner内部没颜色,外环是填充色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="40dp"
    android:thickness="10dp"
    android:useLevel="false">

    <solid android:color="@color/wx_green"/>

</shape>

环形:有填充颜色和描边

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="40dp"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="@color/wx_green"/>
    <!-- 线的宽度 -->
    <stroke
        android:width="5dp"
        android:color="@color/orchid"/>

</shape>

环形:sweep的渐变色环,加上rotate可以变成loading框

<?xml version="1.0" encoding="utf-8"?>
<!--加上rotate可以变成loading等待框或者进度框-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="40dp"
    android:thickness="10dp"
    android:useLevel="false">

    <gradient
        android:endColor="@color/wx_green"
        android:startColor="@color/white"
        android:type="sweep" />

</shape>


4、Line-线形样式
 
shape-line.png

线形:实线,只能是横向的,另外可以设置size

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="3dp"
        android:color="@color/orchid"/>

</shape>

线性:虚线,如果要显示的话,必须加上android:layerType="software"

<?xml version="1.0" encoding="utf-8"?>
<!--要显示虚线必须view加上:android:layerType="software"-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="3dp"
        android:color="@color/orchid"
        android:dashWidth="5dp"
        android:dashGap="3dp"/>

</shape>

二、selector - StateListDrawable:不同状态选择不同的图样

>>标签含义

1、selector下的item标签

1.1.作为drawable资源使用时,一般和shape一样放于drawable目录下,item必须指定android:drawable属性。
1.2.作为color资源使用时,则放于color目录下,item必须指定android:color属性。

属性含义
drawable color颜色或者其他drawable或图片等
state_enabled 设置触摸或点击事件是否可用状态**,一般只在false时设置该属性,表示不可用状态
state_pressed 设置是否按压状态**,一般在true时设置该属性,表示已按压状态,默认为false
state_selected 设置是否选中状态**,true表示已选中,false表示未选中
state_checked 设置是否勾选状态**,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选
state_checkable 设置勾选是否可用状态**,类似state_enabled,只是state_enabled会影响触摸或点击事件,state_checkable影响勾选事件
state_focused 设置是否获得焦点状态**,true表示获得焦点,默认为false,表示未获得焦点
state_window_focused 设置当前窗口是否获得焦点状态**,true表示获得焦点,false表示未获得焦点,例如拉下通知栏或弹出对话框时, 当前界面就会失去焦点;另外,ListView的ListItem获得焦点时也会触发true状态,可以理解为当前窗口就是ListItem本身
state_activated 设置是否被激活状态**,true表示被激活,false表示未激活,API Level 11及以上才支持,可通过代码调用控件的setActivated(boolean)方法设置是否激活该控件
state_hovered 设置是否鼠标在上面滑动的状态**,true表示鼠标在上面滑动,默认为false,API Level 14及以上才支持
exitFadeDuration 状态改变时,旧状态消失时的淡出时间,以毫秒为单位
enterFadeDuration 状态改变时,新状态展示时的淡入时间,以毫秒为单位

>>案例

1、下面就用两个button一个checkbox来说明吧
 
1.button不能按,checkbox不能选中
 
2.button可以按并按中,checkbox选中了
 
3.又再次关闭使用,button2是1的优化版,还带有弧角
2、代码部分


2.1.button

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--异常:tag requires a 'drawable' attribute or child tag defining a drawable
     可用drawable下的shape中添加color颜色值-->
    <!--<item android:state_enabled="false" android:color="@color/gray_5"/>-->
    <!--不可用-->
    <item android:state_enabled="false" android:drawable="@color/gray_5"/>
    <!--未按压-->
    <item android:state_enabled="true"
        android:state_pressed="false" android:drawable="@color/green" />
    <!--光标在-->
    <item android:state_enabled="true"
        android:state_focused="true" android:drawable="@color/lightgreen" />
    <!--按压-->
    <item android:state_enabled="true"
        android:state_pressed="true" android:drawable="@color/orange" />
</selector>

2.2.checkbox

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--不可用,未选中-->
    <item android:state_enabled="false"
        android:state_checked="false"
        android:drawable="@mipmap/un_check_gray"/>
    <!--不可用,选中-->
    <item android:state_enabled="false"
        android:state_checked="true"
        android:drawable="@mipmap/is_check_gray"/>
    <!--可用,未选中-->
    <item android:state_enabled="true"
        android:state_checked="false"
        android:drawable="@mipmap/un_check_purl"/>
    <!--可用,选中-->
    <item android:state_enabled="true"
        android:state_checked="true"
        android:drawable="@mipmap/is_check_purl"/>
</selector>

2.3.button2

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
     <item android:state_pressed="false">   
       <shape android:shape="rectangle">
            <!-- 填充颜色 -->
            <solid android:color="?attr/colorPrimary"></solid>
            <!-- 线的宽度,颜色灰色 -->
            <stroke android:width="0dp" android:color="#D5D5D5"></stroke> 
            <!-- 矩形的圆角半径 -->
            <corners android:radius="6dip" /> 
        </shape>  
     </item>   
        
     <item android:state_focused="true">   
       <shape android:shape="rectangle">
            <!-- 填充颜色 -->
            <solid android:color="?attr/colorPrimary"></solid>
            <!-- 线的宽度,颜色灰色 -->
            <stroke android:width="0dp" android:color="#D5D5D5"></stroke> 
            <!-- 矩形的圆角半径 -->
            <corners android:radius="6dip" /> 
        </shape>  
     </item>   
        
    <item android:state_pressed="true">   
       <shape android:shape="rectangle">
            <!-- 填充颜色 -->
            <solid android:color="?attr/colorAccent"></solid>
            <!-- 线的宽度,颜色灰色 -->
            <stroke android:width="0dp" android:color="#D5D5D5"></stroke> 
            <!-- 矩形的圆角半径 -->
            <corners android:radius="6dip" /> 
        </shape>  
     </item>   

</selector>

三、layer-list - LayerDrawable:层叠图样

>>标签含义

1、layer-list下的item标签。上面已经讲过了,item下面能放各种样式的drawable或者shape图样

>>案例

1、上左右,乱七八糟阴影,内部渐变色,坐上右上弧角
2、阴影图案
 
layer-list.png
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--radius top_left,top_right-->
    <!--shadow top,left,right-->

    <!--从外到内,层层递进-->

    <!-- 最外层:上左右距外围2dp,内部是渐变色1、右上带弧度的矩形 -->
    <item
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/gray_3" />

            <corners android:topLeftRadius="12dp"
                android:topRightRadius="12dp"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"/>
        </shape>
    </item>

    <!-- 第二层:上左右距外围4dp,内部是渐变色2、右上带弧度的矩形 -->
    <item
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/gray_5" />

            <corners android:topLeftRadius="12dp"
                android:topRightRadius="12dp"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"/>
        </shape>
    </item>

    <!-- 第三层:上左右距外围6dp,内部是渐变色3、右上带弧度的矩形 -->
    <item
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/gray_7" />

            <corners android:topLeftRadius="12dp"
                android:topRightRadius="12dp"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"/>
        </shape>
    </item>


    <!-- 最内层:上左右距外围8dp,内部是渐变色的左上、右上带弧度的矩形 -->
    <item
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape android:shape="rectangle">

            <gradient
                android:angle="45"
                android:startColor="@color/wx_green"
                android:endColor="@color/limegreen"
                android:type="linear"/>

            <corners android:topLeftRadius="12dp"
                android:topRightRadius="12dp"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"/>

        </shape>
    </item>

</layer-list>

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

    <!--底层的左边距离上层左边3dp, 底层的顶部,距离上层的顶部6dp,如果不做这个控制,底层和上层的左侧和上侧会重合在一起-->
    <item android:left="3dp"
        android:top="6dp">
        <shape>
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>

    <!--上层的右边距离底层的右边3dp, 上层的底部距离底层的底部6dp-->
    <item android:bottom="6dp"
        android:right="3dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item>
</layer-list>

四、level-list - LevelListDrawable:不同程度图样

1、level-list下的item标签。
属性含义
minLevel 最小值
maxLevel 最大值
drawable 图样

>>案例:比方说电量、wifi质量,音量等

 
battery_level.png
<?xml version="1.0" encoding="utf-8"?>
<!--此处有个坑,顺讯必须从小到大-->
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:minLevel="0" android:maxLevel="19" android:drawable="@drawable/battery_0" />
    <item android:minLevel="20" android:maxLevel="39" android:drawable="@drawable/battery_1" />
    <item android:minLevel="40" android:maxLevel="59" android:drawable="@drawable/battery_2" />
    <item android:minLevel="60" android:maxLevel="79" android:drawable="@drawable/battery_3" />
    <item android:minLevel="80" android:maxLevel="99" android:drawable="@drawable/battery_4" />
    <item android:minLevel="100" android:maxLevel="100" android:drawable="@drawable/battery_5" />
</level-list>
       iv_level_battery.getDrawable().setLevel(25);
        iv_level_battery_2.getDrawable().setLevel(63);
        iv_level_battery_3.getDrawable().setLevel(100);

五、transition - TransitionDrawable:渐变图样

>>标签含义

1、transition下的item标签。上面已经讲过了,item下面能放各种样式的drawable或者shape图样还有自己的属性top,left等

>>案例

1、电量变化
 
draw_transition.gif
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@mipmap/battery_1" />
    <item android:drawable="@mipmap/battery_5" />
</transition>
//得到一个Drawable,属于 TransitionDrawable 类型的
        TransitionDrawable transition = (TransitionDrawable)getResources().
                getDrawable(R.drawable.draw_transition);

        iv_transition_battery.setImageDrawable(transition);
        transition.startTransition(2000); // 设定渐变的变化市场

六、ripple - RippleDrawable:波纹图样

>>标签含义

1、ripple有下的item标签。上面已经讲过了,item下面能放各种样式的drawable或者shape图样还有自己的属性top,left等
ripple属性含义
color 波纹颜色
tools:targetApi lollipop,必须这个api以上才能用

>>案例

1、波纹变化,外放,内部与颜色叠加。gif图片播放太快了,实际没那么快
 
draw_ripple.2018-10-19 14_58_15.gif

1.1、单纯ripple,控件高度是wrap_content的话,那么波纹外扩

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/red"
    tools:targetApi="lollipop">


</ripple>

1.2、加一个item,有背景色,那么不会外扩,含定在此drawable中了

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/red"
    tools:targetApi="lollipop">

    <item
        android:drawable="@color/wx_green" />

</ripple>

1.3、加一个蒙版遮罩,范围限定了,但是drawable设置颜色无用

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/red"
    tools:targetApi="lollipop">

    <!--mask遮罩,设置的drawable颜色会失效-->
    <item
        android:id="@android:id/mask"
        android:drawable="@color/wx_green" />

</ripple>

1.4、弧角矩形按钮点击波纹效果

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/red"
    tools:targetApi="lollipop">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/wx_green" />
            <corners android:radius="12dp" />
        </shape>
    </item>

</ripple>

七、inset - InsetDrawable:内嵌图样

>>标签含义

1、inset有下的shape标签。
inset属性含义
insetTop 嵌入内部上边
insetBottom 嵌入内部下边
insetLeft 嵌入内部左边
insetRight 嵌入内部右边

>>案例

1、内嵌一个图案、感觉没太大用~~
 
inset.png
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetTop="10dp"
    android:insetBottom="10dp"
    android:insetLeft="10dp"
    android:insetRight="10dp">

    <!--待会要插入的一个蓝色的矩形-->
    <shape android:shape="rectangle" >
        <solid android:color="@color/orange" />
    </shape>

</inset>

八、scale - ScaleDrawable:缩放图样

>>标签含义

1、scale标签。
scale属性含义
drawable 资源引用
scaleGravity 缩放的方向, 比如: top, 缩放的时候就会向顶部靠拢,bottom, 缩放时会想底部靠拢;
scaleHeight 表示Drawable能够在高度上缩放的百分比, 比如: 50%,
scaleWidth 表示Drawable能够在宽度上缩放的百分比, 同上

>>案例

1、一般做图片的缩放时候

原文地址:https://www.cnblogs.com/Jeely/p/11045042.html