約束佈局的使用(一)

一、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>