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

我一直在尝试使用ConstraintLayout实现一个显示进度数据的条。问题是，当指导线太左或太右时，我的文本视图超出了布局范围

我尝试将TextView的约束条件从连接到“@id/guideline”更改为“parent”，并添加水平偏差，但是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>

尝试更改此项

app:layout_constraintGuide_percent="0.7"

删除此

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

然后用这个

                app:layout_constraintLeft_toLeftOf="@+id/guideline"

---

看起来您希望将文本“当前值”保持在进度条末尾的中心位置；但是，如果此放置导致文本在左侧或右侧被截断，则文本应与
ConstraintLayout
的一侧对齐，以便其保持完全可见

您的
TextView
以百分比为中心，以编程方式将其定位在0%和100%之间（我假设）

我建议您将指南更改为基于像素（dp或px）的指南，并将
TextView
放在新指南的中心位置。计算一个新范围，而不是将基准位置从零变为100%：

范围下限=文本视图宽度的1/2加上任何边距

范围的高端=约束框的宽度<代码>文本视图的宽度减去任意边距的1/2

利润率将保持在区间的低端，而进度则下降到低端的左侧。当进度超过低端时，指南将向右移动进度条的当前位置-低端。随着进展持续到100%，指南将停止在高端

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

下面是一个简短的演示，它使用一个简单的块来显示进度：


MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ConstraintLayout mLayout;
    private View mProgress;
    private int mProgressPosition;
    private int mGuidelineMin;
    private int mGuidelineMax;
    private Guideline mGuideline;
    private int mIncrement;
    private Handler mHandler = new Handler();
    private int mMargin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.layout);
        mGuideline = findViewById(R.id.guideline);
        mProgress = findViewById(R.id.progress);
        mMargin = (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, 16,
            getResources().getDisplayMetrics()
        );

        mLayout.post(new Runnable() {
            private int mLoopCount = 100;

            @Override
            public void run() {
                int textWidth = findViewById(R.id.textView).getWidth();
                mGuidelineMin = textWidth / 2 + mMargin;
                mGuidelineMax = mLayout.getWidth() - textWidth / 2 - mMargin;
                mGuideline.setGuidelineBegin(mGuidelineMin);
                mIncrement = (mLayout.getWidth() - mProgress.getWidth()) / mLoopCount;
                mHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mProgressPosition += mIncrement;
                        mProgress.setTranslationX(mProgressPosition);
                        int guidelinePosition =
                            Math.max(mGuidelineMin, mProgressPosition + mProgress.getWidth() / 2);
                        if (guidelinePosition > mGuidelineMax) {
                            guidelinePosition = mGuidelineMax;
                        }
                        mGuideline.setGuidelineBegin(guidelinePosition);
                        if (--mLoopCount > 0) {
                            mHandler.postDelayed(this, 100);
                        }
                    }
                }, 100);
            }
        });
    }
}

活动\u main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/progress"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.17" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Current value"
        android:textSize="20sp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.07999998" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="140dp" />
</androidx.constraintlayout.widget.ConstraintLayout>


为什么要使用ProgressBar的view InRead？在我的例子中，需要创建自定义UI，它不仅需要添加文本，还需要指向黄色条左侧的小箭头图标，所以您需要TextView与gudeline一起移动？是吗？是的，就像在IMASEO中间显示的那个，它不应该超出父的权限吗？是的，我已经在指南视图中使用它了，这不是很可悲的，它是在文本视图从左侧裁剪时修复的，但是当文本视图从右侧裁剪时会恶化。另外，我需要将文本视图与黄色条的右侧居中（在这种情况下，文本视图将始终位于黄色条的右侧）对不起，先生，它仍然不太正确，仍然从左侧截断我已经测试过了，让我与您共享一个屏幕截图..并让我知道您想要这个吗？对不起，先生，事实上，如果我将引导百分比设置为一个很低的值，textview仍然会被截断，因为引导百分比的值不够低，而且我还需要用条形图将文本居中，在您的解决方案中，条形图不是居中的，而是“在左边”，我发现了一个技巧，并将更新此线程
<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/progress"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.17" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Current value"
        android:textSize="20sp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.07999998" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="140dp" />
</androidx.constraintlayout.widget.ConstraintLayout>