之前项目中的圆角图片控件是通过对ImageView
的图片转换为Bitmap
,在Bitmap
的基础上实现的图片圆角。因为要对图片资源进行Bitmap
转换,所以很担心在app
中图片资源非常多的时候造成内存溢出或程序卡顿。所以换成了下面的方式实现圆角图片,原理非常简单,通过canvas
的clipPath
方法,剪裁整个canvas
以达到实现图片圆角的目的。
对比通过Bitmap实现的方案,
- 优点:实现简单,不操作
Bitmap
,所以不会增加内存负担 - 缺点:当图片内容宽高小于整个控件的宽高时,由于裁掉的区域在
canvas
的四个角,这个时候看到的图片就不是圆角的;而操作Bitmap
实现圆角图片,由于直接对图片做了圆角处理,是可以显示为圆角图片的
效果演示:
- 上面的图片:图片内容宽高大于等于控件宽高,
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
的图片