Android CircleImageView 源码阅读

最新推荐文章于 2022-08-22 20:06:08 发布
最新推荐文章于 2022-08-22 20:06:08 发布
阅读量250 收藏
点赞数
分类专栏： # 开源阅读 Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MoLiao2046/article/details/105978951
版权

CircleImageView

概述
  1. initializeBitmap():初始化Bitmap,尺寸等操作,不对CircleImageView的尺寸做操作.
  2. updateDimensions():对CircleImageView尺寸,外边框等计算逻辑
  3. 计算完以上属性后,就调用invalidate()重绘.
主流程
  1. 初始化
public CircleImageView(Context context) {
    super(context);
    init();
}
public CircleImageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
    mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_civ_border_width, DEFAULT_BORDER_WIDTH);
    mBorderColor = a.getColor(R.styleable.CircleImageView_civ_border_color, DEFAULT_BORDER_COLOR);
    mBorderOverlay = a.getBoolean(R.styleable.CircleImageView_civ_border_overlay, DEFAULT_BORDER_OVERLAY);
    mCircleBackgroundColor = a.getColor(R.styleable.CircleImageView_civ_circle_background_color, DEFAULT_CIRCLE_BACKGROUND_COLOR);
    a.recycle();
    init();
}
/**
 * 初始化一些东西
 */
private void init() {
    mInitialized = true;
    // 设置图片缩放类型, 这个与updateShaderMatrix()中逻辑呼应.
    super.setScaleType(SCALE_TYPE);
    // 下面是对画笔的基本操作.
    mBitmapPaint.setAntiAlias(true);
    mBitmapPaint.setDither(true);
    mBitmapPaint.setFilterBitmap(true);
    mBitmapPaint.setAlpha(mImageAlpha);
    mBitmapPaint.setColorFilter(mColorFilter);
    mBorderPaint.setStyle(Paint.Style.STROKE);
    mBorderPaint.setAntiAlias(true);
    mBorderPaint.setColor(mBorderColor);
    mBorderPaint.setStrokeWidth(mBorderWidth);
    mCircleBackgroundPaint.setStyle(Paint.Style.FILL);
    mCircleBackgroundPaint.setAntiAlias(true);
    mCircleBackgroundPaint.setColor(mCircleBackgroundColor);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // 设置CircleImageView控件轮廓.
        setOutlineProvider(new OutlineProvider());
    }
}
  1. 初始化Bitmap
/**
 * 初始化Bitmap,该方法只涉及更新Bitmap对象以及计算Bitmap缩放比例及其尺寸位置,
 * 对CircleImageView控件本身的尺寸以及画笔,外环边框宽等属性不做改变.
 */
private void initializeBitmap() {
    // 获取Bitmap
    mBitmap = getBitmapFromDrawable(getDrawable());
    // Bitmap不为空且Bitmap可以被绘制.
    if (mBitmap != null && mBitmap.isMutable()) {
        mBitmapCanvas = new Canvas(mBitmap);
    } else {
        mBitmapCanvas = null;
    }
    if (!mInitialized) {
        return;
    }
    if (mBitmap != null) {
        // 更新着色器矩阵
        updateShaderMatrix();
    } else {
        mBitmapPaint.setShader(null);
    }
}
  1. 计算CircleImageView显示区域,计算边界区域
/**
 * 该方法主要作用是计算CircleImageView控件的半径,外边框宽度,外边框半径等.
 */
private void updateDimensions() {
    // 计算得到的外环矩形设置给mBorderRect对象
    mBorderRect.set(calculateBounds());
    // 计算外环半径, 其中考虑到了边框宽度.
    mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2.0f, (mBorderRect.width() - mBorderWidth) / 2.0f);
    // 将外环矩形设置给CircleImageView 显示区域矩形
    mDrawableRect.set(mBorderRect);
    // 如果不覆盖边框,且边框宽度大于0
    if (!mBorderOverlay && mBorderWidth > 0) {
        // CircleImageView 显示区域矩形将缩小,空出空间给外边框使用.
        mDrawableRect.inset(mBorderWidth - 1.0f, mBorderWidth - 1.0f);
    }
    // 获取CircleImageView控件的半径距离.
    mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);
    updateShaderMatrix();
}
  1. 更新Bitamp着色器矩阵,也就是计算Bitmap缩放,中心点等数据
    • 不论是初始化Bitmap还是修改CircleImageView控件尺寸,都需要更新Bitmap着色器矩阵.
