美文网首页我收藏的Android开发文章Android
ConstraintLayout中显示不全的问题,控件被挤压

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

作者: Funny灬 | 来源:发表于2019-03-29 16:30 被阅读163次

    最近开始使用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。

    相关文章

      网友评论

        本文标题:ConstraintLayout中显示不全的问题,控件被挤压

        本文链接:https://www.haomeiwen.com/subject/wvglbqtx.html