Сохранить дочерний вид внутри макета в ConstraintLayout - PullRequest
0 голосов
/ 27 ноября 2018

Я пытался реализовать панель с данными о прогрессе с помощью ConstraintLayout.Проблема в том, что мой TextView выходит за пределы макета, когда направляющая слишком левая или слишком правая от полосы.

Я пытался изменить ограничения TextView, связанные с "@ id / guideline"в "parent", и вместо этого добавьте HorizontalBias, но тогда TextView станет неточным (немного смещен вправо / влево, зависит от длины желтой полосы)

Вот изображение текущего результата: enter image description here

Вот код макета:

<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>

Ответы [ 3 ]

0 голосов
/ 27 ноября 2018
<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>

enter image description here

0 голосов
/ 27 ноября 2018

Похоже, вы хотите, чтобы текст «текущего значения» был центрирован в конце индикатора выполнения;однако, если это размещение приводит к обрезанию текста либо с левой, либо с правой стороны, текст должен быть выровнен по стороне ConstraintLayout, чтобы он оставался полностью видимым.

Ваш TextViewцентрирован на процентном ориентире, который вы программно позиционируете между 0% и 100% (я полагаю).

Я предлагаю вам изменить ориентир на один, основанный на пикселях (dp или px), и расположить ваше TextViewэто сосредоточено на новом руководстве.Вместо изменения положения направляющей от нуля до 100%, рассчитывается новый диапазон:

Нижний предел диапазона = 1/2 ширины TextView плюс любой запас.

Верхний пределдиапазон = ширина ConstraintLayout - 1/2 ширины TextView минус любое поле.

Поле останется на нижнем конце диапазона, в то время как прогресс падает слева от нижнего конца.По мере того, как прогресс проходит через нижний предел, направляющая переместится вправо от текущего местоположения индикатора выполнения - нижнего конца.Ориентир остановится на верхнем уровне, когда прогресс продолжится до 100%.

Если вы хотите придерживаться процентного ориентира, рассчитайте верхний и нижний пределы, как описано выше.Затем вы можете вычислить низкий и высокий проценты на основе ширины контейнера.

Вот короткая демонстрация, которая использует простой блок для прогресса:

enter image description here

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);
            }
        });
    }
}

activity_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>
0 голосов
/ 27 ноября 2018

Попробуйте изменить это ..

app:layout_constraintGuide_percent="0.7"

удалите это ..

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

и использовали это ..

                app:layout_constraintLeft_toLeftOf="@+id/guideline"
...