Android实践之Drawable的使用

在上篇博客一起来说说那些你不知道的Drawable中，我们介绍了各类的Drawable对象，对各个属性也进行了介绍。当然还有一些疑惑点还没解释，我们暂且搁置一边，先来根据各个属性做个练习。Let’s go!!

算作一个小系列吧！

一起来说说那些你不知道的Drawable

在这里给大家推荐一个在线查看shape效果的网站：

http://angrytools.com/android/button/

案例一、带边框的圆角背景图

分析：

边框线：边框线的绘制我们需要使用stroke标签

圆角：使用corners标签

即我们的shape文件的配置如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
<corners android:radius="8dp"/>
<stroke android:width="1dp" android:color="#646464"/>
</shape>

　　　　　　　　　　　　　　　　　　　　　


是不是很简单，在也不用可怜巴巴的找美工的切图了。

案例二、实现下划线背景

在实际开发中，我们经常可以看到布局中间充斥着一些线条，有些同学使用一个view进行模拟。

<View
android:layout_height="0.5dp"
android:layout_width="match_parent"
android:backgroud="#808080"/>

这样是不是很low，而且还在布局文件中防止了大量的控件，降低了布局的解析速度，降低了效率。熟练使用各类drawable，即可帮助我们解决这个问题。

分析：既然实现下划线背景，说明我们还是要描边，即需要stroke标签，但是仔细想想，系统给我们提供的描边，是对四个边都进行描边，那我们怎么实现只有下划线的描边呢？这里我们可以换种思路，即利用layer-list，通过图层的叠盖，达到效果。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<stroke android:color="#606060" android:width="1dp"/>
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</item>
</layer-list>

在第一个图层item中，我们实现了边框。在第二个图层item中，我们通过设置paddingBottom属性达到覆盖效果。

　　　　　　　　　　　　　　　　　　　　　


相应的，我们通过修改left,right,top可以实现上下左右边框线的效果。

案例三、实现灰色背景效果

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape android:shape="rectangle">
<stroke android:width="0.5dp" android:color="#909090"/>
<solid android:color="#606060"/>
<corners android:radius="2dp"/>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<stroke android:width="0.5dp" android:color="#909090"/>
<solid android:color="#FFFFFF"/>
<corners android:radius="2dp"/>
</shape>
</item>
</selector>

效果图：

　　　　　　　　　　　　　　　　　　　　　

案例四、实现圆形图片

在许久以前，刚写博客的时候，写了一个自定义圆形控件，Android自定义控件之圆形头像在这篇文章中采用了重写ImageView方法进行。这次我们采用自定义Drawable来达到我们的效果。

根据一起来说说那些你不知道的Drawable文章，我们知道系统给我们重写Drawable而得来的几个子类，它们也是通过继承Drawable而来，所以我们同样也可以。查看Drawable源码，我们需要明白以下几个方法：

public abstract void draw(Canvas canvas);用来在drawable的bounds内进行绘制。

public void setBounds(int left, int top, int right, int bottom)，用来设定drawable的范围

public void setDither(boolean dither)，是否放置抖动

public void setFilterBitmap(boolean filter)，当绘制bitmap时使用，如果不涉及可以忽略，典型针对BitmapDrawable

public abstract void setAlpha(int alpha)，设置透明度，范围0——255

public abstract void setColorFilter(ColorFilter cf);设置颜色过滤器

public abstract int getOpacity()，返回这个drawable是否透明，PixelFormat.UNKNOWN、PixelFormat.TRANSLUCENT(半透明)、PixelFormat.TRANSPARENT(透明)、PixelFormat.OPAQUE(不透明)

public int getIntrinsicWidth()：drawable的宽度

public int getIntrinsicHeight()：drawable的高度

public class CircleDrawable extends Drawable {
private Paint mPaint;
private int cx,cy,radius;
private int mWidth;
private Bitmap mBitmap ;
public CircleDrawable(Bitmap bitmap){
mBitmap = bitmap ;
mPaint = new Paint();
mPaint.setShader(new BitmapShader(bitmap,TileMode.CLAMP,TileMode.CLAMP));
mPaint.setAntiAlias(true);
mWidth = Math.min(mBitmap.getWidth(), mBitmap.getHeight());
}

@Override
public void setBounds(int left, int top, int right, int bottom) {
super.setBounds(left, top, right, bottom);
cx = (left + right)/2;
cy  =(top + bottom)/2;
radius = Math.abs(right - left) /2 - Math.abs(bottom - top) /2 > 0 ? Math.abs(bottom - top) /2:Math.abs(right - left) /2;
}

@Override
public void draw(Canvas canvas) {
canvas.drawCircle(cx, cy, radius, mPaint);
}

@Override
public void setAlpha(int alpha) {
mPaint.setAlpha(alpha);
}

@Override
public void setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}

@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}

@Override
public int getIntrinsicWidth() {
return mWidth;
}

@Override
public int getIntrinsicHeight() {
return mWidth;
}
}

这里，我们自定义，所以就没有办法在xml中进行使用，就得用代码了，通过设置drawable：

btn_btn.setBackgroundDrawable(new CircleDrawable(bitmap));
iv.setImageDrawable(circleDrawable);

　　　　　　　　　　　


大家可以注意到，ImageView的展示还是蛮正常的，但是Button的背景就不正常了，这是为什么呢？大家查看源码思考下。

暂时想到这么多，其实只要基础的原理会了，自然写起来就方便。后面想起来在补吧！如果大家有比较好的案例，欢迎推荐。