Android应用开发那些事andnroidConstraintLayout

Android ConstraintLayout进阶:Barri

2020-01-04  本文已影响0人  我爱纽约先生
Barrier

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

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

Barrier介绍

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

一个例子

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


想要的效果

不用Barrier的实现方法

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


使用ViewGroup的实现方式

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

使用Barrier的解决方案

首先,我们先定义控件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"

<Button
        android:id="@+id/btn_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@id/barrier"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="30dp"
        android:text="这是控件C"/>

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


效果

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


A和B宽度变化的效果

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

上一篇下一篇

猜你喜欢

热点阅读