Android圆角图片最简单的实现方法详解

1. 前言：

在平时的开发中，我们在显示图片是有时候需要显示圆角图片，我们应该都知道圆角显示肯定是更加耗费内存和性能，会导致图片的过度绘制等问题。但是有时候产品的设计就是这样，我们开发也不得不做，本篇文章讲一下最基本的圆角图片实现方法：

2. 原理讲解之Paint.setXfermode：

2.1 Paint.setXfermode就是本次实现圆角图片的关键地方：

       /**
         * 我简单理解为设置画笔在绘制时图形堆叠时候的显示模式
         * SRC_IN:取两层绘制交集。显示上层。
         */
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

这个方法很复杂，我这里只是为本次使用做出解释，这个方法大概的意思就是：设置画笔在绘制时图形堆叠时候的显示模式。画笔在绘制时图形堆叠时候的显示模式有16种之多，google也给出了图文解释：

看上图就可以知道，就是两个view堆叠在一起的时候是怎么现实的，是显示交集部分，非交集部分，交集部分的上层还是下层等等。
具体的PorterDuff.Mode请看：

1.PorterDuff.Mode.CLEAR

   所绘制不会提交到画布上。

2.PorterDuff.Mode.SRC

   显示上层绘制图片

3.PorterDuff.Mode.DST

  显示下层绘制图片

4.PorterDuff.Mode.SRC_OVER

  正常绘制显示，上下层绘制叠盖。

5.PorterDuff.Mode.DST_OVER

  上下层都显示。下层居上显示。

6.PorterDuff.Mode.SRC_IN

   取两层绘制交集。显示上层。

7.PorterDuff.Mode.DST_IN

  取两层绘制交集。显示下层。

8.PorterDuff.Mode.SRC_OUT

 取上层绘制非交集部分。

9.PorterDuff.Mode.DST_OUT

 取下层绘制非交集部分。

10.PorterDuff.Mode.SRC_ATOP

 取下层非交集部分与上层交集部分

11.PorterDuff.Mode.DST_ATOP

  取上层非交集部分与下层交集部分

12.PorterDuff.Mode.XOR
    现实非交集部分
13.PorterDuff.Mode.DARKEN

14.PorterDuff.Mode.LIGHTEN

15.PorterDuff.Mode.MULTIPLY

16.PorterDuff.Mode.SCREEN

2.2 圆角图片实现原理：

3. 代码讲解

自定义控件的基本步骤就是测量控件大小，确定控件位置，绘制控件，我们这个圆角图片控件是不需要确定控件位置。

3.1 createRoundConerImage把源图片圆角显示：

原理上面讲了，先绘制一个圆角矩形，再把我们的源图片绘制在这个圆角矩形的画布上，画笔的显示模式是SRC_IN，取上层交集部分，直接看代码：

    /**
     * 根据给定的图片和已经测量出来的宽高来绘制圆角图形
     * 原理：
     * 基本原理就是先画一个圆角的图形出来，然后在圆角图形上画我们的源图片，
     * 圆角图形跟我们的源图片堆叠时我们取交集并显示上层的图形
     * 原理就是这样，很简单。
     */
    private Bitmap createRoundConerImage(Bitmap source){
        final Paint paint = new Paint();
        /**开启抗锯齿**/
        paint.setAntiAlias(true);
        /****/
        Bitmap target  = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        /**
         * Construct a canvas with the specified bitmap to draw into. The       bitmapmust be mutable
         * 以bitmap对象创建一个画布，则将内容都绘制在bitmap上，bitmap不得为null;
         */
        Canvas canvas = new Canvas(target);
        /**新建一个矩形绘制区域,并给出左上角和右下角的坐标**/
        RectF rect = new RectF(0 , 0 ,mWidth ,mHeight);
        /**
         * 把图片缩放成我们想要的大小
         */
        source = Bitmap.createScaledBitmap(source,mWidth,mHeight,false);
        /**在绘制矩形区域绘制用画笔绘制一个圆角矩形**/
        canvas.drawRoundRect(rect ,mRadius ,mRadius ,paint);
        /**
         * 我简单理解为设置画笔在绘制时图形堆叠时候的显示模式
         * SRC_IN:取两层绘制交集。显示上层。
         */
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source ,0 ,0 ,paint);
        /****/
        return target;
    }

需要注意，我们在绘制第二层，也就是我们的源图片的时候，所需要的绘制矩形的宽高一定是跟我们测量的宽高是一直的，要是图片的本身的宽高与测量得到的宽高不一致时，我们就对源图片进行缩放，所以会有下面的代码：

        /**新建一个矩形绘制区域,并给出左上角和右下角的坐标**/
        /**mWidt和mHeight是测量得到的控件宽高 **/
        RectF rect = new RectF(0 , 0 ,mWidth ,mHeight);
        /**
         * 把图片缩放成我们想要的大小
         */
        source = Bitmap.createScaledBitmap(source,mWidth,mHeight,false);

