Android(安卓)自定义View练手Demo(二)实现圆形头像效果
Android 自定义View系列文章
Android 自定义View练手Demo(一)实现圆角遮罩效果
Android 自定义View练手Demo(二)实现圆形头像效果
Android 自定义View练手Demo(三)实现微信拍一拍的动画效果
Android自定义View实现圆形头像效果
在我们的APP中通常会遇到,展示圆形头像的需求,一般通过Glide就能实现,但是让我们做一个圆形头像,如果让我们自定义实现这种效果,该怎样做呢?
好,接下来本文通过三种方式来实现这种效果!
注意:这是一个练手的Demo
1.通过本文可以学到的知识点
- canvas.clipPath API的使用
- Xfermode的使用
- Paint的Xfermode和ShaderAPI
- Matrix的平移和Canvans的平移(源码中,为了在一个View同时展示三种效果,所以对Canvas坐标进行了平移)
- 总结三种实现方式的优缺点
2.通过自定义View制作圆形头像
通过三种方式来实现这种效果,是哪三种方式呢?
- 通过canvas.clipPath()
- 通过paint.xfermode = porterDuffXfermode
- 通过paint.shader = bitmapShader
3.第一种实现方式
利用 canvas的 clip方法
private val AVATAR_SIZE = 240.dp //图片的大小private val RADIUS = AVATAR_SIZE / 2 //裁剪圆形的半径class CircleAvatarView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) { private val paint = Paint() private var avatar = getAvatar(R.drawable.my_avatar, AVATAR_SIZE.toInt())//图片的bitmap private val circlePath = Path()//圆形的路径 override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { /** * 在圆心 x:View宽度的一半 y:View高度的一半 半径为图片尺寸的一半 的位置上画圆 */ circlePath.addCircle(width / 2f, height / 2f, RADIUS, Path.Direction.CW) } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) //ktx的扩展方法,会自动保存恢复Canvas canvas.withSave { //重置画笔 paint.reset() //利用Canvas来裁切去要画的范围,也就是那个圆形 canvas.clipPath(circlePath) //在裁切后画上声明的Bitmap canvas.drawBitmap(avatar, width / 2 - RADIUS, height / 2 - RADIUS, paint) } } }
解释一下代码,当然看代码的注释也是一样的
- 定义包级别的图片的宽度为240dp和圆形的半径
- 获取一个要展示的图片的Bitmap
- 声明一个要裁剪的圆形的Path
- onSizeChanged方法中添加一个圆形
- 利用Canvas来裁切去要画的范围,也就是那个圆形
- 在裁切后画上声明的Bitmap
以上就是绘制圆形头像的第一种方法,主要使用的是canvas.clipPath(circlePath)
方法,注意Canvas的保存和恢复
4.第二种实现方式
通过paint.xfermode = porterDuffXfermode
PorterDuff.Mode
private val AVATAR_SIZE = 240.dp //图片的大小private val RADIUS = AVATAR_SIZE / 2 //裁剪圆形的半径class CircleAvatarView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) { private val paint = Paint() private var avatar = getAvatar(R.drawable.my_avatar, AVATAR_SIZE.toInt())//图片的bitmapprivate val circlePath = Path()//圆形的路径 private val bounds = RectF()//离屏缓冲的 bounds private val porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { /** * 在圆心 x:View宽度的一半 y:View高度的一半 半径为图片尺寸的一半 的位置上画圆 */ circlePath.addCircle(width / 2f, height / 2f, RADIUS, Path.Direction.CW) /** * 设置离屏缓冲的 bounds最好不要太大,影响性能 */ bounds.set(width / 2f - RADIUS, height / 2f - RADIUS, width / 2f + RADIUS, height / 2f + RADIUS) } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) //开启离屏缓冲 val count = canvas.saveLayer(bounds, null) paint.reset() canvas.drawPath(circlePath, paint) //设置paint的 xfermode 为PorterDuff.Mode.SRC_IN paint.xfermode = porterDuffXfermode //以当前的Paint来画Bitmap canvas.drawBitmap(avatar, width / 2 - RADIUS, height / 2 - RADIUS, paint) //清空paint 的 xfermode paint.xfermode = null //把离屏缓冲的内容,绘制到View上去 canvas.restoreToCount(count) }}
解释一下代码,当然看代码的注释也是一样的
- 在onSizeChanged方法中设置离屏缓冲的范围,是圆形头像的外切矩形的范围
- onDraw方法中开启离屏缓冲
- Canvas先画了一个圆形(相当于PorterDuff.Mode中的Destination image)
- 设置paint的 xfermode 为PorterDuff.Mode.SRC_IN
- 以当前的Paint来画Bitmap(注意此时相当于PorterDuff.Mode中的Source image),因为我们选择的模式为PorterDuff.Mode.SRC_IN所以就画出我们想要的效果
- 把离屏缓冲的内容,绘制到View上去
注意:一定要开启离屏缓冲,不然结果可能不是你所预期的,离屏缓冲相当于拿出一块透明的View来绘制,Canvas要绘制的图形
5.第三种实现方式
通过paint.shader = bitmapShader
private val AVATAR_SIZE = 240.dp //图片的大小private val RADIUS = AVATAR_SIZE / 2 //裁剪圆形的半径class CircleAvatarView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) { private val paint = Paint() private var avatar = getAvatar(R.drawable.my_avatar, AVATAR_SIZE.toInt())//图片的bitmap private val circlePath = Path()//圆形的路径 private val bitmapShader = BitmapShader(avatar, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT) override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { /** * 在圆心 x:View宽度的一半 y:View高度的一半 半径为图片尺寸的一半 的位置上画圆 */ circlePath.addCircle(width / 2f, height / 2f, RADIUS, Path.Direction.CW) } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) paint.reset() //给paint设置Shader paint.shader = bitmapShader //以Shader的形式来画圆形 canvas.drawPath(circlePath, paint) }}
解释一下代码,当然看代码的注释也是一样的
这种方式就比较简单了
- 声明一个BitmapShader,把头像的bitmap填入BitmapShader的构造中,并填入参数Shader.TileMode的值,这个具体看这篇文章对Paint做了详细解释
- 在onDraw方法中给paint设置Shader
- 以Shader的形式来画圆形,结果就是一个圆角头像了
6.总结
总结一下三种方式的优缺点
1.canvas.clipPath():
利用 canvas的 clip方法没有抗锯齿效果,会有毛边,因为是精确的切像素点
2.paint.xfermode = porterDuffXfermode
利用 paint的 xfermode 方法有抗锯齿效果,没有毛边,效果好,做了抗锯齿的处理,填充和周边类似的半透明色等
3.paint.shader = bitmapShader
利用 设置 paint 的 shader 方法有抗锯齿效果,没有毛边,效果好但是图片结果会受到Shader.TileMode影响,可能结果不是你所预期的
综上总结:最好使用paint.xfermode = porterDuffXfermode这种方式,因为我们需要的是一个显示完美的头像
此外还要注意使用离屏缓冲
7.源码地址
CircleAvatarView.kt
8.原文地址
注意:我的源码是把三种方式统一画在了一个View中,并通过Matrix的平移或者Canvans的平移来实现向下排列的效果,顺便先练了Matrix的平移和Canvans的平移
Android自定义View实现圆形头像效果
9.参考文章
hencoder
PorterDuff.Mode
更多相关文章
- android 实现微信摇一摇效果
- android开发仿IOS滑动开关
- Coder Essential之客户端知识索引(iOS/Android/Web)
- android UI 之 渐变效果
- 改进Android(安卓)SlidingMenu实现QQ样式边侧滑抽屉技术
- Android开发笔记(一百二十三)下拉刷新布局SwipeRefreshLayout
- 【Android】使用 SwipeRefreshLayout 实现下拉刷新
- Android仿QQ5.0 的侧滑菜单效果的实现
- Android(安卓)UI目录