美文网首页
Android:Barrier的使用

Android:Barrier的使用

作者: 因为我的心 | 来源:发表于2022-12-11 20:02 被阅读0次

    一、前言:

    Android里的ConstraintLayout是个非常强大的工具,它有效的解决了Android里Layout的层级嵌套的问题。使用一个ConstraintLayout可以实现之前多个Layout才能实现的效果。

    本篇文章就介绍下ConstraintLayout里比较进阶用法之一:Barrier。

    二、Barrier介绍:

    Barrier和Guideline 一样,都是自己不可见,只是用来定位的控件。

    假如我们要实现这样一种效果,控件C以控件A和B的最右边缘对齐。如下图:

    图片.png

    1、不用Barrier的实现方法

    因为A和B的宽度是动态变化的,所以控件C不能简单的依赖于具体的A或B的右边缘,只能把A和B放到一个ViewGroup里面,然后控件C依赖于这个新的ViewGroup的右边缘。

    如下图:


    图片.png

    这样实现虽然可以解决问题,但是却引入了一层嵌套。而使用Barrier则可以不用嵌套就能实现这样的效果。

    2、使用Barrier的解决方案:

    注意:使用下面这两个属性:

    app:barrierDirection="end"
    app:constraint_referenced_ids="btn_a,btn_b"

    首先,我们先定义控件A和B:

       <Button
            android:id="@+id/btn_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginTop="200dp"
            android:layout_marginLeft="30dp"
            android:text="这是控件A,我比较宽"/>
    
        <Button
            android:id="@+id/btn_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/btn_a"
            app:layout_constraintTop_toBottomOf="@id/btn_a"
            android:layout_marginTop="30dp"
            android:text="这是控件B"/>
    

    然后,定义一个Barrier:

    <android.support.constraint.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="end"
            app:constraint_referenced_ids="btn_a,btn_b"/>
    

    其中,app:constraint_referenced_ids="btn_a,btn_b"这句指定这个Barrier是用来控制id为btn_a和btn_b的两个控件。而app:barrierDirection="end"这句等于在这两个控件的右端设置一道“屏障”。
    最后,我们让控件C依赖于这个Barrier。注意这句:app:layout_constraintLeft_toLeftOf="@id/barrier"

    效果如下图,注意中间那条竖线在App运行的时候是看不到的。

    图片.png

    我们可以动态调整下控件A和B的宽度,发现控件C始终保持与A和B的最右端依赖。

    图片.png

    以上就是Barrier的使用方法简介,希望对你有所帮助!

    相关文章

      网友评论

          本文标题:Android:Barrier的使用

          本文链接:https://www.haomeiwen.com/subject/vcsxqdtx.html