ConstraintLayout 难点解析

2021-06-27 本文已影响0人 zivxia

WRAP_CONTENT

我们知道这个属性在其他view中的意思是包裹内容，就是自身的尺寸，最大不会超过屏幕的尺寸。

image.png

大致意思就是，这个属性是在1.1版本加的，再1.1版本之前，如果设置了wrap_content,约束讲不会限制这个结果尺寸，也就是这个尺寸起不到任何作用，下面来看一个例子

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="@color/color_ffffff"
    android:orientation="vertical"
    android:paddingTop="40dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:text="ahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahah"
        android:textColor="@color/color_000000"
        android:textSize="20dp"
        app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

看下预览结果

image.png

结果发现文本显示不全，如果是用其他的viewGroup肯定是能显示全的。那这个时候怎么解决这个问题呢？
可以设置这两个属性中的一个来约束宽或者高，这样就没问题了，

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

MATCH_CONSTRAINT(0dp)

When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available

在约束布局中宽高的维度 match_parent 被 0dp 代替，默认生成的大小占所有的可用空间。那么有以下几个属性可以使用：

layout_constraintWidth_min and layout_constraintHeight_min //设置最小尺寸
layout_constraintWidth_max and layout_constraintHeight_max //设置最大尺寸
layout_constraintWidth_percent and layout_constraintHeight_percent //设置相对于父类的百分比
开发中有这样一个需求，位于父控件的中间且宽度为父控件的一半，那么我们可以这么去实现：
image.png

Ratio

如果要定一个控件的一边与另一边的比率，可以使用

layout_constraintDimensionRatio

属性，但是必须至少要设置其中的一边是MATCH_CONSTRAINT(0dp)，layout_constraintDimensionRatio表示宽与高的比率，永远都是宽与高的比率，如果width被设置为MATCH_CONSTRAINT，说明宽是需要被约束的，这时候以高来计算宽，宽按照宽高比来计算。相反，如果是高被设置为MATCH_CONSTRAINT，说明高是需要被约束的，这是后以宽来计算高。记住永远是宽高比，只不过是是用哪个来计算哪一个，被约束的永远是被计算的。

Chain style

加入我们现在要实现，如下效果

image.png

是用LineaLayout或者RelativeLayout都需要进行布局嵌套，这时可以使用ConstraintLayout的链式：
来看下官方文档对链式的解释：

A chain is a group of views that are linked to each other with bi-directional position constraints. The views within a chain can be distributed either vertically or horizontally.

链就是一组view之间的相互连接是用双向的约束。这些在链中的view水平或者垂直方向上分布，通常可以通过

//垂直方向上的
layout_constraintVertical_chainStyle
//水平方向上的
layout_constraintHorizontal_chainStyle

通常是设置在链头，也就是离父布局左边和顶部最近的view，链上的元素之间必须是相互约束的关系

image.png

链可以分为如下几种

Spread

链中的view都是发散分布的，为默认样式

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 1"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />

    <Button
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 2"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1" />

    <Button
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 3"
        app:layout_constraintTop_toBottomOf="@id/view2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

效果图为：