/**
 * 将Bitmap缩小或者放大之后的中心位置移动到CircleImageView圆心位置.
 * 画图有助于理解.
 * 短边缩放至与当前控件直径一样.
 */
private void updateShaderMatrix() {
    if (mBitmap == null) {
        return;
    }
    float scale;
    float dx = 0;
    float dy = 0;
    mShaderMatrix.set(null);
    int bitmapHeight = mBitmap.getHeight();
    int bitmapWidth = mBitmap.getWidth();
    // 假如Bitmap宽>高
    if (bitmapWidth * mDrawableRect.height() > mDrawableRect.width() * bitmapHeight) {
        // 得到Bitmap短边与直径的比例,整个Bitmap缩放按照该比例来缩放.
        // 缩放后,Bitmap长边与圆相切.
        scale = mDrawableRect.height() / (float) bitmapHeight;
        // 缩放后Bitmap长边减去圆直径除以2得到的就是缩放后Bitmap中心点与圆心点的水平距离.
        // 画图很好理解.
        dx = (mDrawableRect.width() - bitmapWidth * scale) * 0.5f;
    } else {
        scale = mDrawableRect.width() / (float) bitmapWidth;
        dy = (mDrawableRect.height() - bitmapHeight * scale) * 0.5f;
    }
    // 按照比例缩放Bitmap
    mShaderMatrix.setScale(scale, scale);
    // 水平移动或者垂直移动Bitmap,使之与圆心坐标重合.
    mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
    // 为着色器添加矩阵配置.
    mRebuildShader = true;
}
  1. 绘制
@SuppressLint("CanvasSize")
@Override
protected void onDraw(Canvas canvas) {
    // mDisableCircularTransformation 就会默认原图, 不会转为圆形图片了.
    if (mDisableCircularTransformation) {
        super.onDraw(canvas);
        return;
    }
    // 绘制纯色背景
    if (mCircleBackgroundColor != Color.TRANSPARENT) {
        canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mCircleBackgroundPaint);
    }
    if (mBitmap != null) {
        if (mDrawableDirty && mBitmapCanvas != null) {
            // 如果Drawable失效了, mBitmapCanvas还存在, 那么重新设置Drawable.
            mDrawableDirty = false;
            Drawable drawable = getDrawable();
            drawable.setBounds(0, 0, mBitmapCanvas.getWidth(), mBitmapCanvas.getHeight());
            drawable.draw(mBitmapCanvas);
        }
        if (mRebuildShader) {
            // 如果着色器重新更新了, 那么就将更新过的着色器矩阵重新设置.
            mRebuildShader = false;
            BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            bitmapShader.setLocalMatrix(mShaderMatrix);
            mBitmapPaint.setShader(bitmapShader);
        }
        // 绘制圆形Bitmap
        canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mBitmapPaint);
    }
    if (mBorderWidth > 0) {
        // 绘制外圆边框
        canvas.drawCircle(mBorderRect.centerX(), mBorderRect.centerY(), mBorderRadius, mBorderPaint);
    }
}
次要逻辑
  1. Drawable转Bitmap
/**
 * 通过Drawable资源获取Bitmap对象
 * @param drawable
 * @return
 */
private Bitmap getBitmapFromDrawable(Drawable drawable) {
    if (drawable == null) {
        return null;
    }
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    }
    try {
        Bitmap bitmap;
        if (drawable instanceof ColorDrawable) {
            bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
        } else {
            bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_
        }
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);
        return bitmap;
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}
  1. 设置是否转换为圆形图片
/**
 * 设置是否为转换为圆形图片
 * @param disableCircularTransformation true 不转换,为原图. false 转换为圆形图片.
 */
