一、简介
因为项目需求,需要实现圆形头像框,在参考了鸿洋大神的 http://blog.csdn.net/lmj623565791/article/details/41967509 文章之后,通过BitmapShader实现了圆形头像框,下面是效果展示以及具体的实现过程。
二、效果展示
三、实现思路
想要实现圆形头像框,有以下几个注意点:
1.保持控件的宽高一致:因为是圆形头像框,所以需要强行设置控件的height和width一致。
2.缩放图片至合适的大小: 图片的大小可能比我们的控件大,也可能比我们的控件小,需要通过缩放图片的大小以适应我们的控件。
3.在控件区域内绘制圆形头像: 我们不能直接将控件设置为圆形,所以实现圆形头像框实际上就是将图片以圆形的样式绘制在我们的控件上。
所以,只要我们能够实现以上三点,就能够实现圆形头像框的绘制。
四、实现过程
1.保持控件的宽高一致
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 取view长宽的较小值,除以2作为圆的半径,并重新设置View的大小
mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
mRadius = mWidth / 2;
setMeasuredDimension(mWidth, mWidth);
}
复写onMeasure方法,通过Math.min方法比较获取宽高的较小值后,利用setMeasuredDimension强制使得宽高一致。圆的半径为宽高最小值的1/2。
2.缩放图片至合适的大小:
/**
* 获取缩放比例
*/
private float getScale(Bitmap bmp) {
float scale;
int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
scale = mWidth * 1.0f / bSize;
return scale;
}
首先,我们要获取图片的缩放比例。在这里,我采用图片宽高的较小值与控件的width作比较(mWidth是计算之后的宽,与高度保持一致大小),因为使用较大值进行缩放之后的图片不能填满我们的控件。
// shader的变换矩阵,对图片进行缩放
mMatrix.setScale(scale, scale)