The content of the TextView component in Android ConstraintLayout is too long to exceed the screen

1. The cause of the problem beyond the screen

We often use the TextView component in ConstraintLayout, when we set the TextView componentandroid:layout_width=“wrap_content”The component width will be adaptively sized according to the content length.
Under normal circumstances, it is no problem to use this way, but when we set aLeft Margin (android:layout_marginLeft = "50dp")It will be found that the width of the TextView component is still the width of the parent layout and some parts exceed the parent layout and become invisible

<TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
        />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        ...
        />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        ...
        />

insert image description here
It can be seen that TextView does not automatically wrap lines as we thought, but keeps the original width beyond the screen

2. Solution

It's that simple to change android:layout_width=" wrap_content " to android:layout_width=" match_parent "
filled normally
, and this article ends here
insert image description here

Only one control per line can be solved in this way, but in most cases there are one or more controls on the right side of the TextView. If this is set, no matter how long the TextView content is, subsequent components will be squeezed to the far right of the layout
insert image description here

multi-component solution

1. Chain arrangement of multiple components

The views are linked to each other by bi-directional location constraints

<TextView
        android:id="@+id/tv"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_small"
        .../>
<TextView
        android:id="@+id/tv_small"
        app:layout_constraintLeft_toRightOf="@+id/tv"
        app:layout_constraintRight_toRightOf="parent"
        .../>

insert image description here

2. Set the chain layout style

After the two components form a chain, they will be equally spaced in the parent layout, which is not what we want.
Write and set two parameters

<TextView
		android:id="@+id/tv"
		app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        .../>

insert image description here

3. Limit controls to the screen

But after this setting, if the main title is too long, it will still exceed the screen.
Just like only setting android:layout_width=" wrap_content ", I set it up and returned to the original starting point
insert image description here
. Don't worry, it is only one step away from success , just set

<TextView
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        .../>

After this setting, the content of the main title can be next to the subtitle for a short time
insert image description here
, and the content of the main title is too long without squeezing the subtitle out of the screen

Summarize

When two or more components are not linked in a chain , the front component is not constrained by the rear component, and the current front component sets android:layout_width=" match_parent " The width of the component is the maximum width of the parent View
Two or more components are linked in a chain , and it is recommended to set it in the form of Match Constraints (android:layout_width="0dp"); by default, the view of Match Constraints will expand as much as possible to meet the constraints on each side (considering the view's margins), however, we can modify this behavior using the app:layout_constraintWidth_default
attribute and value 1, layout_constraintWidth_default = "spread" : By default, expand the view as much as possible to meet the constraints on each side
2, layout_constraintWidth_default = "wrap” : The view expands to fit its content only when needed, but the view can still be smaller than its content if constrained
android:layout_width="wrap_content"
The difference with
android:layout_width="0dp" app:layout_constraintWidth_default="wrap"
is that wrap_content will make the width consistent with the content width but the maximum width will not be affected by subsequent components, while **layout_constraintWidth_default="wrap"** will take into account the restrictions on both sides to expand the width