我们在使用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