Android高性能的圆角图片控件RoundImageView

之前项目中的圆角图片控件是通过对ImageView的图片转换为Bitmap，在Bitmap的基础上实现的图片圆角。因为要对图片资源进行Bitmap转换，所以很担心在app中图片资源非常多的时候造成内存溢出或程序卡顿。所以换成了下面的方式实现圆角图片，原理非常简单，通过canvas的clipPath方法，剪裁整个canvas以达到实现图片圆角的目的。

对比通过Bitmap实现的方案，

• 优点：实现简单，不操作Bitmap，所以不会增加内存负担
• 缺点：当图片内容宽高小于整个控件的宽高时，由于裁掉的区域在canvas的四个角，这个时候看到的图片就不是圆角的；而操作Bitmap实现圆角图片，由于直接对图片做了圆角处理，是可以显示为圆角图片的

效果演示：

device-2017-08-24-164132.png

• 上面的图片：图片内容宽高大于等于控件宽高，canvas裁掉的区域在四个角，这个时候显示出来的是圆角图片
• 下面的图片：图片内容宽高小于控件宽高，canvas裁掉的区域在四个角，这个时候显示出来的不是圆角图片

实现方式

package com.hpplay.muiltythreaddemo.roundimageview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by DON on 2017/8/22.
 */

public class RoundImageView extends ImageView {

    private int radius = 20;

    public RoundImageView(Context context) {
        this(context, null);
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setRadius(int radius) {
        this.radius = radius;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        path.addRoundRect(new RectF(0, 0, getWidth(), getHeight()), radius, radius, Path.Direction.CW);
        canvas.clipPath(path);//设置可显示的区域，canvas四个角会被剪裁掉
        super.onDraw(canvas);
    }
}

使用示例

package com.hpplay.muiltythreaddemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.hpplay.muiltythreaddemo.roundimageview.RoundImageView;

/**
 * Created by DON on 2017/8/22.
 */

public class RoundImageViewFragment extends Fragment{
    private RelativeLayout rootLayout;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        rootLayout = new RelativeLayout(getActivity());
        return rootLayout;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        RoundImageView roundImageView = new RoundImageView(getActivity());
        roundImageView.setImageResource(R.drawable.im5);
        //图片内容宽高大于等于控件宽高，canvas裁掉的区域在四个角，这个时候显示出来的是圆角图片
        roundImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(400,400);
        params.addRule(RelativeLayout.CENTER_HORIZONTAL);
        params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        params.topMargin = 100;
        rootLayout.addView(roundImageView,params);

        RoundImageView roundImageView2 = new RoundImageView(getActivity());
        roundImageView2.setImageResource(R.drawable.im5);
        //图片内容宽高小于控件宽高，canvas裁掉的区域在四个角，这个时候显示出来的不是圆角图片
        roundImageView2.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(400,400);
        params2.addRule(RelativeLayout.CENTER_HORIZONTAL);
        params2.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        params2.bottomMargin = 100;
        rootLayout.addView(roundImageView2,params2);

    }


}

一言以蔽之，clipPath实现圆角，是剪裁ImageView的画布（canvas）；而操作Bitmap实现圆角，是剪裁ImageView的图片