ConstraintLayout详解与案例

版权声明:转载请注明出处 https://blog.csdn.net/FGY_u/article/details/84589894

我们在使用android studio的时候,发现Mainactivity的默认布局从RelativeLayout变成了ConstraintLayout。什么是ConstraintLayout呢?Constraint Layout是Google在2016年的Google I/O大会上提出的一个可以灵活控制子控件的位置和大小的新布局。并且其号称可以实现布局最大程度的扁平化。

项目中的布局嵌套问题对我们的项目性能有着不小的威胁。布局能实现扁平化的话会让软件性能得到很大的提升。很多教程中都没有提到ConstraintLayout的用法,在这里我们来结合案例了解一下。

我们做一个播放展示界面,效果图如下。

在这里插入图片描述

这是代码,代码中的图片可以自行替换掉。看不懂没关系,下面仔细讲讲。其中RatingBar我用了开源代码https://github.com/FlyingPumba/SimpleRatingBar来进行实现,以解决自带的RatingBar不可以改变星星大小的难题。我们可以在build.gradle(Module:app),也就是外层的那个里面添加依赖。 implementation ‘com.iarcuschin:simpleratingbar:0.1.5’

在这里插入图片描述

<?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">

    <ImageView
        android:id="@+id/photo"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="6dp"
        android:scaleType="fitXY"
        android:src="@drawable/fengmian"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="4dp"
        android:text="葫芦娃"
        android:textColor="#000"
        android:textSize="20sp"
        app:layout_constraintLeft_toRightOf="@+id/photo"
        app:layout_constraintTop_toTopOf="@+id/photo" />

    <com.iarcuschin.simpleratingbar.SimpleRatingBar
        android:id="@+id/rating"
        android:layout_width="113dp"
        android:layout_height="20dp"
        android:layout_marginTop="8dp"
        app:srb_starSize="17dp"
        app:srb_rating="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/item_title"
        app:layout_constraintTop_toTopOf="@+id/photo" />

    <TextView
        android:id="@+id/score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:gravity="center"
        android:text="3.3"
        app:layout_constraintBottom_toBottomOf="@+id/rating"
        app:layout_constraintLeft_toRightOf="@+id/rating"
        app:layout_constraintTop_toTopOf="@+id/rating" />


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="集数:24"
        android:textColor="@android:color/darker_gray"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@+id/photo"
        app:layout_constraintLeft_toLeftOf="@+id/item_title" />

    <ImageView
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginEnd="15dp"
        android:src="@drawable/play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

分析一下view id为item_title的TextView中使用。

app:layout_constraintLeft_toRightOf="@+id/photo"
app:layout_constraintTop_toTopOf="@+id/photo"

意思是约束控件的左边在view id为photo的view的右边,约束控件的上边与view id为photo的view的上边对齐。

类似的属性还有很多:

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

上文我们还提到了居中,上面代码最后一个控件,这个ImageView表示播放按钮。

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

代码意思是约束控件的下边和parent的下边一致(注意我这里的ConstraintLayout的height设置的是wrap_content),约束控件的上边和parent的上边一致。这可以形象的理解对于播放控件,在其上方,和下方有两个相同,反向的力在拉扯他,就像弹簧似的。因为力是均衡的,这就使得他处于中心位置。如果想偏移,不居中了,就跟调整弹簧一样,调整bias就可以了。

本文为学习整理,源自以下博客,更详细讲解见下方,如果他的星星不好调用,可以按照我给的方法。

参考文档:https://blog.csdn.net/qq_34902522/article/details/78303211

猜你喜欢

转载自blog.csdn.net/FGY_u/article/details/84589894