Question

我一直在尝试使用ConstraintLayout实现显示进度数据的栏。问题是当准则在条的左边或右边时，我的TextView超出了版面范围。

我尝试将TextView的约束条件从连接到“ @ id / guideline”的约束更改为“ parent”，并添加horizontalBias，但是TextView的定位将变得不正确（稍微移至右侧/左侧）取决于黄条的长度）

这是当前结果的图像：

这是布局代码：

<android.support.constraint.ConstraintLayout
    android:id="@+id/layoutConstraint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingLeft="16dp"
    android:paddingTop="100dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".01" />

    <TextView
        android:id="@+id/textProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="12dp"
        android:textColor="@color/black"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="@id/guideline"
        app:layout_constraintStart_toStartOf="@id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="current value" />

    <View
        android:id="@+id/layoutProgress"
        android:layout_width="0dp"
        android:layout_height="8dp"
        android:background="@drawable/background_rounded_corner_light_grey"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textProgress" />

    <View
        android:id="@+id/currentProgress"
        android:layout_width="0dp"
        android:layout_height="8dp"
        android:background="@drawable/background_rounded_corner_yellow"
        app:layout_constraintEnd_toStartOf="@id/guideline"
        app:layout_constraintStart_toStartOf="@id/layoutProgress"
        app:layout_constraintTop_toBottomOf="@id/textProgress" />
</android.support.constraint.ConstraintLayout>

Answer 1

您似乎想将文本“当前值”保持在进度条末尾的中心；但是，如果此位置导致文本在左侧或右侧被截断，则文本应与if (priorItem) {的一侧对齐，以使其保持完全可见。

您的if (theItem) {是以您以编程方式定位在0％和100％（我认为是）之间的百分比准则为中心的。

我建议您根据像素（dp或px）将准则更改为一个，并将ConstraintLayout定位在新准则的中心。而不是将准则位置从零更改为100％，而是计算了一个新范围：

范围的低端= TextView宽度的1/2加上任何边距。

范围的高端= TextView的宽度-TextView的1/2宽度减去任何边距。

边距将保持在范围的低端，而进度下降到低端的左侧。当进度越过低端时，指南将在进度条的当前位置（低端）的右侧向右移动。随着进度继续达到100％，该准则将停止在高端。

如果您要遵守百分比准则，请按照上述方法计算下限和上限。然后，您可以根据容器的宽度计算高低百分比。

这是一个简短的演示，它使用一个简单的块进行进度：

MainActivity.java

ConstraintLayout

activity_main.xml

TextView

Answer 2

尝试更改此内容。

app:layout_constraintGuide_percent="0.7"

删除此..

    app:layout_constraintEnd_toEndOf="@id/guideline"
    app:layout_constraintStart_toStartOf="@id/guideline"

并使用了它。

                app:layout_constraintLeft_toLeftOf="@+id/guideline"

Answer 3

<android.support.constraint.ConstraintLayout
    android:id="@+id/layoutConstraint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".01" />

    <TextView
        android:id="@+id/textProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="12dp"
        android:textColor="@color/black"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="@+id/currentProgress"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/currentProgress"
        tools:text="40" />

    <View
        android:id="@+id/layoutProgress"
        android:layout_width="0dp"
        android:layout_height="8dp"
        android:background="@color/grey_2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textProgress" />

    <View
        android:id="@+id/currentProgress"
        android:layout_width="0dp"
        android:layout_height="8dp"
        android:background="@color/accent"
        app:layout_constraintEnd_toStartOf="@id/guideline"
        app:layout_constraintStart_toStartOf="@id/layoutProgress"
        app:layout_constraintTop_toBottomOf="@id/textProgress" />
</android.support.constraint.ConstraintLayout>

Answer 4

因此将 TextView 中的 ConstraintLayout 保持在它的开始和结束约束内，将它的 layout_width 设置为 0dp 而不是 wrap_content

将子视图保留在ConstraintLayout中的布局内

4 个答案: