Android-Drawable

Android-Drawable

学习自: KEEGAN小钢 原文链接:https://keeganlee.me/post/android/20150916

官方文档: https://developer.android.google.cn/guide/topics/resources/drawable-resource#top_of_page

Drawable 指的是一种可绘制图像,但又不只是图片。可以是一种颜色或者各种形状所组成的图形。Drawable 一般做背景显示。一般通过XML来编写,也可以通过代码来写。

优点:占用空间小,减小APK 体积,能够更好的适配各种机型显示。

1.Bitmap (位图)

通过Bitmap 可以对图片进行一些设置,

属性 描述
src 指定图片资源(必须指定)
tint 给图片着色(更换颜色)
gravity 对齐方式
antialias 是否开启抗锯齿
filter 当对图片进行收缩或者延展后可以获得更平滑的效果
tileMode 平铺方式
  • android:tileMode 平铺方式,

    四个可选值: repeat,mirror,clamp(复制图片边缘颜色来填充剩余部分),disable(默认,没效果)

    效果图:

2.九宫格

能够对png图片进行局部拉伸,创建方式右键一张png图片,选择 Create 9-Patch file...

操作方式:通过拖动黑线区域来指定可拉伸区域,交叉位置即为可拉伸区域(也是文本显示位置)。

效果图:

3.Inset (插入可绘制对象)

对Drawable 设置内边距,也可以对单个方向进行设置。

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

    android:drawable="@drawable/img1"
    android:inset="10dp"
    android:insetBottom="5dp"
    android:insetLeft="5dp"
    android:insetRight="5dp"
    android:insetTop="5dp" />

效果图:

4.Clip (裁剪可绘制对象)

对Drawable 进行裁剪,通过设置level值控制裁剪多少,level 取值范围 0~10000,默认0,也就是图片完全不显示。

实用场景:进度条

android:gravity

设置裁剪的位置,可取值如下,多个取值用 | 分隔:

  • top 图片放于容器顶部,不改变图片大小。当裁剪方向为vertical时,会裁掉图片底部
  • bottom 图片放于容器底部,不改变图片大小。当裁剪方向为vertical时,会裁掉图片顶部
  • left 图片放于容器左边,不改变图片大小,默认值。当裁剪方向为horizontal,会裁掉图片右边部分
  • right 图片放于容器右边,不改变图片大小。当裁剪方向为horizontal,会裁掉图片左边部分
  • center 图片放于容器中心位置,包括水平和垂直方向,不改变图片大小。当裁剪方向为horizontal时,会裁掉图片左右部分;当裁剪方向为vertical时,会裁掉图片上下部分
  • fill 拉伸整张图片以填满容器的整个高度和宽度。这时候图片不会被裁剪,除非level设为了0,此时图片不可见
  • center_vertical 图片放于容器垂直方向的中心位置,不改变图片大小。裁剪和center时一样
  • center_horizontal 图片放于容器水平方向的中心位置,不改变图片大小。裁剪和center时一样
  • fill_vertical 在垂直方向上拉伸图片以填满容器的整个高度。当裁剪方向为vertical时,图片不会被裁剪,除非level设为了0,此时图片不可见
  • fill_horizontal 在水平方向上拉伸图片以填满容器的整个宽度。当裁剪方向为horizontal时,图片不会被裁剪,除非level设为了0,此时图片不可见
  • clip_vertical 附加选项,裁剪基于垂直方向的gravity设置,设置top时会裁剪底部,设置bottom时会裁剪顶部,其他情况会同时裁剪顶部和底部
  • clip_horizontal 附加选项,裁剪基于水平方向的gravity设置,设置left时会裁剪右侧,设置right时会裁剪左侧,其他情况会同时裁剪左右两侧

Style1:

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

    android:clipOrientation="horizontal"
    android:drawable="@drawable/img1"
    android:gravity="left"/>

Style2: 也可以在其中定义 drawable类型的子标签

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

    android:clipOrientation="horizontal"
    android:gravity="left">
    <color android:color="@color/colorPrimary" />
</clip>

从0~10000效果图:

代码设置 level:

Scaleiv.drawable.level = progress

5.Scale (缩放可绘制对象)

