最近开始使用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。
网友评论