TextView 被推到父布局之外答案

【问题标题】：TextView pushed outside parent layoutTextView 被推到父布局之外
【发布时间】：2019-09-20 02:50:18
【问题描述】：

我正在构建一个看起来像这样的时间轴

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

它是使用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>

【问题讨论】：

如果您发布您的 xml 代码，那么帮助您会更容易:)
提供布局的XML，我们可以更好地协助。您很可能缺少约束。
链接打不开
Here 是对类似问题的回答。可能有一些东西可以使用。
@Cheticamp 谢谢！这正是我一直在寻找的！我最终给标签赋予了与它所引用的圆圈相同的约束，并赋予它相同的水平偏差。这会使标签偏离中心一点点，但看起来比以前好多了。这不是一个完美的解决方案，我一定会仔细查看您的链接并尝试尽快实施。

标签： android android-layout android-constraintlayout

【解决方案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了解更多详情。

【讨论】：

【解决方案2】：

@lukas 汉森如果你想将 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_of 视图。

【讨论】：