ConstraintLayout as RecyclerView Items

问题

I use ConstraintLayout as RecyclerView item. But now there are some problems that are displayed on the real machine and in the preview is not the same

The recyclerView item layout as follow:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/foreground_item_undo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="horizontal"
    app:layout_constraintWidth_default="spread">

    <com.lsl.wordhelper.view.RoundBgTextView
        android:id="@+id/tv_item_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="G"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_item_explain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="释义："
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/tv_item_original"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/tv_item_original"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="Good"
        android:textColor="@android:color/black"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@id/tv_item_explain"
        app:layout_constraintLeft_toRightOf="@id/tv_item_icon"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_item_translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="很好"
        android:textColor="@android:color/black"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/tv_item_original"
        app:layout_constraintTop_toBottomOf="@id/tv_item_explain" />

    <TextView
        android:id="@+id/tv_item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:gravity="right"
        android:text="2018/01/19"
        android:textColor="@color/text_color_date"
        app:layout_constraintBottom_toBottomOf="@id/tv_item_original"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

In Android Studio preview .

But on the phone

What's the problem?

回答1:

in you code: layout_marginStartandlayout_constraintLeft_toLeftOf didn't same ,you should use layout_marginStartandlayout_constraintStart_toStartOf or layout_margintLeftandlayout_constraintLeft_toLeftOf,keep same. left and start is diffent in some time. see that get more if you want to make constraintlayout as recyclerview. https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html.

回答2:

When you use

app:layout_constraintBottom_toTopOf="@id/tv_item_explain"
app:layout_constraintLeft_toRightOf="@id/tv_item_icon"

If @id/tv_item_explain was created below the current View, it will cause error .

You can add @id/tv_item_explain

app:layout_constraintBottom_toTopOf="@+id/tv_item_explain"
app:layout_constraintLeft_toRightOf="@+id/tv_item_icon"

You can try like this .

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/foreground_item_undo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="horizontal"
    app:layout_constraintWidth_default="spread">

<com.lsl.wordhelper.view.RoundBgTextView
    android:id="@+id/tv_item_icon"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:gravity="center"
    android:padding="4dp"
    android:text="G"
    android:textColor="@android:color/white"
    android:textSize="30sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/tv_item_explain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="释义："
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="@+id/tv_item_original"
    app:layout_constraintTop_toTopOf="parent"/>


<TextView
    android:id="@+id/tv_item_original"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:text="Good"
    android:textColor="@android:color/black"
    android:textSize="24sp"
    app:layout_constraintBottom_toTopOf="@+id/tv_item_explain"
    app:layout_constraintLeft_toRightOf="@+id/tv_item_icon"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/tv_item_translate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="很好"
    android:textColor="@android:color/black"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="@id/tv_item_original"
    app:layout_constraintTop_toBottomOf="@id/tv_item_explain"/>

<TextView
    android:id="@+id/tv_item_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:gravity="right"
    android:text="2018/01/19"
    android:textColor="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="@id/tv_item_original"
    app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

回答3:

Contrary to what the accepted answer suggests, this has nothing to do with Chains.

This behavior is a bug in the constraint layout and was fixed in beta5, so upgrade your dependency to com.android.support.constraint:constraint-layout:1.1.0-beta5 or newer. It's out of beta now, so you should use 1.1.0.

回答4:

Update oncreateView of the adapter with this :

//view is what we return from onCreateViewHolder
view.apply {
            this.layoutParams = RecyclerView.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
           )
         })

This always works.

来源：https://stackoverflow.com/questions/48363704/constraintlayout-as-recyclerview-items