Android——RoundedImageView应用及源码总结笔记

最新推荐文章于 2024-06-22 00:29:03 发布

Zh1Hao的笔记

最新推荐文章于 2024-06-22 00:29:03 发布

阅读量1.2k

点赞数

分类专栏： Andriod 文章标签： android 源码

本文链接：https://blog.csdn.net/wzhworld/article/details/77412091

版权

Andriod 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

介绍

源码参考文章，RoundedImageView是用来对图片进行裁剪，可以在代码块中实现，也可以在布局xml中实现。

github源码地址：https://github.com/vinc3m1/RoundedImageView

作者对这个开源框架的评价就是

There are many ways to create rounded corners in android, but this is the fastest and best one that I know of because it:

does not create a copy of the original bitmap
does not use a clipPath which is not hardware accelerated and not anti-aliased.
does not use setXfermode to clip the bitmap and draw twice to the canvas.

第一是无需对原始的bitmap进行复制，第二是不需硬件上的加速和反锯齿，第三是没有使用用Xfermode，所以需要使用画布处理两次

应用

第一个当然是对库的支持

compile 'com.makeramen:roundedimageview:2.3.0'

在xml文件中引用：

<com.makeramen.roundedimageview.RoundedImageView  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        android:id="@+id/imageView1"  
        android:src="@drawable/photo1"  
        android:scaleType="fitCenter"  
        app:riv_corner_radius="30dip"  
        app:riv_border_width="2dip"  
        app:riv_border_color="#333333"  
        app:riv_mutate_background="true"  
        app:riv_tile_mode="repeat"  
        app:riv_oval="true" />

在代码中引用：

RoundedImageView riv = new RoundedImageView(context);  
riv.setScaleType(ScaleType.CENTER_CROP);  
riv.setCornerRadius((float) 10);  
riv.setBorderWidth((float) 2);  
riv.setBorderColor(Color.DKGRAY);  
riv.mutateBackground(true);  
riv.setImageDrawable(drawable);  
riv.setBackground(backgroundDrawable);  
riv.setOval(true);  
riv.setTileModeX(Shader.TileMode.REPEAT);  
riv.setTileModeY(Shader.TileMode.REPEAT);

可以参考下别人详细的实现过程http://blog.csdn.net/aaawqqq/article/details/38057145

开始

RoundedImageView主要的核心是在RoundedDrawer所以核心是对于RoundedDrawer的分析

一、Drawable转化为圆角的Drawable

1、构造方法

public RoundedDrawable(Bitmap bitmap) {  
    mBitmap = bitmap;  
  
    mBitmapWidth = bitmap.getWidth();  
    mBitmapHeight = bitmap.getHeight();  
    mBitmapRect.set(0, 0, mBitmapWidth, mBitmapHeight);  
  
    mBitmapPaint = new Paint();  
    mBitmapPaint.setStyle(Paint.Style.FILL);  
    mBitmapPaint.setAntiAlias(true);  
  
    mBorderPaint = new Paint();  
    mBorderPaint.setStyle(Paint.Style.STROKE);  
    mBorderPaint.setAntiAlias(true);  
    mBorderPaint.setColor(mBorderColor.getColorForState(getState(), DEFAULT_BORDER_COLOR));  
    mBorderPaint.setStrokeWidth(mBorderWidth);  
  }

用到了2个Paint，分别是mBitmapPaint和mBorderPaint。一个用于绘制内部具体内容，比如填充什么的，一个用于绘制边框。

这里就能用来解释为什么上面作者说的第三点没使用setXfermode所以需要使用画布画两次，如果使用setXfermode进行绘制就只需要一次。

2、fromDrawable方法

public static Drawable fromDrawable(Drawable drawable) {
    if (drawable != null) {
      if (drawable instanceof RoundedDrawable) {
        // just return if it's already a RoundedDrawable
        return drawable;
      } else if (drawable instanceof LayerDrawable) {
        LayerDrawable ld = (LayerDrawable) drawable;
        int num = ld.getNumberOfLayers();

        // loop through layers to and change to RoundedDrawables if possible
        for (int i = 0; i < num; i++) {
          Drawable d = ld.getDrawable(i);
          ld.setDrawableByLayerId(ld.getId(i), fromDrawable(d));
        }
        return ld;
      }

      // try to get a bitmap from the drawable and
      Bitmap bm = drawableToBitmap(drawable);
      if (bm != null) {
        return new RoundedDrawable(bm);
      }
    }
    return drawable;
  }

这个方法中我们可以看到如果drawable本身就是RoundedDrawable，那么直接返回，如果不是就每一个LayoutDrawable的item改造成RoundedDrawable，我们可以看到其中使用fromDrawable的递归调用改造。

后将drawable转成bitmap后直接返回RoundedDrawable

3、生成圆角Draw

@Override  
  public void draw(@NonNull Canvas canvas) {  
    if (mRebuildShader) {  
      BitmapShader bitmapShader = new BitmapShader(mBitmap, mTileModeX, mTileModeY);  
      if (mTileModeX == Shader.TileMode.CLAMP && mTileModeY == Shader.TileMode.CLAMP) {  
        bitmapShader.setLocalMatrix(mShaderMatrix);  
      }  
      mBitmapPaint.setShader(bitmapShader);  
      mRebuildShader = false;  
    }  
  
    if (mOval) {  
      if (mBorderWidth > 0) {  
        canvas.drawOval(mDrawableRect, mBitmapPaint);  
        canvas.drawOval(mBorderRect, mBorderPaint);  
      } else {  
        canvas.drawOval(mDrawableRect, mBitmapPaint);  
      }  
    } else {  
      if (any(mCornersRounded)) {  
        float radius = mCornerRadius;  
        if (mBorderWidth > 0) {  
          canvas.drawRoundRect(mDrawableRect, radius, radius, mBitmapPaint);  
          canvas.drawRoundRect(mBorderRect, radius, radius, mBorderPaint);  
          redrawBitmapForSquareCorners(canvas);  
          redrawBorderForSquareCorners(canvas);  
        } else {  
          canvas.drawRoundRect(mDrawableRect, radius, radius, mBitmapPaint);  
          redrawBitmapForSquareCorners(canvas);  
        }  
      } else {  
        canvas.drawRect(mDrawableRect, mBitmapPaint);  
        if (mBorderWidth > 0) {  
          canvas.drawRect(mBorderRect, mBorderPaint);  
        }  
      }  
    }  
  }

我们先看看第4行代码，这里用到BitmapShader，这里表明，圆角是通过BitmapShader实现的。接下来我们看到BitmapShader调用了setLocalMatrix方法，最后mBitmapPaint.setShader(bitmapShader);将bitmapShader设置给mBitmapPaint。

我们可以看到里面有一个判断就是判断是否要求剪裁为圆角，如果是那么就就对其四周都剪裁成圆角，如果不是的话就使用

redrawBitmapForSquareCorners(canvas);

方法，将已经是圆角的恢复成直角，有兴趣可以看下源码，他是绘制一个正方形填充圆角的部分。

4、ScaleType

public RoundedDrawable setScaleType(ScaleType scaleType) {
    if (scaleType == null) {
      scaleType = ScaleType.FIT_CENTER;
    }
    if (mScaleType != scaleType) {
      mScaleType = scaleType;
      updateShaderMatrix();
    }
    return this;
  }

这里就是对于ScaleType的支持，相关的操作在updateShaderMatrix（）方法里面，就fitCenter等等，有兴趣可以进去看看

二、src属性

1、重写setImageDrawable，setImageBitmap和setImageResource

@Override  
 public void setImageDrawable(Drawable drawable) {  
   mResource = 0;  
   mDrawable = RoundedDrawable.fromDrawable(drawable);  
   updateDrawableAttrs();  
   super.setImageDrawable(mDrawable);  
 }  
  
 @Override  
 public void setImageBitmap(Bitmap bm) {  
   mResource = 0;  
   mDrawable = RoundedDrawable.fromBitmap(bm);  
   updateDrawableAttrs();  
   super.setImageDrawable(mDrawable);  
 }  
  
 @Override  
 public void setImageResource(@DrawableRes int resId) {  
   if (mResource != resId) {  
     mResource = resId;  
     mDrawable = resolveResource();  
     updateDrawableAttrs();  
     super.setImageDrawable(mDrawable);  
   }  
 }

这两个方法都是获取Drawable之后进入UpdateDrawableAttrs（），那我们就进去看看里面是什么

private void updateDrawableAttrs() {  
    updateAttrs(mDrawable);  
  }

继续进入updateAttrs

private void updateAttrs(Drawable drawable) {  
    if (drawable == null) { return; }  
  
    if (drawable instanceof RoundedDrawable) {  
      ((RoundedDrawable) drawable)  
          .setScaleType(mScaleType)  
          .setBorderWidth(mBorderWidth)  
          .setBorderColor(mBorderColor)  
          .setOval(mIsOval)  
          .setTileModeX(mTileModeX)  
          .setTileModeY(mTileModeY);  
  
      if (mCornerRadii != null) {  
        ((RoundedDrawable) drawable).setCornerRadius(  
            mCornerRadii[Corner.TOP_LEFT],  
            mCornerRadii[Corner.TOP_RIGHT],  
            mCornerRadii[Corner.BOTTOM_RIGHT],  
            mCornerRadii[Corner.BOTTOM_LEFT]);  
      }  
  
      applyColorMod();  
    } else if (drawable instanceof LayerDrawable) {  
      // loop through layers to and set drawable attrs  
      LayerDrawable ld = ((LayerDrawable) drawable);  
      for (int i = 0, layers = ld.getNumberOfLayers(); i < layers; i++) {  
        updateAttrs(ld.getDrawable(i));  
      }  
    }  
  }

这部分代码跟第一点的fromDrawable()方法有点类似，判断如果是RoundedDrawable那我们就设置相关属性，如果不是那就把LayoutDrawable重新提取传去updateAttrs（），到这里的圆角属性就可以实现

三、background属性

@Override  
  public void setBackground(Drawable background) {  
    setBackgroundDrawable(background);  
  }  
  
@Override  
  @Deprecated  
  public void setBackgroundDrawable(Drawable background) {  
    mBackgroundDrawable = background;  
    updateBackgroundDrawableAttrs(true);  
    super.setBackgroundDrawable(mBackgroundDrawable);  
  }

这两个函数都用到了setBackgroundDrawable（），那我们进去看看

private void updateBackgroundDrawableAttrs(boolean convert) {  
    if (mMutateBackground) {  
      if (convert) {  
        mBackgroundDrawable = RoundedDrawable.fromDrawable(mBackgroundDrawable);  
      }  
      updateAttrs(mBackgroundDrawable);  
    }  
  }

这里面涉及到mMutateBackground属性，如果mMutateBackground为true，并且传入的参数也为true的话，会调用RoundedDrawable的方法把mBackgroundDrawable转化为圆角，最后通过之前讲的updateAttrs(Drawable)方法实现更新mBackgroundDrawable有关RoundedDrawable的属性。

这里就是设置背景是否设置为圆角，可以在xml里面设置也可以在代码里面设置

xml里面设置app:riv_mutate_background="true"或者再代码里面riv.mutateBackground(true)。