一手遮天 Android - view(布局类): ConstraintLayout 约束布局控件(屏障/分组/占位)

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

一手遮天 Android - view(布局类): ConstraintLayout 约束布局控件(屏障/分组/占位)

示例如下:

/view/layout/ConstraintLayoutDemo3.java

/**
 * ConstraintLayout - 约束布局控件
 */

package com.webabcd.androiddemo.view.layout;

import androidx.constraintlayout.widget.Barrier;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.constraintlayout.widget.Group;
import androidx.constraintlayout.widget.Placeholder;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.webabcd.androiddemo.R;

public class ConstraintLayoutDemo3 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_layout_constraintlayoutdemo3);

        // 演示如何在 java 中控制 ConstraintLayout 布局,仅代码演示,没有对应的显示效果
        sample();
    }

    private void sample() {
        ConstraintLayout constraintLayout = new ConstraintLayout(this);
        TextView textView1 = new TextView(this);
        int textView1Id = View.generateViewId();
        textView1.setId(textView1Id);
        TextView textView2 = new TextView(this);
        int textView2Id = View.generateViewId();
        textView2.setId(textView2Id);
        Barrier barrier = new Barrier(this);
        int barrierId = View.generateViewId();
        barrier.setId(barrierId);
        Group group = new Group(this);
        Placeholder placeholder = new Placeholder(this);
        constraintLayout.addView(textView1);
        constraintLayout.addView(textView2);
        constraintLayout.addView(barrier);
        constraintLayout.addView(group);
        constraintLayout.addView(placeholder);

        ConstraintSet constraintSet = new ConstraintSet();

        // 对应 xml 中的 Barrier
        // 第 2 个参数对应 xml 中的 barrierDirection
        // 第 3...n 个参数对应 xml 中的 constraint_referenced_ids
        constraintSet.createBarrier(barrierId, Barrier.LEFT, textView1Id, textView2Id);

        // 对应 xml 中的 Group
        // 参数对应 xml 中的 constraint_referenced_ids
        int[] referencedIds = {textView1Id, textView2Id};
        group.setReferencedIds(referencedIds);

        // 对应 xml 中的 Placeholder
        // 参数对应 xml 中的 content
        placeholder.setContentId(textView1Id);

        constraintSet.applyTo(constraintLayout);
    }
}

/layout/activity_view_layout_constraintlayoutdemo3.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    ConstraintLayout - 约束布局控件
        用于参照指定控件来定位当前控件,参照控件可以是指定 id 的控件,也可以是固定值“parent”(父容器)

    本例由于演示 ConstraintLayout 的屏障/分组/占位
-->
<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">

    <!--
        Barrier - 屏障约束(屏障可以位于 n 个控件所在的矩形区域的某一侧,然后其他控件可以相对于此屏障来进行约束)
            constraint_referenced_ids - 指定的 n 个控件(多个用逗号隔开)
            barrierDirection - 使屏障位于指定的 n 个控件的某一侧(top, right, bottom, left, start, end)
    -->
    <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView1" />
    <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView222222"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />
    <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="textView1,textView2" />
    <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView3"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />


    <!--
        Group - 用于对指定的 n 个控件进行分组
            constraint_referenced_ids - 指定的 n 个控件(多个用逗号隔开)
            visibility - 可以设置组内的所有控件的 visibility 状态
    -->
    <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView4"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />
    <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView5"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        app:layout_constraintLeft_toRightOf="@+id/textView4" />
    <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView6"
        app:layout_constraintTop_toTopOf="@+id/textView5"
        app:layout_constraintLeft_toRightOf="@+id/textView5" />
    <androidx.constraintlayout.widget.Group android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="textView4,textView6" />


    <!--
        Placeholder - 占位器
            content - 使指定 id 的控件显示到 Placeholder 所在的位置
    -->
    <androidx.constraintlayout.widget.Placeholder android:layout_width="wrap_content" android:layout_height="wrap_content"
        app:content="@+id/textView7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
    <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView7" />

</androidx.constraintlayout.widget.ConstraintLayout>

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

posted @ 2021-05-31 12:40  webabcd  阅读(459)  评论(0编辑  收藏  举报