【约束布局】ConstraintLayout 屏障 Barrier 约束 ( 简介 | 屏障适用场景 | 位置说明 | 相关属性 | 可视化操作 | 代码示例

2022-01-19 303

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

VI . 屏障 Barrier 可视化操作

1 . 添加屏障线 : 如下图所示 , 选择 “Add Vertical Barrier” 选项 , 可以添加垂直方向的屏障 ; 选择 “Add Horizontal Barier” 选项 , 可以添加水平方向的屏障 ;

2 . 为屏障配置包含的组件 : 在 Component Tree 面板中 , 鼠标左键按住左键 , 拖动到 Barrier 中 , 即可为 Barrier 屏障添加包含的组件 ;

3 . 设置屏障方向 : 选中要编辑的屏障 Barrier 组件 , 在 Attributes 面板中的 Common Attributes 选项卡中的 barrierDirection 中选择 6 66 个方向 ;

VII . 屏障 Barrier 代码示例

1 . 代码示例 :

<?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/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!-- 屏障中较大的组件 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World! Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintVertical_bias="0.2" />
    <!-- 左侧屏障 -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="left"
        app:constraint_referenced_ids="button2,button1" />
    <!-- 顶部屏障 -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="button1,button2" />
</androidx.constraintlayout.widget.ConstraintLayout>