3分钟上手android_maskable_layout:从JitPack集成到首个遮罩效果的快速入门教程

📅 2026/8/16 15:44:06
3分钟上手android_maskable_layout:从JitPack集成到首个遮罩效果的快速入门教程
3分钟上手android_maskable_layout从JitPack集成到首个遮罩效果的快速入门教程【免费下载链接】android_maskable_layoutA library that easily allows you to mask layouts/viewgroups项目地址: https://gitcode.com/gh_mirrors/an/android_maskable_layout在Android开发中实现圆形头像、异形图片裁剪往往需要一堆Canvas、Bitmap代码。而 android_maskable_layout 这个轻量级开源遮罩库将这一切简化为几行XML配置——它基于FrameLayout封装可让任意View或ViewGroup轻松获得遮罩效果甚至支持动画遮罩。本文从JitPack集成开始带你3分钟完成首次遮罩效果。android_maskable_layout是什么一个让布局随意变身的遮罩神器 Android原生的ImageView只支持圆形裁剪想要星形、文字镂空等异形效果就得自己写自定义View。android_maskable_layout 正是为此而生核心是一个继承自FrameLayout的 MaskableFrameLayout.java你只需把它当作普通容器使用并指定一个遮罩图片子View就会被雕刻成想要的形状。它的核心能力包括 任意Drawable遮罩圆形、星形、甚至是你的Logo图片全都能当遮罩 动画遮罩支持AnimationDrawable让遮罩活起来 18种PorterDuff混合模式DST_IN、SRC_IN、MULTIPLY、XOR等随意切换 极致轻量整个库只有一个核心类无多余依赖上图是官方演示动画第一张是未加遮罩的原图第二、三张分别是圆形和星形遮罩效果最后一张则是动画遮罩点击press me按钮后遮罩会流动起来非常炫酷。第一步JitPack集成只需两步配置 ⚙️android_maskable_layout 通过 JitPack 发布集成过程比Maven Central更简单整个配置只有两步① 在项目根目录的 build.gradle 中添加 JitPack 仓库allprojects { repositories { maven { url https://jitpack.io } } }② 在模块的 build.gradle 中添加依赖dependencies { implementation com.github.christophesmet:android_maskable_layout:v1.3.1 }同步一下Gradle集成就完成了。如果你用的是新版Android Studiosettings.gradle 中使用 dependencyResolutionManagement只需把上面的 maven 仓库地址加到 repositories 中原理完全相同。第二步3分钟写出你的第一个遮罩效果圆形头像集成完成后马上来做最经典的需求——圆形头像。只需要把原来的 ImageView 换成 MaskableFrameLayout 容器再指定一个圆形遮罩即可com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout android:layout_width80dp android:layout_height80dp app:porterduffxfermodeDST_IN app:maskdrawable/masking_masking_01 ImageView android:layout_widthmatch_parent android:layout_heightmatch_parent android:scaleTypecenterCrop android:srcdrawable/unicorn/ /com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout是不是非常简单核心就两个自定义属性完整定义见 attrs_maskable_framelayout.xmlapp:mask遮罩图片示例中的masking_masking_01是一张黑色实心圆形图app:porterduffxfermode混合模式DST_IN表示保留遮罩形状内的内容是最常用的模式把mask换成masking_masking_20五角星圆形头像瞬间变成星形头像一行代码都不用改完整的示例布局可查看 activity_main.xml。进阶玩法让遮罩动起来 切换混合模式 静态遮罩只是开胃菜android_maskable_layout 真正亮眼的是动画遮罩。项目示例中的 animation_mask.xml 是一个包含60帧的 animation-listanimation-list xmlns:androidhttp://schemas.android.com/apk/res/android android:oneshottrue item android:drawabledrawable/masking_masking_01 android:duration18/ !-- 中间省略58帧 -- item android:drawabledrawable/masking_masking_60 android:duration18/ /animation-list把它作为app:mask传入再像官方示例 MainActivity.java 那样在代码中启动动画遮罩就会流动起来AnimationDrawable anim (AnimationDrawable) mMaskableFrameLayout.getDrawableMask(); anim.start();此外你还可以在代码中动态更换遮罩或混合模式适合做水波纹、闪光扫过等高级特效maskableFrameLayout.setMask(R.drawable.masking_masking_20); // 动态换遮罩 maskableFrameLayout.setPorterDuffXferMode(PorterDuff.Mode.XOR); // 动态换模式18种PorterDuff模式全部支持覆盖ADD、CLEAR、MULTIPLY、SCREEN、XOR等足以满足绝大多数创意需求。常见问题为什么我的遮罩没生效新手最容易踩的坑这里帮你提前排掉问题解决方案遮罩完全不显示确认mask属性已设置且布局宽高大于0wrap_content且无子View时无法生成遮罩出现黑色块检查遮罩图片是否为黑白图建议使用黑色实心形状效果与预期不符检查porterduffxfermode大多数人想要的是DST_IN边缘锯齿明显在XML中添加app:anti_aliasingtrue开启抗锯齿会有轻微性能开销结语3分钟你也可以拥有炫酷的遮罩效果 从JitPack集成到圆形头像再到动画遮罩整个流程不过3分钟。android_maskable_layout 把复杂的Bitmap运算封装成直观的XML属性让遮罩效果变得人人都能用。想亲自运行官方Demo体验效果克隆仓库 https://gitcode.com/gh_mirrors/an/android_maskable_layout 即可Sample 模块就是现成的示例工程。快去试试吧【免费下载链接】android_maskable_layoutA library that easily allows you to mask layouts/viewgroups项目地址: https://gitcode.com/gh_mirrors/an/android_maskable_layout创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考