Android 自定义Drawable 实现圆角圆形图片

概述

在之前的博客Android Drawable(一)之ShapeDrawable 和 Android Drawable(二)中主要讲解了Android中常见的Drawable的使用方法，今天在这里主要讲解一下如何通过自定义Drawable实现圆角和圆形图片。

在Android开发中，我们经常通过使用自定义控件来完成一些UI效果而很少使用自定义Drawable，主要原因是自定义Drawable无法在xml文件中使用。Drawable一般都是作为View的背景显示出来，在View显示Drawable时，主要就是通过调用Drawable类的draw(canvas)方法实现。

自定义Drawable

自定义圆形图片

package com.zhangke.drawabledemo2;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;

/**
* Created by zhangke on 2016/10/29.
*/

public class CircleDrawable extends Drawable {

/**
* 显示图片
*/
private Bitmap mBitmap;
/**
* BitmapShader
*/
private BitmapShader mBitmapShader;
/**
* 画笔
*/
private Paint mPaint;
/**
* 圆心
*/
private float cx, cy;
/**
* 半径
*/
private float radius;

private int size;

public CircleDrawable(Bitmap bitmap) {
this.mBitmap = bitmap;
mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setShader(mBitmapShader);

size = Math.min(bitmap.getWidth(), bitmap.getHeight());

cx = size / 2;
cy = size / 2;
radius = size / 2;

}

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

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

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

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

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

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

自定义圆角图片

package com.zhangke.drawabledemo2;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;

/**
* Created by zhangke on 2016/10/29.
*/

public class RoundDrawable extends Drawable {

/**
* 显示图片
*/
private Bitmap mBitmap;
/**
* BitmapShader
*/
private BitmapShader mBitmapShader;
/**
* 画笔
*/
private Paint mPaint;

private RectF rectF;

public RoundDrawable(Bitmap bitmap) {
this.mBitmap = bitmap;

mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setShader(mBitmapShader);

}

@Override
public void setBounds(int left, int top, int right, int bottom) {
super.setBounds(left, top, right, bottom);
rectF = new RectF(left, top, right, bottom);
}

@Override
public void draw(Canvas canvas) {
canvas.drawRoundRect(rectF, 100, 100 ,mPaint);
}

@Override
public int getIntrinsicHeight() {
return mBitmap.getHeight();
}

@Override
public int getIntrinsicWidth() {
return mBitmap.getWidth();
}

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

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

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

在自定义Drawable时，默认需要复写draw、setAlpha、setColorFilter、getOpacity四个方法，其中最核心的方法就是draw方法了。

在通常情况下，还需要实现getIntrinsicHeight和getIntrinsicWidth方法，这两个方法返回的是drawable的大小，如果我们不重写这两个方法，drawable是不会被绘制出来，因为这两个方法默认的返回值是-1。

使用自定义drawable

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zhangke.drawabledemo2.MainActivity">

<ImageView
android:id="@+id/imageview1"
android:background="#dca098"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<ImageView
android:id="@+id/imageview2"
android:layout_width="wrap_content"
android:background="#98d1dc"
android:layout_height="wrap_content" />

<ImageView
android:id="@+id/imageview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e7b3d8"/>
</LinearLayout>

ImageView imageView1 = (ImageView) findViewById(R.id.imageview1);
Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.d1);

ImageView imageView2 = (ImageView) findViewById(R.id.imageview2);
Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.d2);

ImageView imageView3 = (ImageView) findViewById(R.id.imageview3);
Bitmap bitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.d3);

imageView1.setImageDrawable(new CircleDrawable(bitmap1));
imageView2.setImageDrawable(new CircleDrawable(bitmap2));
imageView3.setImageDrawable(new CircleDrawable(bitmap3));

//        imageView1.setImageDrawable(new RoundDrawable(bitmap1));
//        imageView2.setImageDrawable(new RoundDrawable(bitmap2));
//        imageView3.setImageDrawable(new RoundDrawable(bitmap3));

圆形图片效果图：



圆角图片效果图：