一个简单的自定义圆角ImageView
最近在学自定义View的过程,然后想到有个很常用的圆形头像View,想自己动手实现一下,以为自己应该可以实现一个简单的圆角ImageView,真正写起来才发现还有很多知识点不懂。起初的思路是想把图片画上去然后扣个圆出来,然后发现图片画上去了不知道怎么扣,这就很尴尬了。最终实在不行就跟着鸿洋大神的文章实现了一个,文章里的思路是给Paint设置一个BitmapShader看完才发现,卧槽,还能这样。果然是基础不够哇。下面是文章的链接,
接下来我在这里做一下思路的总结
1. 继承现有的ImageView
直接继承ImageView的话会有个提示:This custom view should extend android.support.v7.widget.AppCompatImageView,改成继承AppCompatImageView就可以了,主要是为了兼容低版本
2. 添加自定义属性
我们可以在values/attrs.xml中添加自定义属性,然后需要在我们的自定义View的两参数的构造函数中通过TypeArray获取到我们自定义控件属性的值。在布局文件中加上:xmlns:app=“http://schemas.android.com/apk/res-auto”,这样我们就可以使用自己的自定义属性了,其中“app”这个名字是可以随意更换的。
在这个例子中我们添加了两个属性:图片的类型是圆角或圆形(type),圆角大小(borderRadius)
<attr name="borderRadius" format="dimension"/>
<attr name="type">
<enum name="circle" value="0"/>
<enum name="round" value="1"/>
</attr>
<declare-styleable name="CircleImageView">
<attr name="borderRadius"/>
<attr name="type"/>
</declare-styleable>
3. 重写onMeasure
在onMeasure方法里面,我们调用父类的onMeasure方法,然后对图片类型为圆形时做特殊处理,让图片的宽和高相等
4. 初始化BitmapShader
整个我们的自定义圆角控件的核心就是这个东西了。BitmapShader是什么,简单来说就是着色器,它是shader的子类。我们通过getDrawable()方法获取到图片资源,然后把Drawable转化成Bitmap。然后再初始化我们的BitmapShader,BitmapShader构造方法接收三个参数,第一个是Bitmap,第二三个分别是x,y轴上的铺盖模式(具体解释大家可以百度查一下,在这里我只是说一下简单的思路)。然后我们需要用到Matrix类对我们的BitmapShader进行缩放,然后通过bitmapShader.setLocalMatrix(mMatrix),设置缩放矩阵。最终通过mPaint.setShader(bitmapShader),把初始化的BitmapShader注入到我们要用的画笔上
5. 画图
最后,也就是作者最熟练的一步了,画图。判断一下是要画圆形还是圆角矩形,把我们设置好的画笔画上去就好了。
下面是完整的源码:
/**
* @author: created by linjunhao
* @date: 2019/4/22 22:57
* @description: 实现简单的圆角图像
*/
public class CircleImageView extends AppCompatImageView {
/**
* 图片类型,圆角或圆形
*/
private int type;
public static final int TYPE_CIRCLE = 0;
public static final int TYPE_ROUND = 1;
/**
* 圆角大小的默认值
*/
private static final int BORDER_RADIUS_DEFAULT = 10;
/**
* 圆角大小
*/
private int mBorderRadius;
/**
* 圆角半径
*/
private int mRadius;
private Paint mBitmapPaint;
/**
* 3x3矩阵,主要用于缩小放大
*/
private Matrix mMatrix;
/**
* 渲染图象,使用图像为绘制图形着色
*/
private BitmapShader mBitmapShader;
private int mWidth;
private RectF mRoundRectF;
public CircleImageView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mMatrix = new Matrix();
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView);
/**
* 获取圆角值,默认为10dp
*/
mBorderRadius = typedArray.getDimensionPixelOffset(R.styleable.CircleImageView_borderRadius,
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, BORDER_RADIUS_DEFAULT, getResources().getDisplayMetrics()));
/**
* 获取View类型(默认为圆形)
*/
type = typedArray.getInt(R.styleable.CircleImageView_type, TYPE_CIRCLE);
typedArray.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/**
* 如果类型为圆形,则强制使View的宽高一致,以宽高最小值为准
*/
if (type == TYPE_CIRCLE) {
mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
mRadius = mWidth / 2;
setMeasuredDimension(mWidth, mWidth);
}
}
/**
* 初始化BitmapShader
*/
private void setUpShader() {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
Bitmap bmp = drawableToBitmap(drawable);
mBitmapShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale = 1.0f;
if (type == TYPE_CIRCLE) {
//获取bitmap宽高的最小值
int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
scale = mWidth * 1.0f / bSize;
} else if (type == TYPE_ROUND) {
//如果图片的宽高与view的宽高不匹配,计算出需要缩放的比例
scale = Math.max(getWidth() * 1.0f / bmp.getWidth(),
getHeight() * 1.0f / bmp.getHeight());
}
//shader的变换矩阵,我们这里主要用于放大或者缩小
mMatrix.setScale(scale, scale);
//设置变换矩阵
mBitmapShader.setLocalMatrix(mMatrix);
//设置shader
mBitmapPaint.setShader(mBitmapShader);
}
/**
* drawable转bitmap
* @param drawable
* @return Bitmap
*/
private Bitmap drawableToBitmap(Drawable drawable) {
if (drawable instanceof BitmapDrawable) {
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
int w = drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null) {
return;
}
setUpShader();
if (type == TYPE_ROUND) {
canvas.drawRoundRect(mRoundRectF, mBorderRadius, mBorderRadius, mBitmapPaint);
} else {
canvas.drawCircle(mRadius, mRadius,mRadius, mBitmapPaint);
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
/**
* 圆角图片范围
*/
if (type == TYPE_ROUND) {
mRoundRectF = new RectF(0, 0, getWidth(), getHeight());
}
}
public void setBorderRadius(int borderRadius) {
int pxVal = dp2px(borderRadius);
if (this.mBorderRadius != pxVal) {
this.mBorderRadius = pxVal;
invalidate();
}
}
/**
* 改变图片显示效果
* @param type
*/
public void setType(int type) {
if (this.type != type) {
this.type = type;
if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE) {
this.type = TYPE_CIRCLE;
}
requestLayout();
}
}
public int dp2px(int dpVal) {
return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dpVal, getResources().getDisplayMetrics());
}
}
推荐阅读
-
Android编程简单实现ImageView点击时背景图修改的方法
-
iOS自定义日历控件的简单实现过程
-
C#实现一个简单实用的TXT文本操作及日志框架详解
-
在ASP.NET 2.0中操作数据之六十:创建一个自定义的Database-Driven Site Map Provider
-
java 使用线程做的一个简单的ATM存取款实例代码
-
C#使用TcpListener及TcpClient开发一个简单的Chat工具实例
-
PHP简单判断字符串是否包含另一个字符串的方法
-
java 字符串相减(很简单的一个方法)
-
Android实现自定义圆角对话框Dialog的示例代码
-
ps 绘制一个简单的绿色晶莹剔透的水晶苹果图标