开源啦·开源啦 Android 炫酷好用的裁切布局 ClipLayout ClipMask

Posted 2022-01-06 SensWong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开源啦·开源啦 Android 炫酷好用的裁切布局 ClipLayout ClipMask相关的知识，希望对你有一定的参考价值。

开源啦·开源啦 android 超炫酷超好用的裁切布局一个布局搞定所有裁切

你遇到过怎样的图片裁切需求？

1. 圆角矩形

2. 带边框的圆角矩形

3. 圆形

4. 带边框的圆形

你又遇到过怎样奇怪的布局需求？

1. 异形布局

2. 阴阳布局

3. 还是心形布局

所有这些，都可以用一个ClipLayout布局搞定

更重要的是

它会根据透明通道，重新调度触摸事件，所以事件会符合物理现象的进行图层穿透

请看展示效果

它不止是裁切图片的利器，也是裁切布局的利器

例如：上图中心形布局中的scrollview已经被自动裁切，即便滑动，也不影响裁切效果

阴阳布局的旋转过程，也没有因为旋转而忘记点击事件的重新分配

这么好的东西，会不会很难用呢？

当然不会啦，请看带边框圆形图片的布局代码

Include_circle_border.xml

<com.sens.widget.ClipLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="64dp"
    android:layout_height="64dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/oval" />

    <com.sens.widget.ClipMask
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="2dp"
        android:background="@drawable/oval" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="2dp"
        android:src="@drawable/sens" />
</com.sens.widget.ClipLayout>

第一层的oval是白色的圆形shape

第二层的mask同样使用oval作为模版

第三层的image是正常的图像

通过上面的代码，想必你已经看出来了，ClipLayout整体分为三层结构：

ClipLayout就是裁切的舞台(它负责所有裁切任务的调度)，ClipMask就是裁切的模版。当然了 ClipLayout也可以包含多个ClipMask，但是ClipMask必需是ClipLayout的直接子View，否则它们的效果和FrameLayout无异。

没有ClipMask的ClipLayout和FrameLayout的效果没有差异，因为它们均继承自FrameLayout，更复杂的模版和布局，写在它们的xml内部即可。

到这里想必你已经明白了:

ClipMask是裁切模版，只取透明通道，ClipMask默认对ClipMask之下的视图(即背景层)执行打洞操作，默认对ClipMask上层(即内容层)执行切割操作

当然了，默认行为是可以随时修改的

你可以通过修改ClipLayout 中的isReversal属性动态的使它的裁切效果反向。

即：如果 isReversal == true (默认false) 那么

ClipMask对ClipMask之下的视图(即背景层)执行切割操作，对ClipMask上层(即内容层)执行打洞操作