Android开发：如何让可移动子View遵循父布局圆角？

问题描述 #

我有一个带圆角的ConstraintLayout父布局，内部包含一个无圆角的可移动子View（framePillSelectorSwitch）。当子View处于边缘位置时，会遮挡父布局的圆角，无法遵循父布局的圆角裁剪效果。

效果对比 #

• 预期效果：
• 当前实际效果：

布局代码 #

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_pill_selector_button_switch_parent">

    <FrameLayout
        android:layout_width="@dimen/no_width"
        android:layout_height="@dimen/no_width"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.mb.components.widget.MBLabel
        android:id="@+id/lbFirstButtonPillSelectorSwitch"
        style="@style/MBPillSelectorButtonSwitchText"
        android:layout_width="@dimen/no_width"
        android:layout_height="@dimen/no_width"
        android:background="@drawable/bg_pill_selector_button_switch_element"
        app:layout_constraintBottom_toTopOf="@+id/glPillSelectorSwitch"
        app:layout_constraintEnd_toStartOf="@+id/gl2PillSelectorSwitch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Gastos" />

    <com.mb.components.widget.MBLabel
        android:id="@+id/lbSecondButtonPillSelectorSwitch"
        style="@style/MBPillSelectorButtonSwitchText"
        android:layout_width="@dimen/no_width"
        android:layout_height="@dimen/no_width"
        android:background="@drawable/bg_pill_selector_button_switch_element"
        app:layout_constraintBottom_toBottomOf="@+id/glPillSelectorSwitch"
        app:layout_constraintEnd_toStartOf="@+id/gl3PillSelectorSwitch"
        app:layout_constraintStart_toEndOf="@+id/gl2PillSelectorSwitch"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Ingresos" />

    <com.mb.components.widget.MBLabel
        android:id="@+id/lbThirdButtonPillSelectorSwitch"
        style="@style/MBPillSelectorButtonSwitchText"
        android:layout_width="@dimen/no_width"
        android:layout_height="@dimen/no_width"
        android:background="@drawable/bg_pill_selector_button_switch_element"
        app:layout_constraintBottom_toTopOf="@+id/glPillSelectorSwitch"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/gl3PillSelectorSwitch"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Otros" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/glPillSelectorSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="@dimen/begin_guideline_pill_selector_button_switch" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/gl2PillSelectorSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/gl3PillSelectorSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.67" />

    <FrameLayout
        android:id="@+id/framePillSelectorSwitch"
        android:layout_width="@dimen/no_width"
        android:layout_height="@dimen/no_width"
        android:background="@drawable/bg_pill_selector_button_switch_selected"
        app:layout_constraintBottom_toTopOf="@+id/glPillSelectorSwitch"
        app:layout_constraintEnd_toStartOf="@+id/gl2PillSelectorSwitch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

解决方案 #

要解决子View遮挡父布局圆角的问题，只需给父ConstraintLayout添加裁剪属性，让子View超出圆角区域的部分被裁剪：

步骤1：给父布局添加裁剪属性 #

在父ConstraintLayout中添加android:clipToOutline="true"属性，启用轮廓裁剪，让父布局按照自身背景的圆角形状裁剪所有子View。修改后的父布局代码：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_pill_selector_button_switch_parent"
    android:clipToOutline="true">

步骤2：确认父布局背景的圆角设置 #

确保你的bg_pill_selector_button_switch_parent drawable文件正确定义了圆角，比如：

<!-- bg_pill_selector_button_switch_parent.xml 示例 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#EFEFEF" /> <!-- 替换为你的父布局背景色 -->
    <corners android:radius="16dp" /> <!-- 替换为你的圆角半径 -->
</shape>

完成以上设置后，子View移动到边缘位置时，超出父布局圆角的部分会被自动裁剪，即可达到预期效果。

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