Question

我正在建立一个像这样的时间表

Timeline

可以使用水平偏置来移动中心圆，并且可以在第一个或最后一个圆的顶部或中间的任何位置。

它是使用ConstraintLayout构建的，使用圆的开始和结束作为约束，属于中心节点的日期位于其下方的中心。

如果中心节点移到最右边，则看起来像这样

Timeline right

我的问题是TextView已移到父版面之外。是否可以像我一样将其约束到中心节点，但将其强制为1行且始终在父级布局内？

编辑

这是XML。这似乎是一个非常普通的问题，所以我没想到会需要XML。

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/timeline_layout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/goal_chart_inner_layout"
            app:layout_constraintTop_toTopOf="parent">

            <!-- START -->
            <TextView
                android:textSize="12sp"
                android:id="@+id/fast_started_datetime_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                app:layout_constraintBottom_toTopOf="@+id/timeline_start_node"
                app:layout_constraintStart_toStartOf="@+id/timeline_start_node"
                toots:text="STARTED" />

            <ImageView
                android:layout_marginStart="15dp"
                android:id="@+id/timeline_start_node"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/circle_background"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


            <!-- 1 EDGE -->
            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="0dp"
                android:layout_height="5dp"
                android:layout_marginStart="@dimen/timeline_edge_padding"
                android:layout_marginEnd="@dimen/timeline_edge_padding"
                android:background="@drawable/circle_background"
                app:layout_constraintBottom_toBottomOf="@+id/timeline_start_node"
                app:layout_constraintEnd_toStartOf="@id/timeline_split_node"
                app:layout_constraintStart_toEndOf="@id/timeline_start_node"
                app:layout_constraintTop_toTopOf="@+id/timeline_end_node" />


            <!-- SPLIT -->
            <ImageView
                android:id="@+id/timeline_split_node"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginStart="15dp"
                android:layout_marginEnd="15dp"
                android:background="@drawable/circle_background"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.84"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView

                android:id="@+id/fast_goal_datetime_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:textSize="12sp"
                app:layout_constraintEnd_toEndOf="@+id/timeline_split_node"
                app:layout_constraintStart_toStartOf="@+id/timeline_split_node"
                app:layout_constraintTop_toBottomOf="@+id/timeline_split_node"
                toots:text="GOAL - TEST - LONG" />

            <!-- 2 EDGE -->
            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="0dp"
                android:layout_height="5dp"
                android:layout_marginStart="@dimen/timeline_edge_padding"
                android:layout_marginEnd="@dimen/timeline_edge_padding"
                android:background="@drawable/circle_background"
                app:layout_constraintBottom_toBottomOf="@+id/timeline_start_node"
                app:layout_constraintEnd_toStartOf="@id/timeline_end_node"
                app:layout_constraintStart_toEndOf="@id/timeline_split_node"
                app:layout_constraintTop_toTopOf="@+id/timeline_end_node" />


            <!-- END -->
            <TextView
                android:textSize="12sp"
                android:id="@+id/fast_ended_datetime_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                app:layout_constraintBottom_toTopOf="@+id/timeline_end_node"
                app:layout_constraintEnd_toEndOf="@+id/timeline_end_node"
                toots:text="ENDED" />

            <ImageView
                android:layout_marginEnd="15dp"
                android:id="@+id/timeline_end_node"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/circle_background"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />



        </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

当您移动圆时，以编程方式将textview的约束更改为父布局的末尾：

ConstraintSet constraintSet = new ConstraintSet();
constraintSet.connect(R.id.your_textview,ConstraintSet.END,R.id.the_parent_layout,ConstraintSet.END,0);
constraintSet.applyTo(yourConstraintLayout);

检查documentation以获得更多详细信息。

Answer 2

@lukas hansen 如果要使TextView居中对齐，可以执行以下操作：

<TextView
  android:textSize="12sp"
  android:id="@+id/fast_ended_datetime_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginBottom="8dp"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  tools:text="ENDED" />

注意：这会将TextView约束为两个边上的父级。另外，在层次结构中的TextView上方分配视图之一的top_to_bottom_。

TextView被推到父级布局之外

2 个答案: