Android Drawable 详解(教你画画!)

  1. 云栖社区>
  2. 博客>
  3. 正文

Android Drawable 详解(教你画画!)

kandy_aliyq 2018-10-20 22:00:00 浏览976
展开阅读全文

参考

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

Drawable分类

No xml标签 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图

\color{green}{=======================================}

一、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-矩形样式
img_ec9a41b209c792d76a0f8ad94f8eb894.png
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-图圆形样式
img_d515056bb3b53cffa406340f2dd6feaf.png
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-环形样式
img_66c70ce071c26f31859813f1fd7cc87c.png
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>

\color{red}{1.ring的话放在view中最好算一下尺寸,就是(内环+外环+线)*2=尺寸 }
\color{red}{ 2.android:useLevel="false" 需要加上去,不然显示不出来}

4、Line-线形样式
img_86c6d4aefa842990ecf7cc5cc5f9d8d4.png
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>

\color{green}{=======================================}

二、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来说明吧
img_b5e9a3805a769dc5d40ac68616c329ff.png
1.button不能按,checkbox不能选中
img_7a2140ce7611db30b305722c076d5e3d.png
2.button可以按并按中,checkbox选中了
img_2625e1e388079b04deb4032916873e3a.png
3.又再次关闭使用,button2是1的优化版,还带有弧角
2、代码部分

\color{red}{注意item不能直接用color不然异常,得用drawable }
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>

\color{green}{=======================================}

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

>>标签含义

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

>>案例

1、上左右,乱七八糟阴影,内部渐变色,坐上右上弧角
2、阴影图案
img_c756dcccffc2badd6015cc320eebc32c.png
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>

\color{green}{=======================================}

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

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

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

img_15c75685ec94699d3b55a486e2ff6e84.png
battery_level.png

\color{red}{注意:此处level的值必须从小到大,不然会空指针异常}

<?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);

\color{green}{=======================================}

五、transition - TransitionDrawable:渐变图样

>>标签含义

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

>>案例

1、电量变化
img_52e0785a7df044d5d86123ad651c5855.gif
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); // 设定渐变的变化市场

\color{green}{=======================================}

六、ripple - RippleDrawable:波纹图样

>>标签含义

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

>>案例

1、波纹变化,外放,内部与颜色叠加。gif图片播放太快了,实际没那么快
img_28468b666100f6c67d99a0e6d7c9d60e.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>

\color{green}{=======================================}

七、inset - InsetDrawable:内嵌图样

>>标签含义

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

>>案例

1、内嵌一个图案、感觉没太大用~~
img_7ec44a3be80e1b5a0827c5eafd7cfd72.png
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>

\color{green}{=======================================}

八、scale - ScaleDrawable:缩放图样

>>标签含义

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

>>案例

1、一般做图片的缩放时候用到
img_61b977007a0e00ebdda2fcd0139d8e49.gif
draw_scale.gif
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/android"
    android:scaleGravity="left"
    android:scaleWidth="50%"
    android:scaleHeight="100%"
    >

</scale>

\color{red}{注意,此ScaleDrawable要配合setLevel一起用,level在0-10000内}

//Scale Drawable不能单独的使用, 他需要配合Level等级使用, level的取值是0~10000, (0为不可见)
        sk_scale.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                int max = seekBar.getMax();
                double scale = (double)progress/(double)max;
                ScaleDrawable drawable = (ScaleDrawable) iv_scale.getDrawable();
                drawable.setLevel((int) (10000*scale));
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) { }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) { }
        });

\color{green}{=======================================}

九、clip - ClipDrawable:剪切的图样

>>标签含义

1、clip标签。
clip属性 含义
drawable 资源引用
clipOrientation top\bottom\left\right\gravity,fill... 横向,竖向,中间...
gravity left,right,top,bottom--哪个方向开始

>>案例

1、一般可用作温度计啊、声音啊,各种程度的东西。
img_4ccdf3cea843233c812ef8f0a5502caa.gif
draw_clip.gif
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/draw_shape_rectangle_linear_gradient"
    android:clipOrientation="horizontal"
    android:gravity="left">

</clip>
//Clip Drawable也要level才有用
        sk_clip.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                int max = seekBar.getMax();
                double scale = (double)progress/(double)max;
                ClipDrawable drawable = (ClipDrawable) tv_clip.getBackground();
                drawable.setLevel((int) (10000*scale));
                tv_clip.setText("Clip Progress = "+progress);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });

