一手遮天 Android - view(布局类): ConstraintLayout 约束布局控件(链)
一手遮天 Android - view(布局类): ConstraintLayout 约束布局控件(链)
示例如下:
/view/layout/ConstraintLayoutDemo2.java
/**
* ConstraintLayout - 约束布局控件
*/
package com.webabcd.androiddemo.view.layout;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import com.webabcd.androiddemo.R;
public class ConstraintLayoutDemo2 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_layout_constraintlayoutdemo2);
// 演示如何在 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);
constraintLayout.addView(textView1);
constraintLayout.addView(textView2);
ConstraintSet constraintSet = new ConstraintSet();
// 实现一个横向链式约束(textView1, textView2 为一个横向链式约束)
constraintSet.connect(textView1Id, ConstraintSet.RIGHT, textView2Id, ConstraintSet.LEFT, 0);
constraintSet.connect(textView2Id, ConstraintSet.LEFT, textView1Id, ConstraintSet.RIGHT, 0);
// 对应 xml 中的 layout_constraintHorizontal_chainStyle
constraintSet.setHorizontalChainStyle(textView1Id, ConstraintSet.CHAIN_SPREAD);
// 对应 xml 中的 layout_constraintHorizontal_weight
constraintSet.setHorizontalWeight(textView1Id, 1.0f);
// 对应 xml 中的 layout_constraintVertical_chainStyle
constraintSet.setVerticalChainStyle(textView1Id, ConstraintSet.CHAIN_SPREAD);
// 对应 xml 中的 layout_constraintVertical_weight
constraintSet.setVerticalWeight(textView1Id, 1.0f);
constraintSet.applyTo(constraintLayout);
}
}
/layout/activity_view_layout_constraintlayoutdemo2.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">
<!--
链式约束分为横向链和纵向链
下面的例子是一个横向链(即当 a 的左侧约束至父容器的左侧,a 的右侧约束至 b 的左侧;b 的左侧约束至 a 的右侧,b 的右侧约束至 c 的左侧;c 的左侧约束至 b 的右侧,c 的右侧约束至父容器的右侧;这种方式的约束则可以称 a b c 为横向链式约束)
layout_constraintHorizontal_chainStyle - 水平链式约束的样式
spread - 链中的所有控件平均分配空间
spread_inside - 链中的所有控件平均分配空间(链的两端的控件贴紧父容器)
packed - 链中的所有控件一个紧挨着一个
layout_constraintVertical_chainStyle - 垂直链式约束的样式
spread - 链中的所有控件平均分配空间
spread_inside - 链中的所有控件平均分配空间(链的两端的控件贴紧父容器)
packed - 链中的所有控件一个紧挨着一个
layout_constraintHorizontal_weight - 横向链中控件的所占空间的权重(注:需要将 layout_width 设置为 0)
layout_constraintVertical_weight - 纵向链中控件的所占空间的权重(注:需要将 layout_height 设置为 0)
-->
<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread" />
<TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView2"
app:layout_constraintLeft_toRightOf="@+id/textView1"
app:layout_constraintRight_toLeftOf="@+id/textView3" />
<TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView3"
app:layout_constraintLeft_toRightOf="@+id/textView2"
app:layout_constraintRight_toRightOf="parent" />
<TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView4"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView5"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<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"
app:layout_constraintRight_toLeftOf="@+id/textView6" />
<TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView6"
app:layout_constraintTop_toTopOf="@+id/textView4"
app:layout_constraintLeft_toRightOf="@+id/textView5"
app:layout_constraintRight_toRightOf="parent" />
<TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView7"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView8"
app:layout_constraintHorizontal_chainStyle="packed" />
<TextView android:id="@+id/textView8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView8"
app:layout_constraintTop_toTopOf="@+id/textView7"
app:layout_constraintLeft_toRightOf="@+id/textView7"
app:layout_constraintRight_toLeftOf="@+id/textView9" />
<TextView android:id="@+id/textView9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView9"
app:layout_constraintTop_toTopOf="@+id/textView7"
app:layout_constraintLeft_toRightOf="@+id/textView8"
app:layout_constraintRight_toRightOf="parent" />
<TextView android:id="@+id/textView10" android:layout_height="wrap_content" android:background="@color/red" android:text="TextView10"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="@+id/textView7"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView11"
app:layout_constraintHorizontal_weight="2" />
<TextView android:id="@+id/textView11" android:layout_height="wrap_content" android:background="@color/green" android:text="TextView11"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="@+id/textView10"
app:layout_constraintLeft_toRightOf="@+id/textView10"
app:layout_constraintRight_toLeftOf="@+id/textView12"
app:layout_constraintHorizontal_weight="1" />
<TextView android:id="@+id/textView12" android:layout_height="wrap_content" android:background="@color/blue" android:text="TextView12"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="@+id/textView10"
app:layout_constraintLeft_toRightOf="@+id/textView11"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2" />
</androidx.constraintlayout.widget.ConstraintLayout>