对Drawable 进行缩放操作,通过设置 level 来控制缩放比例,level 越高越接近原图。范围0~10000

属性 描述
drawable 指定drawable 资源
scaleHeight 设置可缩放高度的最大百分比,也就是说最小能够缩小到原图的百分之多少
scaleWidth 设置可缩放宽度的最大百分比,也就是说最小能够缩小到原图的百分之多少
scaleGravity 缩放后图片位置
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/img2"
    android:scaleGravity="center"
    android:scaleHeight="50%"
    android:scaleWidth="50%" />

需要通过代码设置level

从0到10000的变化,最小图是原图的50%

6.level-list (级别列表)

将多个drawable 放到一个集合中,更具设置level 来显示不同drawable

item 匹配规则是从上到下,只要匹配就会返回,不会继续往下走。

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/img1"
        android:maxLevel="50"
        android:minLevel="0" />
    <item
        android:drawable="@drawable/img2"
        android:maxLevel="100"
        android:minLevel="51" />
</level-list>

一般情况下,每个item按照maxLevel从小到大添加,如下:

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/battery_low"
        android:maxLevel="10" />
    <item
        android:drawable="@drawable/battery_below_half"
        android:maxLevel="50" />
    <item
        android:drawable="@drawable/battery_over_half"
        android:maxLevel="99" />
    <item
        android:drawable="@drawable/battery_full"
        android:maxLevel="100" />
</level-list>

7.Transition (转换可绘制对象)

Transition 继承自 layer-list, 但是transition 只能添加两个drawable,提供了两个drawable切换的方法,切换时会有淡入淡出效果。

应用场景:开关背景图

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img1" />
    <item android:drawable="@drawable/img2" />
</transition>

切换代码:

var td = iv_temp.drawable as TransitionDrawable
                 //动画时长
td.startTransition(1000) //正向切换,第一张到第二张 (只能实现第一张到第二张)
td.reverseTransition(1000) //逆向切换,第二张到第一张 (可以实现两张来回切换)

8.Rotate

对drawable 进行旋转

应用场景:上箭头图片显示为下箭头图片

属性 描述
fromDegrees 起始角度度数
toDegrees 结束角度度数(正数表示顺时针,负数表示逆时针)
pivoX 旋转中心X坐标,百分比表示,相对于左边缘距离
pivoY 旋转中心X坐标,百分比表示,相对于上边缘距离
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/img2"
    android:fromDegrees="0"
    android:pivotX="5%"
    android:pivotY="50%"
    android:toDegrees="180" />

效果图:

9.Animation-list

创建帧动画,将多张drawable按照一定的播放顺序和一定的播放时间间隔来播放。

oneshot: 是否是播放一次 duration:播放时间间隔

<?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/img_miao1"
        android:duration="80" />
    <item
        android:drawable="@drawable/img_miao2"
        android:duration="80" />
    <item
        android:drawable="@drawable/img_miao3"
        android:duration="80" />
</animation-list>

开始及停止动画:

var animDrawable = activity_frame_animation_iv.drawable as AnimationDrawable
animDrawable.start()  //播放动画
animDrawable.stop() //停止播放

10. Animated-rotate

配合着Rotate使用,达到自动播放效果

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/test_rotate"
    android:pivotY="50%"
    android:pivotX="50%">

</animated-rotate>

11. Layer List (图层列表)

使用layer-list 可以将多个 drawable 按照顺序层叠在一起显示。列表最后一个drawable 绘于顶部。

11.1 我们可以通过 layer-list 和 selector 来实现下图效果

该图通过使用一个红色背景层和一个白色背景层实现,白色背景层在通过设置 android:bottom 向上偏移,显示图底部红色背景层。 偏移属性其实和 Margin 一个作用。

代码:

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

    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@android:color/holo_red_dark" />
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>


    <item android:state_checked="false">
        <layer-list>
            <item android:drawable="@android:color/holo_red_dark" />
            <item android:bottom="2dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>

</selector>

11.2 实现阴影效果

偏移指的是移动整个图层

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 灰色阴影 -->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 白色前景 -->
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>
posted @ 2018-07-25 09:30  -Tiger  阅读(...)  评论(... 编辑 收藏