ConstraintLayout中显示不全的问题，控件被挤压

最近开始使用ConstraintLayout布局，发现真的很强大。以前用LinearLayout和RelativeLayout嵌套好几层才能实现的复杂布局，使用ConstraintLayout只要一层就能够实现了。减少了布局层级的嵌套，绘制性能也提高了很多很多。

高度显示不全

在ConstraintLayout中，不再建议使用match_parent属性。如果想要实现match_parent的效果，可以设置为0dp，然后通过约束来实现。但是在具体使用过程中，我遇到了一个比较蛋疼的问题：显示不全的问题。如下图：

RecyclerView高度显示不全

布局文件是这样的：

<?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:layout_width="match_parent"
android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintTop_toTopOf="parent"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="@android:color/white"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="@android:color/white">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/tab_layout"
        app:layout_constraintVertical_weight="1">
    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

ViewPager中的Fragment，放的就是图中的那个RecyclerView（RecyclerView的最后一个条目显示不全）。ViewPager的高度设为0dp，app:layout_constraintVertical_weight为1，其实就和LinearLayout中的weight是一样的。 app:layout_constraintTop_toBottomOf="@id/tab_layout"表示ViewPager在TabLayout的下面。

RecyclerView最后一个条目为什么会显示不全？这是因为在ConstraintLayout中，如果height设置为0，就一定要给控件设置上约束和下约束。这里的ViewPager只设置了上约束在tablayout的下面，而没有设置下约束。只要加上app:layout_constraintBottom_toBottomOf="parent"，给ViewPager设置一个下约束在parent的上面，问题就解决了

宽度显示不全

宽度显示不全也是一样的情况，如下图：

TextView宽度显示不全

可以看到在RecyclerView条目中，TextView的宽度被挤压，导致字体显示不全。它的条目布局是这样的：

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/dp_5"
    android:layout_marginLeft="@dimen/dp_10"
    android:layout_marginRight="@dimen/dp_10"
    android:layout_marginTop="@dimen/dp_5"
    android:background="@drawable/white_cornor_bg"
    android:elevation="@dimen/dp_5"
    android:padding="@dimen/dp_10">

    <ImageView
        android:id="@+id/pic_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_android"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/desc_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_10"
        android:text="AAAAAA"
        android:textColor="@color/black"
        android:textSize="@dimen/sp_13"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/pic_iv"/>

    <TextView
        android:id="@+id/name_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_10"
        android:layout_marginTop="@dimen/dp_10"
        android:drawablePadding="@dimen/dp_5"
        android:drawableStart="@drawable/ic_author"
        android:text="AAAAAA"
        android:textColor="@android:color/darker_gray"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/pic_iv"/>

    <TextView
        android:id="@+id/time_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawablePadding="@dimen/dp_5"
        android:drawableStart="@drawable/ic_time"
        android:text="2019-03-19"
        app:layout_constraintBaseline_toBaselineOf="@id/name_tv"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/pic_iv"/>

</android.support.constraint.ConstraintLayout>

id为desc_tv的TextView中，宽度width设置了0dp，但是只设置了左约束在图片的右边，并没有给控件设置右约束，只要加上app:layout_constraintRight_toRightOf="parent"，把它的右约束设置为parent的右边，显示就正常了。

针对这个问题，还有另一种解决方法：可以把TextView的左约束和右约束都设置成parent，宽度设置为0dp，这样这个TextView的宽度就占满了整个一行。再设置android:layout_marginLeft="@dimen/dp_60"，TextView相对于父窗口左边的margin为60dp，同样也可以达到我们想要的效果。

 <TextView
        android:id="@+id/desc_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_60"
        android:text="AAAAAA"
        android:textColor="@color/black"
        android:textSize="@dimen/sp_13"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

总结一下，在ConstraintLayout中，不要使用match_parent属性。如果想实现宽度match_parent，就设置宽度为0dp，再设置左约束和右约束；如果想实现高度match_parent，就设置高度为0dp，再设置上约束和下约束。官方称这种做法为MATCH_CONSTRAINT。