Android ConstraintLayout适配（二）

一、Guideline 引导线或锚点线
当需要一个任意位置的锚点时，可以使用锚点线（Guideline）来帮助定位，指示线实际上是 View 的子类，使用方式和普通的 View 相同，但锚点线有着如下的特殊属性：
1､宽度和高度均为0
2､可见性为 View.GONE
比如把一个Button定位在偏父布局100dp（从左向右），在添加嵌套和marginLeft的情况下就可以使用Guideline 锚点线，示例：

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

<!--重要的是Guideline是不会显示到界面上的，默认是GONE的。-->


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelineBegin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="100dp" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guidelineEnd"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="100dp" />

<Button
    android:id="@+id/buttonEnd"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="48dp"
    android:text="Button2"
    app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"
    app:layout_constraintTop_toTopOf="parent" />

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

<Button
    android:id="@+id/buttonPercent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="96dp"
    android:text="Button3"
    app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"
    app:layout_constraintTop_toTopOf="parent" />

<!--当你要用一个控件占屏幕宽度的一半的时候，可以用layout_constraintGuide_percent -->
</androidx.constraintlayout.widget.ConstraintLayout>

1.1.png

二、Barrier

直译为障碍、屏障。在约束布局中，可以使用属性constraint_referenced_ids属性来引用多个带约束的组件，

从而将它们看作一个整体，Barrier 的介入可以完成很多其他布局不能完成的功能；

它跟 Guideline 一样属于Virtual Helper objects，在运行时的界面上看不到，但是要比Guideline实用多了。

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

<!--     原始方案： 当改变textView1 的字段内容时，textView3随之改变,-->
<!--                   当改变textView2 的字段内容时，则失效-->
    
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="weererererer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:text="afaefaetqqteqreqreqrqer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView1" />

<!--        现在 Barrier 就已经定义好了，只剩下把textView3的约束从相对于 textView1 改为 相对于 Barrier 了：-->
<!--        app:layout_constraintLeft_toRightOf="@+id/textView1"  ===> 不设置下面属性则会出现有的内容看不见  取消下面注释-->
<!--        app:layout_constraintLeft_toRightOf="@+id/barrier1"/-->
 <!--        app:layout_constraintStart_toEndOf="@+id/barrier1"-->


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

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginRight="10dp"
    android:text="为了看到整体的效果，可以切换语言，此时你会看到Barrier会自动位于较宽的那个textView后面，也就间接让 textView3 也位于了正确的位置"
    app:layout_constraintLeft_toRightOf="@+id/barrier1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

1.2.png

三、Group
使用ConstraintLayout后我们的布局是没有层级关系的，各个View之间都是平级关系，但是如果根据某个业务条件来控制多个View的显示与否，我们需要分别对每个View进行控制，需要调用多次setVisibility()。这样就显得非常不方便。 本文所介绍的Group就是解决这个问题的。 Group就是一个分组，可以关联多个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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<Button
    android:id="@+id/leftTop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左上角"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/rightTop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="右上角"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="中间"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />
<Button
    android:id="@+id/rightBottom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="右下角"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

<Button
    android:id="@+id/leftBottom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左下角"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />


<androidx.constraintlayout.widget.Group
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="center,leftBottom,rightBottom"/>

</androidx.constraintlayout.widget.ConstraintLayout>

示例代码：https://gitee.com/zyd_gitee/constraint-layout.git

参考：https://constraintlayout.com/basics/barriers.html | https://blog.csdn.net/mp624183768/article/details/124454434