3.2 onMeasure测量控件大小：

    /**
     * 测量控件大小
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.d("danxx" ,"onMeasure");
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**获取宽高的测量模式**/
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        /**获取宽高的尺寸**/
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        /**
         * 测量宽度
         */
        if(widthSpecMode == MeasureSpec.EXACTLY){  //宽为具体值或者是填满父控件就直接赋值 match_parent , accurate
            mWidth = widthSpecSize;
        }else{
            /**图片显示时原始大小**/
            int srcWidth = mSrc.getWidth() + getPaddingLeft() + getPaddingRight();
            if(widthSpecMode == MeasureSpec.AT_MOST){ //wrap_content,子控件不能超过父控件,此时我们取传递过来的大小和图片本身大小的小者
                mWidth = Math.min(widthSpecSize , srcWidth);
            }else{
                //没有要求，可以随便大小
                mWidth = srcWidth;
            }
        }

        /**
         * 测量高度，逻辑跟测量宽度是一样的
         */
        if(heightSpecMode == MeasureSpec.EXACTLY){  //match_parent , accurate
            mHeight = heightSpecSize;
        }else{
            /**图片显示时原始大小**/
            int srcHeigth = mSrc.getHeight() + getPaddingTop() + getPaddingBottom();
            if(heightSpecMode == MeasureSpec.AT_MOST){ //wrap_content
                mHeight = Math.min(heightSpecSize , srcHeigth);
            }else{
                //没有要求，可以随便大小
                mHeight = srcHeigth;
            }
        }
        setMeasuredDimension(mWidth ,mHeight);
    }

宽高分两次测量，下面简单介绍一下控件的测量：
控件的测量就是处理我们在创建控件时设置的宽高大小，一般非为三种情况，具体宽高值、填满父控件，包含内容。在OnMeasure方法中我们使用MeasureSpec来获取控件宽高到底是哪一种情况。

一个MeasureSpec封装了父布局传递给子布局的布局要求，每个MeasureSpec代表了一组宽度和高度的要求。

三种测量模式解释：

• UNSPECIFIED：父布局没有给子布局任何限制，子布局可以任意大小。
• EXACTLY：父布局决定子布局的确切大小。不论子布局多大，它都必须限制在这个界限里。match_parent
• AT_MOST：此时子控件尺寸只要不超过父控件允许的最大尺寸,子布局可以根据自己的大小选择任意大小。wrap_content

简单的映射关系:

• wrap_content -> MeasureSpec.AT_MOST
• match_parent -> MeasureSpec.EXACTLY
• 具体值 -> MeasureSpec.EXACTLY

3.3 onDraw绘制控件：

    /**
     * 绘制控件
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        Log.d("danxx" ,"onDraw");
//        super.onDraw(canvas);
        canvas.drawBitmap(createRoundConerImage(mSrc) ,0 ,0 ,null);
    }

4. 全部代码：

package danxx.library.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import danxx.library.R;

/**
 * Created by Danxx on 2016/7/29.
 * 最简单的方式实现圆角图片
 */
public class SampleCircleImageView extends View {
    /**
     * 默认圆角大小
     */
    private static final int DEFUALT_RADIUS = 20;
    /**
     * 源图片
     */
    private Bitmap mSrc;
    /**
     * 圆角大小，默认为20
     */
    private int mRadius = DEFUALT_RADIUS;
    /**
     * 控件的宽度
     */
    private int mWidth;
    /**
     * 控件的高度
     */
    private int mHeight;
    private Context mContext;


    public SampleCircleImageView(Context context) {
        super(context);
        init(context ,null ,0);
    }

    public SampleCircleImageView(Context context ,Bitmap bitmap) {
        super(context);
        Log.d("danxx" ,"create SampleCircleImageView");
        this.mSrc = bitmap;
        init(context ,null ,0);
    }

