能否在ConstraintLayout中使用9-Patch Drawable？分数布局问题求助

当然可以在ConstraintLayout中使用9-Patch Drawable！针对你遇到的分隔线拉伸和内容居中问题，咱们来一步步调整布局：

先分析你原来的布局问题 #

你原来的分隔线View有个明显的约束错误：mr:layout_constraintStart_toStartOf="@string/numerator" 这里应该是@id/numerator（引用ID而不是字符串），这会导致约束失效。另外，初始的约束没有让分隔线跟随两个EditText的宽度变化，也没做好整体居中的设置。

修改后的完整布局代码 #

<android.support.constraint.ConstraintLayout 
    android:id="@+id/constraint_content"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/numerator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:hint="@string/x"
        android:inputType="number"
        android:textColorHint="@android:color/transparent"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@id/divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/divider"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/fraction"
        app:layout_constraintBottom_toTopOf="@id/denominator"
        app:layout_constraintEnd_toEndOf="@id/numerator"
        app:layout_constraintStart_toStartOf="@id/numerator"
        app:layout_constraintTop_toBottomOf="@id/numerator" />

    <EditText
        android:id="@+id/denominator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:hint="@string/x"
        android:inputType="number"
        android:textColorHint="@android:color/transparent"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/numerator"
        app:layout_constraintStart_toStartOf="@id/numerator"
        app:layout_constraintTop_toBottomOf="@id/divider" />

</android.support.constraint.ConstraintLayout>

关键调整点说明 #

1. 修正约束错误：把分隔线的start约束改为正确的@id/numerator，同时让分母EditText的start和end都对齐分子EditText的对应边，确保两者水平方向始终对齐。
2. 分隔线宽度自适应：分隔线View设置android:layout_width="0dp"，并通过constraintStart和constraintEnd绑定到分子EditText的左右边，这样它的宽度会自动匹配分子/分母中较宽的那个，9-Patch的水平拉伸区域会自然生效。
3. 整体居中：让分子EditText的start和end对齐父布局的中心，这样整个分数布局会在ConstraintLayout中水平居中；同时通过垂直约束把三个元素（分子、分隔线、分母）串联起来，保证垂直方向的正确排列。
4. 替代percent宽度方案：你之前用layout_constraintWidth_percent="1"会让分隔线占满父布局宽度，这不是我们想要的——我们需要它只跟随EditText的宽度变化，所以改用0dp+左右约束的方式更合适。

额外注意事项 #

确保你的9-Patch Drawable的水平拉伸区域（左侧的黑色实线）是正确设置的：只在分隔线需要拉伸的部分标记拉伸区域，这样当宽度变化时，只有中间的线条部分会拉伸，而不会变形两端的样式。

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