android -------- ConstraintLayout Guideline和Barrier(四)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/DickyQie/article/details/83002980

前面的文章

ConstraintLayout 介绍(一)

ConstraintLayout 约束属性(二)

ConstraintLayout 宽高比和偏移量比(三)

此博文主要讲解:Guideline和Barrier


 

Guideline (了解,实际使用过程中我使用的不多)

当需要一个任意位置的锚点时,可以使用指示线(Guideline)来帮助定位,指示线实际上是 View 的子类,使用方式和普通的 View 相同,但指示线有着如下的特殊属性:

  • 宽度和高度均为0
  • 可见性为 View.GONE

案例:

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


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


   <android.support.constraint.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" />

    <android.support.constraint.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" />

    <android.support.constraint.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 -->

</android.support.constraint.ConstraintLayout>

如图:(有三个指示线)

         

 

Barrier

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

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

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

 

案例

<?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"
    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="warehouse"
        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="hospita"
        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"

    -->
    <android.support.constraint.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" />


    <!--   <android.support.constraint.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

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


</android.support.constraint.ConstraintLayout>

效果图:(你可以随便改变 textview1和textview2的长度,并不会影响textview3的显示)

            

 

 

很实用

 

参考地址:https://constraintlayout.com/basics/barriers.html

阅读更多
换一批

没有更多推荐了,返回首页