    public SampleCircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context ,attrs ,0);
    }

    public SampleCircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context ,attrs ,defStyleAttr);
    }

    private void init(Context context ,AttributeSet attrs ,int defStyleAttr){
        mContext = context;
        if(attrs != null){
            /**Load the styled attributes and set their properties**/
            TypedArray typedArray = context.obtainStyledAttributes(attrs , R.styleable.SampleCircleImageView ,defStyleAttr ,0);
            mSrc = BitmapFactory.decodeResource(context.getResources() ,typedArray.getResourceId(R.styleable.SampleCircleImageView_src ,0));
            mRadius = (int) typedArray.getDimension(R.styleable.SampleCircleImageView_radius ,dp2px(DEFUALT_RADIUS));
            typedArray.recycle();
        }

    }

    /**
     * 测量控件大小
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.d("danxx" ,"onMeasure");
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 一个MeasureSpec封装了父布局传递给子布局的布局要求，每个MeasureSpec代表了一组宽度和高度的要求。
         * 三种测量模式解释：
         *  UNSPECIFIED：父布局没有给子布局任何限制，子布局可以任意大小。
         *  EXACTLY：父布局决定子布局的确切大小。不论子布局多大，它都必须限制在这个界限里。match_parent
         *  AT_MOST：此时子控件尺寸只要不超过父控件允许的最大尺寸,子布局可以根据自己的大小选择任意大小。wrap_content
         *
         * 简单的映射关系：
         *  wrap_content -> MeasureSpec.AT_MOST
         *  match_parent -> MeasureSpec.EXACTLY
         *  具体值 -> MeasureSpec.EXACTLY
         */

        /**获取宽高的测量模式**/
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        /**获取宽高的尺寸**/
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        /**
         * 测量宽度
         */
        if(widthSpecMode == MeasureSpec.EXACTLY){  //宽为具体值或者是填满父控件就直接赋值 match_parent , accurate
            mWidth = widthSpecSize;
        }else{
            /**图片显示时原始大小**/
            int srcWidth = mSrc.getWidth() + getPaddingLeft() + getPaddingRight();
            if(widthSpecMode == MeasureSpec.AT_MOST){ //wrap_content,子控件不能超过父控件,此时我们取传递过来的大小和图片本身大小的小者
                mWidth = Math.min(widthSpecSize , srcWidth);
            }else{
                //没有要求，可以随便大小
                mWidth = srcWidth;
            }
        }

        /**
         * 测量高度，逻辑跟测量宽度是一样的
         */
        if(heightSpecMode == MeasureSpec.EXACTLY){  //match_parent , accurate
            mHeight = heightSpecSize;
        }else{
            /**图片显示时原始大小**/
            int srcHeigth = mSrc.getHeight() + getPaddingTop() + getPaddingBottom();
            if(heightSpecMode == MeasureSpec.AT_MOST){ //wrap_content
                mHeight = Math.min(heightSpecSize , srcHeigth);
            }else{
                //没有要求，可以随便大小
                mHeight = srcHeigth;
            }
        }
        setMeasuredDimension(mWidth ,mHeight);
    }

    /**
     * 绘制控件
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        Log.d("danxx" ,"onDraw");
//        super.onDraw(canvas);
        canvas.drawBitmap(createRoundConerImage(mSrc) ,0 ,0 ,null);
    }

    /**
     * 设置圆角大小
     * @param radius
     */
    public void setRadius(int radius){
        this.mRadius = radius;
    }

    /**
     * 设置图片
     * @param bitmap
     */
    public void setSrc(Bitmap bitmap){
        this.mSrc = bitmap;
    }

    /**
     * 根据给定的图片和已经测量出来的宽高来绘制圆角图形
     * 原理：
     * 基本原理就是先画一个圆角的图形出来，然后在圆角图形上画我们的源图片，
     * 圆角图形跟我们的源图片堆叠时我们取交集并显示上层的图形
     * 原理就是这样，很简单。
     */
    private Bitmap createRoundConerImage(Bitmap source){
        final Paint paint = new Paint();
        /**开启抗锯齿**/
        paint.setAntiAlias(true);
        /****/
        Bitmap target  = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        /**
         * Construct a canvas with the specified bitmap to draw into. The bitmapmust be mutable
         * 以bitmap对象创建一个画布，则将内容都绘制在bitmap上，bitmap不得为null;
         */
        Canvas canvas = new Canvas(target);
        /**新建一个矩形绘制区域,并给出左上角和右下角的坐标**/
        RectF rect = new RectF(0 , 0 ,mWidth ,mHeight);
        /**
         * 把图片缩放成我们想要的大小
         */
        source = Bitmap.createScaledBitmap(source,mWidth,mHeight,false);
        /**在绘制矩形区域绘制用画笔绘制一个圆角矩形**/
        canvas.drawRoundRect(rect ,mRadius ,mRadius ,paint);
        /**
         * 我简单理解为设置画笔在绘制时图形堆叠时候的显示模式
         * SRC_IN:取两层绘制交集。显示上层。
         */
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source ,0 ,0 ,paint);
        /****/
        return target;
    }

    protected int sp2px(float spValue) {
        final float fontScale = mContext.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

    protected int dp2px(float dp) {
        final float scale = mContext.getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

}

5. 效果图和源码地址：

GitHub源码地址https://github.com/Dawish

三种宽高设置模式都有：

xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:danxx="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1. 180*120:"/>
        <danxx.library.widget.SampleCircleImageView
            android:layout_marginTop="6dp"
            android:layout_width="180dp"
            android:layout_height="120dp"
            danxx:src="@drawable/image"
            danxx:radius="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="2. wrap_content*wrap_content:"/>
        <danxx.library.widget.SampleCircleImageView
            android:layout_marginTop="6dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            danxx:src="@drawable/vp1"
            danxx:radius="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="3. match_parent*wrap_content:"/>
        <danxx.library.widget.SampleCircleImageView
            android:layout_marginTop="6dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            danxx:src="@drawable/vp2"
            danxx:radius="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="4. wrap_content*wrap_content:"/>
        <danxx.library.widget.SampleCircleImageView
            android:layout_marginTop="6dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            danxx:src="@drawable/test2"
            danxx:radius="10dp"/>
    </LinearLayout>
</ScrollView>

attrs文件：

<?xml version="1.0" encoding="utf-8"?> 
<resources>
 <declare-styleable name="SampleCircleImageView"> 
 <!-- 源图片 --> 
 <attr name="src" format="reference"></attr>
 <!-- 圆角大小 --> 
 <attr name="radius" format="dimension"></attr> 
 </declare-styleable> 
 </resources>

效果图：