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

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

圆形图片效果图：

圆角图片效果图：