Android解决Vector波浪背景超出ConstraintLayout圆角的问题

问题原因 #

layer-list 中的每个元素是独立绘制的，上层的波浪矢量图不会自动被下层带圆角的 shape 裁剪，因此会超出圆角边界。

解决方案一：通过布局属性开启裁剪 #

直接在你的 ConstraintLayout 中添加两个属性，让布局根据背景的圆角轮廓裁剪内容：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/fr_main_masters"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_rowWeight="1"
    android:layout_columnWeight="1"
    android:background="@drawable/ic_background_wave"
    android:layout_marginBottom="10dp"
    android:clipToOutline="true"
    android:outlineProvider="background">
</androidx.constraintlayout.widget.ConstraintLayout>

• android:outlineProvider="background"：让布局以背景的形状（这里是带圆角的shape）作为裁剪轮廓
• android:clipToOutline="true"：开启裁剪，超出轮廓的内容会被隐藏

解决方案二：修改 layer-list 添加裁剪层 #

如果你不想修改布局属性，可以修改 ic_background_wave.xml，用 clipDrawable 包裹波浪图，让它被圆角限制：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape>
      <solid android:color="@color/colorPrimary" />
      <stroke
          android:color="#B1BCBE" />
      <corners android:radius="16dp" />
      <padding
          android:bottom="0dp"
          android:left="0dp"
          android:right="0dp"
          android:top="0dp" />
    </shape>
  </item>
  <item>
    <clipDrawable
        android:drawable="@drawable/ic_group_wave_backg"
        android:clipOrientation="horizontal|vertical"
        android:gravity="fill" />
  </item>
</layer-list>

同时需要确保波浪矢量图的尺寸适配布局，避免本身绘制范围超出容器。

补充说明 #

如果你的minSdkVersion低于21，clipToOutline 可能无法正常工作，此时可以考虑用 CardView 替代 ConstraintLayout 作为容器，把内容放在 CardView 内部，利用 CardView 的 cardCornerRadius 属性自动裁剪背景和内容。

内容的提问来源于stack exchange，提问作者pawchi