前言
开发中头像的使用,我们会选择CircleImageView。实现圆角图片的方法应该很多,常见的就是利用Xfermode,Shader。下面我们就按照CircleImageView的实现方式,直接继承直接继承ImageView,使用BitmapShader实现圆角的绘制,进行简单的自定义控件
开发准备
BitmapShader
BitmapShader是Shader的子类,可以以下作用:
重复:就是横向、纵向不断重复这个bitmap
镜像:横向不断翻转重复,纵向不断翻转重复;
拉伸:这个和电脑屏保的模式应该有些不同,这个拉伸的是图片最后的那一个像素;横向的最后一个横行像素,不断的重复,纵项的那一列像素,不断的重复;
实现的方式,是通过构造传入参数确定的
mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
TileMode的三种参数:
CLAMP 拉伸
REPEAT 重复
MIRROR 镜像
BitmapShader通过设置给mPaint,然后用这个mPaint绘图时,就会根据你设置的TileMode,对绘制区域进行着色。本例中设置为CLAMP:拉伸。同时为BitmapShader设置一个matrix,去适当的放大或者缩小图片。
开发之路
首先,我们选择继承ImageView进行自定义控件,紧接着我们设计一些自定义属性
<declare-styleable name="RoundImageView">
<attr name="borderRadius" format="dimension"/>
<attr name="type" >
<!-- 可以设置模式:圆形:圆角矩形 --!>
<enum name="circle" value="0"/>
<enum name="round" value="1"/>
</attr>
</declare-styleable>
代码获取自定义属性,并初始化画笔和图形处理的Matrix:
public class RoundImageView extends ImageView{
public static final int TYPE_CIRCLE = 0;
public static final int TYPE_ROUND = 1;
public static final String STATE_INSTANCE = "state_instance";
public static final String STATE_TYPE = "state_type";
public static final String STATE_BORDER_RADIUS = "state_border_radius";
/**
* 圆角大小的默认值
*/
public static final int BODER_RADIUS_DEFAULT = 10;
private int mBorderRadius;
private int mType;
private int mWidth;
/**
* 圆角的半径
*/
private int mRadius;
/**
* 渲染图像,使用图像为绘制图形着色
*/
private BitmapShader mBitmapShader;
/**
* 3x3 矩阵,主要用于缩小放大
*/
private Matrix mMatrix;
/**
* 绘图的Paint
*/
private Paint mBitmapPaint;
private RectF mRoundRect;
public RoundImageView(Context context) {
this(context, null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundImageView,defStyle,0);
mBorderRadius = a.getDimensionPixelSize(R.styleable.RoundImageView_borderRadius, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, BODER_RADIUS_DEFAULT, getResources().getDisplayMetrics()));
mType = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);
a.recycle();
mMatrix = new Matrix();
mBitmapPaint = new Paint();
}
}
重写onMeasure方法,当类型为圆形时,让view的宽和高一致
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//如果类型是圆形,则强制改变view的宽高一致,以小值为准
if (mType == TYPE_CIRCLE){
mWidth = Math.min(getMeasuredHeight(),getMeasuredWidth());
mRadius = mWidth / 2;
setMeasuredDimension(mWidth,mWidth);
}
}
接下来就是设置BitmapShader
private void setUpShader(){
Drawable drawable = getDrawable();
if (drawable == null){
return;
}
Bitmap bmp = drawableToBitmap(drawable);
// 将bmp作为着色器,就是在指定区域内绘制bmp
mBitmapShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale = 1.0f;
if (mType == TYPE_CIRCLE){
// 拿到bitmap宽或高的小值
int bSize = Math.min(bmp.getWidth(),bmp.getHeight());
scale = mWidth * 1.0f / bSize;
}else if (mType == TYPE_ROUND){
// 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们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);
}
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;
}
代码比较简单,注释也详细,不再赘述了
在OnDraw中调用setUpShader(),进行绘制。
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null){
return;
}
setUpShader();
if (mType == TYPE_ROUND){
canvas.drawRoundRect(mRoundRect,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 (mType == TYPE_ROUND){
mRoundRect = new RectF(0,0,getWidth(),getHeight());
}
}
最后,优化一下:遇到Activity重启,View应该也能尽可能的去保存自己的属性
@Override
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable(STATE_INSTANCE,super.onSaveInstanceState());
bundle.putInt(STATE_TYPE,mType);
bundle.putInt(STATE_BORDER_RADIUS,mBorderRadius);
return bundle;
}
@Override
protected void onRestoreInstanceState(Parcelable state{
if (state instanceof Bundle){
Bundle bundle = (Bundle) state;
super.onRestoreInstanceState((Bundle) ((Bundle) state).getParcelable(STATE_INSTANCE));
this.mType = bundle.getInt(STATE_TYPE);
this.mBorderRadius = bundle.getInt(STATE_BORDER_RADIUS);
}else{
super.onRestoreInstanceState(state);
}
}
暴露动态修改圆角大小和type的方法:
public void setBorderRadius(int borderRadius){
int pxVal = dp2px(borderRadius);
if (this.mBorderRadius != pxVal){
this.mBorderRadius = pxVal;
invalidate();
}
}
public void setType(int type){
if (this.mType != type){
this.mType = type;
if (this.mType != TYPE_ROUND && this.mType != TYPE_CIRCLE){
this.mType = TYPE_CIRCLE;
}
requestLayout();
}
}
private int dp2px(int dpVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal,getResources().getDisplayMetrics());
}
自定义控件已经写完,下面就是如何使用:
xml布局:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<com.zhang.customview.widget.RoundImageView
android:id="@+id/riv_first"
android:layout_margin="10dp"
android:src="@mipmap/lake"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.zhang.customview.widget.RoundImageView
android:id="@+id/riv_second"
android:layout_margin="10dp"
android:src="@mipmap/lake"
android:layout_width="wrap_content"
app:borderRadius="20dp"
app:type="round"
android:layout_height="wrap_content" />
<com.zhang.customview.widget.RoundImageView
android:layout_margin="10dp"
android:src="@mipmap/lake"
android:layout_width="200dp"
android:layout_height="200dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Activity代码:
public class MainActivity extends AppCompatActivity {
@BindView(R.id.riv_first)
RoundImageView mRivFirst;
@BindView(R.id.riv_second)
RoundImageView mRivSecond;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
}
@OnClick({R.id.riv_first, R.id.riv_second})
public void onClick(View view) {
switch (view.getId()) {
case R.id.riv_first:
mRivFirst.setType(RoundImageView.TYPE_ROUND);
break;
case R.id.riv_second:
mRivSecond.setBorderRadius(90);
break;
}
}
}
效果图如下
如还有问题,请查阅: