约束布局的使用(一)_android barrier的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/Duckdan/article/details/102828244

本文深入探讨了Android ConstraintLayout的高级用法，包括如何利用Barrier控件创建复杂的布局约束，以及ConstraintLayout的基本使用技巧，如控件对齐、偏移和环绕定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Barrier的基本使用

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:padding="20dp"
        android:text="第一部"
        android:textColor="#000"
        android:textSize="20sp"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--
    layout_marginLeft与layout_goneMarginLeft同时使用时，
    如果tv_first没有隐藏，那么tv_second与tv_first之间的
    marginLeft值以layout_marginLeft为准。如果tv_first隐
    藏，那么marginLeft的值以layout_goneMarginLeft为准
    -->
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:background="@color/colorHoloOrangeLight"
        android:padding="20dp"
        android:text="第二部"
        android:textColor="#000"
        android:textSize="20sp"
        app:layout_constraintLeft_toRightOf="@id/tv_first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_goneMarginLeft="100dp" />

    <!--
    app:layout_constraintHorizontal_bias只有当控件左右
    都添加约束的时候才能生效
    app:layout_constraintVertical_bias只有当控件上下
    都添加约束的时候才能生效
    -->
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:padding="20dp"
        android:text="第三部"
        android:textColor="#000"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2" />

    <!--
    app:layout_constraintCircle设置tv_forth
    app:layout_constraintCircleRadius设置环绕半径
    app:layout_constraintCircleAngle环绕角度
    -->
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_forth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:padding="20dp"
        android:text="第四部"
        android:textColor="#000"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/tv_third"
        app:layout_constraintCircle="@id/tv_second"
        app:layout_constraintCircleAngle="225"
        app:layout_constraintCircleRadius="50dp"
        app:layout_constraintRight_toLeftOf="@id/tv_third" />

<!--
app:constraint_referenced_ids引用控件的ID
app:barrierDirection指定所引用控件哪个方向为边界
以指定方向的最远边界为barrier
-->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv_first,tv_forth" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="tv_first,tv_forth" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:padding="10dp"
        android:text="TextView5"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/barrier2"
        app:layout_constraintLeft_toRightOf="@id/barrier1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/barrier2" />

</androidx.constraintlayout.widget.ConstraintLayout>

二、ConstraintLayout的基本使用

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:background="@color/dialog_bg"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/dialog_shape">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="center"
            android:includeFontPadding="false"
            android:text="账户余额"
            android:textColor="#ff333333"
            android:textSize="16sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <!--
        iv_close与tv_title居中对齐，则以tv_title参考,设置iv_close的约束
        -->
        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/iv_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="9dp"
            android:background="@mipmap/icon_close"
            app:layout_constraintBottom_toBottomOf="@id/tv_title"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/tv_title" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="#ffffff"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_title">

            <TextView
                android:id="@+id/tv_balance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="16dp"
                android:text="使用余额"
                android:textColor="#333333"
                android:textSize="14sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tv_balance_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="4dp"
                android:text="- ¥20.00"
                android:textColor="#ffff4b4d"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="@+id/tv_balance"
                app:layout_constraintRight_toLeftOf="@+id/cb_insurance"
                app:layout_constraintTop_toTopOf="@+id/tv_balance" />

            <CheckBox
                android:id="@+id/cb_insurance"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_marginRight="12dp"
                android:background="@drawable/icon_insurance_cb_selector"
                android:button="@null"
                android:checked="true"
                android:clickable="false"
                android:focusable="false"
                app:layout_constraintBottom_toBottomOf="@id/tv_balance"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="@id/tv_balance" />

            <TextView
                android:id="@+id/tv_remind_balance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="12dp"
                android:text="使用后剩余 ¥ 12.00"
                android:textColor="#ffafaaaa"
                android:textSize="12sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_balance" />

            <TextView
                android:id="@+id/tv_no_balance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="21dp"
                android:text="不使用"
                android:textColor="#333333"
                android:textSize="14sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_remind_balance" />


            <CheckBox
                android:id="@+id/cb_no_insurance"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_marginRight="12dp"
                android:background="@drawable/icon_insurance_cb_selector"
                android:button="@null"
                android:clickable="false"
                android:focusable="false"
                app:layout_constraintBottom_toBottomOf="@id/tv_no_balance"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="@id/tv_no_balance" />

            <TextView
                android:id="@+id/tv_balance_tip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="19dp"
                android:layout_marginRight="12dp"
                android:background="@drawable/invoice_info_shape"
                android:padding="12dp"
                android:text="· 使用余额不可超过订单签证费用\n· 暂不支持自定义余额使用"
                android:textColor="#ffafaaaa"
                android:textSize="12sp"
                app:layout_constraintTop_toBottomOf="@id/tv_no_balance" />

            <TextView
                android:id="@+id/tv_confirm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="16dp"
                android:layout_marginRight="12dp"
                android:layout_marginBottom="12dp"
                android:background="@drawable/select_applicant_shape"
                android:gravity="center"
                android:text="确定"
                android:textColor="#ffffff"
                android:textSize="16sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_balance_tip" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>