安卓开发之Drawable学习
前面已经学习了Android绘图与动画中的一些基础知识，这次来学习下安卓中提供的 Drawable。其实本应该在学习Animation或者Bitmap之前学习Drawable的，在学习Animation的帧动画中我们也看到实现Animation中的帧动画所用到的类就是AnimDrawable，然后代码中调用AnimDrawable实例的start()以及stop()开始或停止播放帧动画，Bitmap其实除了之前学习的BitmapFactory方法外也可以通过BitmapDrawable获取。Android中提供了多达13种的 Drawable，这里就来学习下安卓提供的一些常用的Drawable。
Drawable
Drawable是一种可以在Canvas上进行绘制的对象，即可绘制物；Drawable类是抽象类，是接下来要说的各种Drawable的基类。它常常用于View的背景或者作为ImageView中的图像显示。
Drawable可分为两种：
- 1.常见的普通的图片资源，一般放在res/mipmap或者res/drawable下也可以，可通过R.drawable/mipmap.xxx方式使用
- 2.XML形式的Drawable资源，一般放在res/drawable下，然后在布局文件中通过android:background = "@drawable/xxx"引入布局中。
也可以在Java 代码中通过Resource的getDrawable(R.drawable/mipmap.xxx)获得drawable资源或者new一个所需Drawable并set相关属性，最后加载到布局中
例如之前学习帧动画时(用到的类为AnimDrawable)在res/drawable定义的meizi.xml：
然后在activity_main.xml中通过 android:background="@drawable/meizi"将上面的Drawable资源引入到布局中：
Drawable 没有大小概念，某些Drawable可以通过getIntrinsicWidth()和getIntrinsicHeight()获取其内部宽和高。一些特殊的例子例如图片所形成的Drawable的内部宽和高就是图片的宽和高，颜色所形成的Drawable没有内部宽和高的概念。
ColorDrawable
前面说过Drawable是一种可以在Canvas上进行绘制的对象，那么当我们将ColorDrawable绘制到Canvas上的时候, 会使用一种固定的颜色来填充Paint,然后在画布上绘制出一片单色区域。这里比较简单通过Demo来学习，布局文件比较简单就不写了：
修改color.xml文件：
MainActicity：
public class MainActivity extends AppCompatActivity {
private ColorDrawable colorDrawable;
private TextView textView;
private Button button1,button2,button3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindviews();
//TextView Java中定义ColorDrawable:
colorDrawable = new ColorDrawable(0xffff2200);
textView.setBackground(colorDrawable);
//Button1 在xml中定义ColorDrawable:
int mycolor = getResources().getColor(R.color.mycolor);
button1.setBackgroundColor(mycolor);
//使用系统定义好的color
int getcolor = Resources.getSystem().getColor(android.R.color.darker_gray);
button2.setBackgroundColor(getcolor);
//前面在学习Animation时提到的ARGB方式
button3.setBackgroundColor(Color.argb(0x00, 0x00, 0x00, 0x00));
}
private void bindviews() {
textView = findViewById(R.id.textview);
button1 = findViewById(R.id.button1);
button2 = findViewById(R.id.button2);
button3 = findViewById(R.id.button3);
}
}
效果如下：
ShapeDrawable
ShapeDrawable可表示纯色或有渐变效果的基础几何图形（矩形,圆形,线条等），根结点是shape节点，子节点较多。主要包含以下：
（1）< shape > 根节点 设置图形的形状 , 主要属性如下：
- visible:设置是否可见
- shape:形状,可选值包括rectangle(矩形,包括正方形),oval(椭圆,包括圆),line(线段),ring(环形)
- innerRadiusRatio:当shape为ring时有效,表示环内半径所占半径的比率,如果设置了innerRadius会被忽略
- innerRadius:当shape为ring时有效,表示环的内半径的尺寸
- thicknessRatio:当shape为ring时有效,表环厚度占半径的比率
- thickness:当shape为ring时有效,表示环的厚度,即外半径与内半径的差
- useLevel:当shape为ring时有效,表示是否允许根据level来显示环的一部分，通常为false
（2)< size >: 图形的固有大小
- width:设定shape宽度
- height:设定shape高度
（3) < corners > shape的四个圆角的角度，只适用于矩形
- radius:圆角半径,为上下左右四个角设置相同的角度
- topLeftRadius,topRightRadius,BottomLeftRadius,tBottomRightRadius: 依次为左上,右上,左下,右下的圆角值,优先级高于radius
(4) < gradient >渐变效果，与< solid >纯色填充相排斥
- startColor:渐变的起始颜色
- centerColor:渐变的中间颜色
- endColor:渐变的结束颜色
- type:渐变类型,可选linear线性渐变(可设置渐变角度angle),radial发散/径向渐变(gradientRadius必须设置),sweep平铺/扫描线渐变
- centerX:渐变中心点的x坐标,取值范围为:0-1
- centerY:渐变中心点的Y坐标,取值范围为:0-1
- angle:只有linear类型的渐变才有效,表示渐变角度,值必须为45的倍数;0表示从左到右，90表示从下到上
- gradientRadius:渐变效果的半径,只有radial和sweep类型的渐变才有效
- useLevel:判断是否根据level绘制渐变效果，当Drawable为StateListDrawable时值为true
（5)< solid >纯色填充,与< gradient >渐变效果排斥
- color:背景填充色,设置solid后会覆盖gradient设置的所有效果
（6)< stroke > 描边:
- width:边框的宽度,值越大，shape的边缘线越粗
- color:边框的颜色
- dashWidth:边框虚线段的长度
- dashGap:边框的虚线段的间距
(7)< padding >
- left,top,right,bottm:依次是左上右下方向上与四周空白的边距
这里也通过Demo学习下，在res/drawable下新建两个Drawable shape文件：
rect.xml:矩形渐变效果
rect_circle.xml:矩形纯色填充
activity_main.xml:
效果如下：
GradientDrawable
属性前面已经介绍过了，这里直接通过Demo来验证：
新建linear.xml：
radial.xml：
sweep.xml：
activity_main.xml:
三种效果如下：
BitmapDrawable
Bitmap的一种封装，用于表示图片,可以设置被它包装的Bitmap在BitmapDrawable区域中的绘制方式，包括：平铺填充,拉伸填或保持图片原始大小。根节点为< bitmap >，主要属性如下：
- src:图片资源id
- antialias:是否支持抗锯齿
- filter:是否支持位图过滤，当图片尺寸被拉伸或压缩时，开启过滤效果可保持较好的显示效果
- dither:是否对位图进行抖动处理，开启后高质量的图片在比较低质量的屏幕上不失真
- gravity:若位图比容器小,可以设置位图在容器中的相对位置
- tileMode:指定图片平铺填充容器的模式,设置这个的话,gravity属性会被忽略,有以下可选值:
disabled(整个图案拉伸平铺),clamp(原图大小), repeat(平铺),mirror(镜像平铺)
通过Demo来验证效果:
新建tilemode.xml:
activity_main.xml中设置一个View：
tilemode.xml指定不同的tileMode效果如下：
disabled：
clamp原图：
repeat平铺：
mirror镜像平铺：
Java 代码中：
public class MainActivity extends AppCompatActivity {
private LinearLayout myLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myLayout = findViewById(R.id.mylayout);
//创建BitmapDrawable
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher);
BitmapDrawable bitmapDrawable = new BitmapDrawable(bitmap);
bitmapDrawable.setDither(true);
bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);//MIRROR镜面平铺
//加载
myLayout.setBackgroundDrawable(bitmapDrawable);
}
}
效果如下：
InsetDrawable
表示把一个Drawable嵌入到另外一个Drawable的内部，并且在内部留一些间距, 与Drawable的padding属性相似,但padding属性表示的是Drawable的内容与Drawable本身的边距， 而InsetDrawable表示的是两个Drawable与容器之间的边距，当控件需要的背景比实际的边框 小的时候,比较适合使用InsetDrawable。根节点为< inset >，常用属性包括：
- drawable:引用的Drawable资源id,如果为空,必须有一个Drawable类型的子节点
- visible:设置Drawable是否留有边距
- insetLeft,insetRight,insetTop,insetBottm:设置距离容器左右上下的边距
通过Demo验证一下，在res/drawable新建inset.xml:
效果如下：
ClipDrawable
表示裁剪一个Drawable，根节点为< clip >。主要属性如下：
- clipOrietntion:设置剪切的方向,可以设置水平和竖直2个方向。并且需要在Java代码中调用setLevel()方法控制可见区大小。level为0表示完全裁剪，即不可见；值为10000表示不裁剪，level越大可见区越大。例如Android中的进度条就是使用ClipDrawable来实现的,它通过设置level的值来决定剪切区域即可见区域的大小
- gravity:从哪个位置开始裁剪，需要和clipOrientation配合使用
- drawable:引用的drawable资源id,为空的话需要有一个Drawable类型的子节点
通过Demo来学习一下，在res/drawable中定义clip.xml:
这里设置为水平方向从左开始裁剪
activity_main.xml:将imageview的src设置为clip
MainActivity：
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
private ClipDrawable clipDrawable;
int level;
private Handler handler = new Handler(){
@Override
public void handleMessage(@NonNull Message msg) {
super.handleMessage(msg);
if (msg.what == 0x123){
clipDrawable.setLevel(level);
level += 500;//每次裁剪500
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageview);
clipDrawable = (ClipDrawable) imageView.getDrawable();
level = clipDrawable.getLevel();
final Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
handler.sendEmptyMessage(0x123);
if (level>10000){
timer.cancel();
}
}
},0,50);//50ms为一个周期去裁剪
}
}
效果如下图所示：
LayerDrawable
表示一种层次化的Drawable集合，包含一个Drawable数组，然后按照数组对应的顺序来绘制，索引值最大的Drawable会被绘制在最上层。虽然这些Drawable会有交叉或者重叠的区域，但它们位于不同的层，所以并不会相互影响，根节点为< layer-list >，< item >常用属性如下：
- drawable:引用的位图资源id,如果为空需要有一个Drawable类型的子节点
- id:层的id
- left:层相对于容器的左边距
- right:层相对于容器的右边距
- top:层相对于容器的上边距
- bottom:层相对于容器的下边距
Demo实例
res/drawable新建layer.xml:
activity_main.xml:
效果如下：
TransitionDrawable
TransitionDrawable是LayerDrawable的子类，TransitionDrawable只管理两层的Drawable，并且提供了透明度变化的动画，可以控制一层Drawable过度到另一层Drawable的动画效果。 根节点为< transition >，常用属性和LayerDrawable相同。并且需要调用startTransition方法才能启动两层间的切换动画， 也可以调用reverseTransition()方法反过来播放。
通过Demo来学习，在res/drawable创建一个TransitionDrawable的xml文件：
MainActivity：调用startTransition方法启动两层间的切换动画
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageview);
TransitionDrawable transitionDrawable = (TransitionDrawable) imageView.getDrawable();
transitionDrawable.startTransition(3000);
//transitionDrawable.reverseTransition(3000);
}
}
效果如下：
LevelListDrawable
用来管理一组Drawable的,我们可以为里面的drawable设置不同的level， 当他们绘制的时候，会根据level属性值获取对应的drawable绘制到Canvas上，根节点为:< level-list >没有可以设置的属性 ，但是可以设置每个< item > 的属性。item属性如下：
- drawable:引用的位图资源,如果为空需要有一个Drawable类型的子节点
- minlevel:level对应的最小值，取值范围为0~10000，默认为0
- maxlevel:level对应的最大值，取值范围为0~10000，默认为0
LevelListDrawable若作为View背景，需要在Java代码中调用setLevel()方法，若作为ImageView前景，需要调用setImageLevel()。
加载时当某item的android:maxLevel 等于 setLevel所设置的数值时就会被加载。若都没有匹配的则都不显示。
通过Demo来学习：
res/drawable新建三个shape文件：
MainActivity：
public class MainActivity extends AppCompatActivity {
private ImageView imageview;
private LevelListDrawable levelListDrawable;
int level = 0;
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 0x123) {
if (levelListDrawable.getLevel() > 6000) {
levelListDrawable.setLevel(0);
}
imageview.setImageLevel(levelListDrawable.getLevel() + 2000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageview = findViewById(R.id.imageview);
levelListDrawable = (LevelListDrawable) imageview.getDrawable();
imageview.setImageLevel(0);
new Timer().schedule(new TimerTask() {
@Override
public void run() {
handler.sendEmptyMessage(0x123);
}
}, 0, 100);
}
}
效果如下：
StateListDrawable
表示一个Drawable的集合，每个Drawable对应着View的一种状态。根节点为< selctor >,常用属性包括：
- constantSize：固有大小是否随其状态的改变而改变。默认为false，表示固有大小会随着状态的改变而改变。为true，则表示固有大小是固定值，是内部所有Drawable的固有大小中的最大值
- dither：是否开启抖动效果。开启后让高质量的图片的比较低质量的屏幕上不失真
- variblePadding：其padding是否随状态的改变而改变。默认为false，表示padding是固定值，是其内部所有Drawable的padding中的最大值。为true，则表示padding会随着状态的改变而改变
< item >的属性包括：
- drawable:引用的Drawable位图id
- state_focused:是否获得焦点
- state_window_focused:是否获得窗口焦点
- state_enabled:控件是否可用
- state_checkable:控件可否被勾选,适用于checkbox这类组件
- state_checked:控件是否被勾选
- state_selected:控件是否被选择,针对有滚轮的情况
- state_pressed:控件是否被按下
- state_active:控件是否处于活动状态,适用于slidingTab这类组件
- state_single:控件包含多个子控件时,确定是否只显示一个子控件
- state_first:控件包含多个子控件时,确定第一个子控件是否处于显示状态
- state_middle:控件包含多个子控件时,确定中间一个子控件是否处于显示状态
- state_last:控件包含多个子控件时,确定最后一个子控件是否处于显示状态
简单的Demo，按钮点击改变颜色：
res/drawable新建shape_btn_normal.xml：代表普通状态下的shape
shape_btn_pressed.xml:代表按下状态下的shape
activity_main.xml:
除此之外，还要新建selector文件将两者结合起来：
state_pressed就代表着上面介绍属性说的控件是否被按下，效果如下：
AnimDrawable
参考之前的文章安卓开发之Animation学习(帧、补间、属性动画)中帧动画。
自定义Drawable
涉及到自定义View的一些知识，之后再系统的学习，这里先了解一下，参考《安卓开发艺术探索》。
前面说过Drawable 的使用范围比较单一，或作为ImageView中的图像来显示，或作为View的背景，后者用途居多。创建自定义Drawable，必须重写其draw()、setAlpha()、setColorFilter()、getOpacity()等方法，下面是一个自定义Drawable的实现过程，通过自定义Drawable来绘制一个圆形的Drawable,并且它的半径会随着View的变化而变化，这种Drawable可以作为View的通用背景，代码如下所示。
public class MyDrawable extends Drawable {
private Paint paint;
public MyDrawable(int color){
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(color);
}
@Override
public void draw(@NonNull Canvas canvas) {
//得到Drawable的实际大小，一般和View尺寸相同
final Rect rect = getBounds();
//精确获取矩阵中心点
float x = rect.exactCenterX();
float y = rect.exactCenterY();
canvas.drawCircle(x,y,Math.min(x,y),paint);
}
@Override
public void setAlpha(int alpha) {
paint.setAlpha(alpha);
invalidateSelf();
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {
paint.setColorFilter(colorFilter);
invalidateSelf();
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
当自定义的Drawable有固有大小时，最好重写getIntrinsicWidth()和getIntrinsicHeight()这两个方法，因为它会影响到View的wrap_content布局。比如自定义Drawable是绘制一-张图片，那么这个Drawable的内部大小就可以选用图片的大小。在上面的例子中，自定义的Drawable是由颜色填充的圆形并且没有固定的大小，因此没有重写这两个方法，这个时候它的内部大小为-1，即内部宽度和内部高度都
为-1。需要注意的是，内部大小不等于Drawable的实际区域大小，Drawable 的实际区域大小可以通过它的getBounds方法来得到，一般来说它和View的尺寸相同。