\color{green}{=======================================}

十、rotate - RotateDrawable:旋转图样

>>标签含义

1、rotate标签。
clip属性 含义
drawable 资源引用
visible 是否可见
pivotX pivotX表示旋转轴心在x轴横坐标上的位置,用百分比表示,表示在当前drawable总宽度百分之几的位置。
pivotY 同上,Y轴方向的
fromDegrees 从什么角度开始
toDegrees 到什么角度

>>案例

1、一般可用作循环的东西,比如唱片啊,loading等待框啊~~
img_15e2eb04c891854dbb600ab759089f50.gif
draw_rotate.gif
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/draw_shape_ring_gradient"
    android:fromDegrees="0"
    android:toDegrees="360">

</rotate>
//Rotate Drawable也要level才有用
        sk_rotate.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                int max = seekBar.getMax();
                double scale = (double)progress/(double)max;
                RotateDrawable drawable = (RotateDrawable) tv_rotate.getBackground();
                drawable.setLevel((int) (10000*scale));
                tv_rotate.setText("Rotate Progress = "+progress);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });

\color{green}{=======================================}

十一、animation-list - AnimationDrawable:动画效果图样

>>标签含义

1、animation-list标签下有item(drawable和duration属性)标签。
animation-list属性 含义
oneshot 是否一次,不然就是循环

>>案例

1、欢迎界面展示啊等等。。。
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/battery_1" android:duration="200"/>
    <item android:drawable="@drawable/battery_3" android:duration="200"/>
    <item android:drawable="@drawable/battery_5" android:duration="200"/>
</animation-list>
//AnimationDrawable mAnimationDrawable = new AnimationDrawable();
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue01), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue02), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue03), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue04), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue05), 150);
//mAnimationDrawable.setOneShot(false);

AnimationDrawable a = (AnimationDrawable)btn_animation_list.getBackground();
        a.start();//a.stop \ a.isRunning()

\color{green}{=======================================}

十二、bitmap - BitmapDrawable

1、截图
img_a4a7413ae521c320dab10c107925f044.png
bd-mirror.png
img_04eecfe8c93a7774fb81a85775926fc4.png
bd-repeat.png
img_c9007cdfff234812b45b77d015274164.png
bd-clamp.png
img_ac9cd6bcdd6d7681e3b1a4ed5c17078c.png
bd-disabled.png
2、内容
xml属性 含义 代码
src 资源:color\drawable -
antialias 抗锯齿,建议开启 bitmapDrawable.setAntiAlias(true);
dither 颤抖处理:平滑,饱满,清晰,建议开启 bitmapDrawable.setDither(true);
filter 位图过滤:平滑,建议开启 bitmapDrawable.setFilterBitmap(true);
gravity 位置[start,end,top,bottom,center...] bitmapDrawable.setGravity(Gravity.START);
mipMap 文理映射,建议关闭 bitmapDrawable.setMipMap(false);
tileMode 平铺方式
disabled-不使用平铺
clamp-复制边缘色彩
repeat-重复
mirror-镜像]
bitmapDrawable.setTileModeXY(Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR,Shader.TileMode.MIRROR);
3、代码
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/android"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:gravity="left"
    android:mipMap="false"
    android:tileMode="repeat"
    />
Bitmap bitmap = BitmapFactory.decodeResource(instance.getResources(),
                        R.drawable.android);//drawable\mipmap\color...
BitmapDrawable bitmapDrawable = new BitmapDrawable(bitmap);
bitmapDrawable.setAntiAlias(true);//抗锯齿
bitmapDrawable.setDither(true);//抖动平滑
bitmapDrawable.setFilterBitmap(true);//过滤平滑
bitmapDrawable.setGravity(Gravity.START);
//bitmapDrawable.setMipMap(false);

//复制边缘色彩
bitmapDrawable.setTileModeXY(Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
//重复
bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
//镜像
bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR,Shader.TileMode.MIRROR);

ll_bitmap_drawale.setBackground(bitmapDrawable);

\color{green}{=======================================}

十三、nine-patch - NinePatchDrawable

1、这个是.9图,使用方法和上面bitmap类似,不赘述。好处是可以动态拉伸此图片某些边的时候而不造成整体变形。
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@color/colorPrimary"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:gravity="center"
    android:mipMap="false"
    android:tileMode="disabled"
    />

网友评论

登录后评论
0/500
评论
kandy_aliyq
+ 关注