Разметка Android - внутри цепочки, распределите некоторые элементы, но соберите другие

Question

Я прочитал это руководство , но я не могу понять, как это сделать.

У меня есть обычная цепочка со всеми элементами, распространение в режиме цепочки "inside ":

Мне нужны кнопки со стрелками вверх и вниз, расположенными справа, а текст" 4 "равномерно распределен по оставшемуся пространству:

Мой xml:

<TextView
            android:id="@+id/tv_sel_rep_1"
            android:layout_width="11dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:text="@{String.valueOf(exercise.set1Reps)}"
            android:textSize="24sp"
            android:visibility="@{exercise.isActive &amp;&amp; !exercise.isTimedExercise? View.VISIBLE : View.GONE}"
            app:layout_constraintEnd_toStartOf="@+id/tv_sel_rep_2"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sp_sel_exer"
            tools:text="4" />

        <TextView
            android:id="@+id/tv_sel_rep_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:text="@{String.valueOf(exercise.set2Reps)}"
            android:textSize="24sp"
            android:visibility="@{exercise.isActive &amp;&amp; !exercise.isTimedExercise? View.VISIBLE : View.GONE}"
            app:layout_constraintBottom_toBottomOf="@+id/tv_sel_rep_1"
            app:layout_constraintEnd_toStartOf="@+id/tv_sel_rep_3"
            app:layout_constraintStart_toEndOf="@+id/tv_sel_rep_1"
            app:layout_constraintTop_toTopOf="@+id/tv_sel_rep_1"
            tools:text="4" />

        <TextView
            android:id="@+id/tv_sel_rep_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:text="@{String.valueOf(exercise.set3Reps)}"
            android:textSize="24sp"
            android:visibility="@{exercise.isActive &amp;&amp; !exercise.isTimedExercise? View.VISIBLE : View.GONE}"
            app:layout_constraintBottom_toBottomOf="@+id/tv_sel_rep_2"
            app:layout_constraintEnd_toStartOf="@+id/b_sel_increase_reps_small"
            app:layout_constraintStart_toEndOf="@+id/tv_sel_rep_2"
            app:layout_constraintTop_toTopOf="@+id/tv_sel_rep_2"
            tools:text="4" />

        <TextView
            android:id="@+id/tv_sel_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:text="@{String.valueOf(exercise.setTime)}"
            android:visibility="@{exercise.isActive &amp;&amp; exercise.isTimedExercise? View.VISIBLE : View.GONE}"
            app:layout_constraintBottom_toBottomOf="@+id/b_sel_increase_reps_small"
            app:layout_constraintEnd_toStartOf="@+id/b_sel_increase_reps_small"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/b_sel_increase_reps_small"
            tools:text="30"
            tools:visibility="gone" />

        <Button
            android:id="@+id/b_sel_increase_reps_small"
            android:layout_width="44dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:onClick="@{() -> viewModel.incrementSet(exercise, true)}"
            android:padding="16dp"
            android:text="↑"
            android:textSize="24sp"
            android:visibility="@{exercise.isActive? View.VISIBLE: View.GONE}"
            app:layout_constraintBottom_toBottomOf="@+id/tv_sel_rep_3"
            app:layout_constraintEnd_toStartOf="@+id/b_sel_reduce_reps_small"
            app:layout_constraintStart_toEndOf="@+id/tv_sel_rep_3"
            app:layout_constraintTop_toTopOf="@+id/tv_sel_rep_3" />

        <Button
            android:id="@+id/b_sel_reduce_reps_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginEnd="8dp"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:onClick="@{() -> viewModel.decrementSet(exercise, true)}"
            android:padding="16dp"
            android:text="↓"
            android:textSize="24sp"
            android:visibility="@{cbActiveExer.checked? View.VISIBLE: View.GONE}"
            app:layout_constraintBottom_toBottomOf="@+id/b_sel_increase_reps_small"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/b_sel_increase_reps_small"
            app:layout_constraintTop_toTopOf="@+id/b_sel_increase_reps_small" />

Answer 1

Я бы убрал кнопки из цепочки и заставил их придерживаться конца родительского элемента, указав только их ограничения end.Теперь сохраните TextViews в цепочке со стилем цепочки по умолчанию (spread) и ограничьте его start родительским start, а end - start.

в примере XML.:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textview2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textview3"
        app:layout_constraintStart_toEndOf="@id/textview1"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview3"
        android:text="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/increase"
        app:layout_constraintStart_toEndOf="@id/textview2"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/increase"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/arrow_up_float"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/decrease"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/decrease"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/arrow_down_float"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Результат: