TextView выдвинут за пределы родительского макета

Question

Я строю временную шкалу, которая выглядит следующим образом

Центральный круг можно перемещать с использованием горизонтального смещения, и он может располагаться поверх первого или последнего круга,или где-нибудь между.

Это построение с использованием ConstraintLayout, а дата, принадлежащая центральному узлу, центрируется под ним с использованием начала и конца круга в качестве ограничений.

Если центральный узел перемещен в крайнее правое положение, он выглядит следующим образом

Моя проблема заключается в том, что 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

@ 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 родительскими элементами на обоих краях.Кроме того, назначьте top_to_bottom_ одного из представлений над TextView в иерархии.

Answer 2

Когда вы перемещаете круг, программно изменяйте ограничения текстового представления до конца родительского макета:

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

проверьте документацию для получения более подробной информации.