Android布局-在链中分布一些元素,但打包一些其他元素

时间:2018-12-17 01:31:07

标签: android-studio android-constraintlayout

我已经读过this guide,但是我不知道该怎么做。

我拥有的是一条包含所有元素的规则链,链模式为“散布在内部”: enter image description here

我想要的是右边带有向上和向下箭头的按钮,而“ 4”文本在剩余空间中均匀分布:

enter image description here

我的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" />

1 个答案:

答案 0 :(得分:0)

我会从链中删除按钮,并仅通过指定其end约束使其粘在父项的末尾。现在,将TextViews保留在具有默认链样式(spread)的链中,并将其start约束为父级的start,将其end约束为上箭头的{{ 1}}。

示例XML:

start

结果:

Result