public void setDisableCircularTransformation(boolean disableCircularTransformation) {
    if (disableCircularTransformation == mDisableCircularTransformation) {
        return;
    }
    // onDraw()时会判断mDisableCircularTransformation变量,如果为ture就直接走父控件onDraw(),不会转换为圆形图片.
    mDisableCircularTransformation = disableCircularTransformation;
    if (disableCircularTransformation) {
        mBitmap = null;
        mBitmapCanvas = null;
        mBitmapPaint.setShader(null);
    } else {
        initializeBitmap();
    }
    invalidate();
}
  1. 为CircleImageView设置轮廓,影响阴影的形状参考博客
/**
 * 初始化一些东西
 */
private void init() {
    ...
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // 设置CircleImageView控件轮廓.
        setOutlineProvider(new OutlineProvider());
    }
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private class OutlineProvider extends ViewOutlineProvider {
    @Override
    public void getOutline(View view, Outline outline) {
        if (mDisableCircularTransformation) {
            // 如果禁止图片转换为圆形,那么视图的轮廓就是默认轮廓.
            ViewOutlineProvider.BACKGROUND.getOutline(view, outline);
        } else {
            // 如果允许转换为圆形图片,
            Rect bounds = new Rect();
            // 取圆形控件外边框的rect
            mBorderRect.roundOut(bounds);
            // 将轮廓设置为圆形控件外边框的轮廓.
            outline.setRoundRect(bounds, bounds.width() / 2.0f);
        }
    }
}
  1. 计算事件触摸点是否在圆形内部
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (mDisableCircularTransformation) {
        return super.onTouchEvent(event);
    }
    return inTouchableArea(event.getX(), event.getY()) && super.onTouchEvent(event);
}
/**
 * 计算当前触摸点是否在CircleImageView范围内, 如果在其中则代表当前触摸事件被CircleImageView消费了.
 * @param x
 * @param y
 * @return
 */
private boolean inTouchableArea(float x, float y) {
    if (mBorderRect.isEmpty()) {
        return true;
    }
    // Math.pow(a,2):计算a值的平方
    // x - mBorderRect.centerX(): 当前点x坐标距离圆心距离.
    // Math.pow(x - mBorderRect.centerX(), 2) + Math.pow(y - mBorderRect.centerY(), 2) :两直边的平方和小于或者等于半径平方和.勾股定理.
    // 就是算当前的点在不在CircleImageView范围内.
    return Math.pow(x - mBorderRect.centerX(), 2) + Math.pow(y - mBorderRect.centerY(), 2) <= Math.pow(mBorderRadius, 2);
}
碧云天丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Android开源项目分析】自定义圆形头像CircleImageView的使用和源码分析
牧之
08-05 2万+
本文分为三大部分： CircleImageView的使用 CircleImageView源码分析 Android自定义View总结 CircleImageView项目源码下载： https://github.com/hdodenhof/CircleImageView 打开源码会发现主要就是一个继承了ImageView 的类——CircleImageView .java，代码优雅精致，效果很nic
【Android -- 开源库】CircleImageView 的基本使用
Kevin Learn Android
11-05 3404
快速圆形的 ImageView，非常适合个人资料图像。 这基于 Vince Mi 的 RoundedImageView，它本身基于 Romain Guy 推荐的技术。
圆头像处理~开发中经常遇到
安逸猿
03-31 754
原文出处：http://blog.csdn.net/zhoubin1992/article/details/47258639  本文分为三大部分： CircleImageView的使用CircleImageView源码分析Android自定义View总结 CircleImageView项目源码下载：  https://github.com/hdodenhof/CircleI
Android CircleImageView圆形ImageView
weixin_34090562的博客
08-05 373
Android CircleImageView圆形ImageViewCircleImageView是github上一个第三方开源的实现圆形ImageView的项目。其在github上的项目主页是：https://github.com/hdodenhof/CircleImageView 实现的结果如图：重点说一说CircleImageView和附录文章1的异同，在开发中如何在特定情况下该选择...
Android中CircleImageView的快速使用
qq_43671768的博客
04-14 490
添加链接描述
Android CircleImageView自定义圆形与边框(圆形头像)详解
08-22 2257
Override//如果需要在图形上进行二次绘画，需要调用super后，也就是剪切后的画布已生成，再进行创作}
课程设计Android电子书阅读器源代码下载
05-11
课程设计Android电子书阅读器源代码下载 课程设计Android电子书阅读器源代码下载 课程设计Android电子书阅读器源代码下载
Android 文本阅读器源代码
10-03
初学Android，开发了一款简单的阅读器, 作为新手入门的参考, 共享以方便大家入门.
android 自定义circleimageview,Android开发（二）——自定义圆形控件的使用CircleImageView...
weixin_29510921的博客
05-25 164
packagede.hdodenhof.circleimageview;importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.graphics.Bitmap;importandroid.graphics.BitmapShader;importandroid.graphics.Canvas;i...
一个很好用的圆形头像控件.
圣西罗的红与黑
08-07 616
1.GitHub地址: https://github.com/hdodenhof/CircleImageView 2.方法:     grade依赖: compile 'de.hdodenhof:circleimageview:2.1.0' XML文件代码: de.hdodenhof.circleimageview.CircleImageView xmlns:app="ht
Android之CircleImageView使用(原创）
weixin_30657999的博客
04-07 191
文章大纲 一、什么是CircleImageView二、代码实战三、项目源码下载 一、什么是CircleImageView   圆角 ImageView，在我们的 App 中这个想必是太常见了，也许我们可以有无数种展示圆角图片的方法，但是 CircleImageView 绝对是我们在开发时需要优先考虑的，如果你还不知道 CircleImageView，那么你需要赶快去体验它在处理圆角图片时的强...
android_基础_圆形imageView的实现
写bug的蚊子的博客
08-03 2650
四种自定义圆形ImageView的方法 BitmapShader: 使用着色器 Xfermode：使用图层叠加 ClipPath：通过对画布裁剪的方式 RoundedBitmapDrawable: 系统API圆角类 前面三种是通过继承ImageView重写onDraw()方法实现 最后一种是系统API直接使用。 每一种方式都能实现显示圆形图片， 我们主要从以下几个方面来比较各个方式的不同 实现方式难易 空白的背景 抗锯齿的能力 第1种方式：BitmapShader实现 通过对Pain
用自定义的RoundImageView来实现圆形图片（可加边框）
weixin_34319817的博客
07-20 195
本文的控件来自：http://blog.csdn.net/alan_biao/article/details/17379925 这个控件不同于之前介绍过的那个框架，这个仅仅能过将图片裁剪为圆形，没能弄成椭圆，也没有android:scaleType属性。但他可以提供两重边框，对于简单的使用来说，是完全够用的。 使用方式和之前一样，首先先配置attrs.xml &lt;!-- ...
Android ShapeableImageView使用详解，告别shape、三方库
chuyouyinghe的专栏
06-01 6209
效果 前言 先来看一下ShapeableImageView是什么 由上图可以看到ShapeableImageView也没有什么神秘的，不过是ImageView的一个子类而已，但是从效果图来看，在不写shape、不引入三方库的情况下，还是挺容易实现预期效果的，而且扩展性良好。 使用 引入material包 implementation 'com.google.android.material:material:1.2.1' 常规 <com.google.andro...
Android圆形头像图Circle ImageView
Zhang Phil
04-09 8880
《Android圆形头像图Circle ImageView》 需要处理的原始图（pic）： 使用CircleImageView处理后的图（作为头像）： 现在很多的应用都有设置头像的功能，如QQ、微信、微博等。头像有标准的四方形，也有圆形（如QQ）。现在结合他人的代码加以修改，给出一个以原始图形中心为原点，修剪图片为头像的工具类，此类 可以直接在布局文件中加载使用，比
android圆形ImageView之CircleImageView
Android小飞の博客
07-28 1709
简单使用，3步实现 1、接入三方地址 dependencies { ... compile 'de.hdodenhof:circleimageview:2.1.0' } 2、布局控件中直接使用 de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.androi
Android 源代码阅读
最新发布
08-19
阅读Android源代码是一个复杂且庞大的任务，但以下步骤可以帮助你开始： 1. 下载源代码：首先，你需要下载Android源代码。你可以从Android开源项目（AOSP）网站获取最新的Android源代码。根据你的需求，选择并下载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值