一手遮天 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>