GIF图圆角3行代码背后大有乾坤：MeiWidgetView的CornersGifView原理详解

GIF图圆角3行代码背后大有乾坤MeiWidgetView的CornersGifView原理详解【免费下载链接】MeiWidgetView一款汇总了郭霖鸿洋以及自己平时收集的自定义控件集合库小红书项目地址: https://gitcode.com/gh_mirrors/me/MeiWidgetView在 Android 开发中给 GIF 动图加圆角是个经典难题。开源控件集合库MeiWidgetView中的CornersGifViewGIF图圆角控件只需要 3 行代码就能让任意 GIF 拥有漂亮的圆角支持四个角独立设置圆角半径。本文将带你从零理解它的实现原理为什么 GIF 不能像普通图片一样直接圆角Path的逆向填充模式又是如何画出圆角的一、3行代码快速上手 GIF 圆角控件先看看使用有多简单。在布局文件中声明CornersGifView并设置cornerSize即可com.meis.widget.corners.CornersGifView android:idid/iv_gif android:layout_widthwrap_content android:layout_heightwrap_content app:cornerSize8dp /然后像普通ImageView一样加载 GIF 图官方 Demo 用 Glide 加载Glide.with(this).load(R.mipmap.gif_01).asGif().into(mGifImageView);就这三行核心代码。但它内部隐藏了不少巧思下面逐一拆解。上图MeiWidgetView 中图片控件应用圆角效果后的展示效果二、为什么 GIF 不能直接套圆角裁剪普通静态图片加圆角通常用setClipPath裁剪一张带圆角的Bitmap。但 GIF 的本质是连续播放的多帧画面每一帧都重新解码、重新绘制对静态位图的裁剪对动态帧并不生效——这也是很多静态图圆角成功、GIF 圆角失败的原因。CornersGifView 换了个思路不裁剪图片而是把圆角之外的区域盖住。用控件自身的背景色在图片四角画出补角色块视觉上就形成了圆角。这个遮罩盖角方案对静态图和 GIF 通吃。三、核心原理拆解逆向填充 圆角路径核心实现全部在 CornersGifView.java共分为四个关键点1. 逆向填充模式让圆角外自动被着色控件在构造时就设置了一个关键的填充模式mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);INVERSE_EVEN_ODD逆向偶奇填充的意思是路径围成的区域之外才填充颜色。所以只要往Path里加一个圆角矩形绘制时自动会把矩形外、控件内的四个角填充成画笔颜色——圆角效果就此产生。✨2. onSizeChanged 时机构建圆角路径在 addRoundRectPath 方法 中控件在尺寸变化时把视图范围封装成圆角矩形加入Path四个角的半径来自mCorners数组顺序为左上、右上、右下、左下。3. 背景色黑科技反射自动取色盖角需要一个颜色直接写死白色显然不专业。getPaintColor 方法 做了一套完整的取色策略向上逐级遍历父视图找到第一个有背景色的 View通过反射读取ColorDrawable内部的mColorState → mUseColor字段拿到真实颜色因为ColorDrawable没有公开的颜色 getter父链全部透明时回退读取主题中的colorBackground作为兜底色。这样无论控件放在什么页面盖色都与页面背景融为一体圆角过渡几乎无感。4. onDraw 中补刀绘制onDraw 方法 先调用super.onDraw(canvas)完成 GIF 的正常绘制再用canvas.drawPath(mPath, mPaint)把四角补上。顺序不能颠倒否则 GIF 就被盖住了。四、四个角独立控制自定义属性与动态调节控件在 attrs.xml 中声明了 5 个属性cornerSize四角统一以及leftTopCorner、leftBottomCorner、rightTopCorner、rightBottomCorner四角独立。对应的 XML 示例见 corners_gif_activity.xml其中app:cornerSize8dp就是那3行代码的关键属性。官方 Demo MeiCornersGifActivity.java 还放了 4 个SeekBar拖动滑条实时调用setLeftTopCorner(progress)等方法动态调节每个角的半径——内部会重建Path并invalidate()重绘可以直观看到圆角平滑变化的过程非常适合用来理解Path与重绘的关系。五、使用小贴士与总结✅使用建议控件继承自AppCompatImageView所有ImageView的用法缩放类型、Glide/Fresco 加载均可照用圆角半径支持运行时修改无需重新布局若页面背景是纯色盖色自动匹配若背景是图片/渐变建议给父布局设置纯色背景避免四角露出穿帮。总结CornersGifView 用最少的代码解决了 GIF 圆角这个高频痛点——不裁剪、只遮盖靠INVERSE_EVEN_ODD逆向填充 addRoundRect圆角路径 反射取背景色三板斧组合而成。理解了逆向填充和绘制顺序这两个知识点你也可以轻松举一反三做出圆形头像、胶囊按钮等各类裁剪效果。更多同类自定义控件小红书标签拖拽、图片裁剪、贝塞尔点赞等的源码与 Demo可在本仓库 widget 模块 中继续探索配合 README.md 中的各控件效果说明是学习 Android 自定义控件的宝藏素材库。【免费下载链接】MeiWidgetView一款汇总了郭霖鸿洋以及自己平时收集的自定义控件集合库小红书项目地址: https://gitcode.com/gh_mirrors/me/MeiWidgetView创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考