ConstraintLayout的基本用法

news2024/11/15 23:51:47

ConstraintLayout的基本用法

1、基线对齐——Baseline

有时候我们需要这样一个场景：

app:layout_constraintBaseline_toBaselineOf="@id/30"

2、链——Chains

用于将多个控件形成一条链，可以用于平分空间。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/A"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:gravity="center"
        android:text="A"
        android:textSize="25sp"
        app:layout_constraintEnd_toStartOf="@+id/B"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/B"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:gravity="center"
        android:text="B"
        android:textSize="25sp"
        app:layout_constraintEnd_toStartOf="@+id/C"
        app:layout_constraintStart_toEndOf="@+id/A"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/C"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:gravity="center"
        android:text="C"
        android:textSize="25sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/B"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

app:layout_constraintHorizontal_chainStyle有三个参数分别是：

spread（默认）：均分剩余空间

spread_inside：两侧的控件贴近两边，剩余的控件均分剩余空间

packed：所有控件贴紧居中

3、Guideline——参考线

Guideline是一条参考线，可以帮助开发者进行辅助定位，并且实际上它并不会真正显示在布局中，像是数学几何中的辅助线一样，使用起来十分方便，出场率很高，Guideline也可以用来做一些百分比分割之类的需求，有着很好的屏幕适配效果，Guideline有水平和垂直方向之分，位置可以使用针对父级的百分比或者针对父级位置的距离

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/Guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.10" />

在这里设置了一个垂直方向10%的Guideline,控件A依赖于这个Guideline因此不论布局如何变化，A始终在Guideline下方。

4、Barrier——屏障

这个Barrier和Guideline一样，也不会实际出现在布局中，它的作用如同其名，形成一个屏障、障碍，使用也非常多。

创建一个障碍，来确保视图不会重叠，无论内容有多长。

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="textView2,textView1"
        app:barrierDirection="end"/>

barrierDirection：表示障碍的位置

constraint_referenced_ids：表示在什么视图部分创建障碍

如图不管文字如何变化始终都是不会重叠显示，灰色显示部分就是障碍（Barrier）

5、Group——组

工作当中常常会有很多个控件同时隐藏或者显示的场景，传统做法要么是进行嵌套，对父布局进行隐藏或显示，要么就是一个一个设置，这显然都不是很好的办法，ConstraintLayout中的Group就是来解决这个问题的。Group的作用就是可以对一组控件同时隐藏或显示，没有其他的作用，它的属性如下:

    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="A,B,C" />

app:constraint_referenced_ids="id,id" 加入组的控件id

使用：invisible、visible、gone进行设置视图的可见与不可见。

6、Placeholder——占位符

Placeholder的作用就是占位，它可以在布局中占好位置，通过app:content=""属性，或者动态调用setContent()设置内容，来让某个控件移动到此占位符中

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DAF3FE"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/A"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Placeholder
        android:layout_width="100dp"
        android:layout_height="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>