Question

I use : compile 'com.android.support.constraint:constraint-layout:1.0.2'

The main problems are：

layout_margin can't be shown correctly;
child textview's text is clipped.

Details as below:

This is my xml:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:padding="8dp">

    <ImageView
        android:id="@+id/reviewer_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@color/colorAccent"
        android:contentDescription="@string/avatar"
        android:layout_margin="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/reviewer_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_name"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/comment_floor"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toTopOf="@+id/reviewer_avatar"
        app:layout_constraintVertical_chainStyle="packed"/>

    <TextView
        android:id="@+id/comment_floor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_floor_text"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_name"/>

    <TextView
        android:id="@+id/comment_period"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:text="@string/comment_period_text"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/comment_floor"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_name"/>

    <TextView
        android:id="@+id/comment_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>
</android.support.constraint.ConstraintLayout>

This is my screenshot:

Answer 1

这里主要有两个问题

您缺少为包含父级的视图设置正确约束
ConstraintLayout 中存在错误， wrap_content 已解决，现在您必须使用 match_constraint（0dp）和 layout_constraintWidth_default 属性可解决此问题将以下两个属性添加到largetext视图

android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
app:layout_constraintRight_toRightOf="parent"

所以你的大文字视图就像

<TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>

Answer 2

我想我发现儿童textview文本的答案被剪裁了。

我改变它：

<TextView
    android:id="@+id/comment_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/large_text"
    android:textSize="16sp"
    app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
    app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>

到

<TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintRight_toRightOf="parent"/>

这样可以解决问题！

但是这样，TextView不可扩展，只能填充宽度。

Finnaly，更好的答案：

  <TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_name"
        android:textSize="16sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintLeft_toLeftOf="@+id/reviewer_name"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintWidth_default="wrap"/>

Answer 3

layout_margin无法正确显示; - 边距空间位于视图范围之外。应用程式：layout_constraintLeft_toRightOf =＆＃34; @ + ID / reviewer_avatar＆＃34;表示reviewer_name被约束到reviewer_avatar的右侧，不包括边距。设置android：layout_marginLeft =＆＃34; 8dp＆＃34; reviewer_name，comment_floor和comment_content。
子文本视图的文本被剪裁。 - comment_content的宽度等于ConstraintLayout的宽度，但comment_content被约束到reviewer_avatar的右侧。因此，comment_content的右侧超出了ConstraintLayout的边界，即被剪裁。为不同的屏幕尺寸设置comment_content的特定宽度。

Answer 4

我认为这是一个调整大小的错误，应该在1.1 beta 1中修复（请参阅https://androidstudio.googleblog.com/2017/05/constraintlayout-110-beta-1-release.html进行安装） - 请尝试一下，看看是不是。

TextView inside ConstraintLayout clips text and layout_margin cant not be shown correctly

4 个答案: