constraintlayout_androidApi:ConstraintLayout

Google API： https://developer.android.com/reference/android/support/constraint/ConstraintLayout

---

常用组件和属性

• 位置约束
• 百分比方法设置宽高
• 宽高比例 ratio 设置比例
• 用 ⚪ 半径角度放置组件
• 参照线 guideline 放置组件
• Group 设置组内的 visibility
• placeholder 放置组件
• chain 链式约束
• bias 设置左右偏移百分比

---

布局的理想模板（百分比）

利用bias和长宽 percent可以实现百分比布局效果从而适配各种尺寸的屏幕
无论屏幕怎么变化百分比不会改变
布局的核心问题：位置和尺寸，将控件摆放的位置和控件的大小尺寸确定，理论上可以解决 UI 设计适配问题

<TextView
        android:id="@+id/textView9"
        android:text="TextView"

        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintHeight_percent="0.1"

        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintVertical_bias="0.8"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        />

---

位置约束

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

---

百分比宽高

app:layout_constraintWidth_percent="0.5"
app:layout_constraintHeight_percent="0.5"

---

ratio 宽高比

app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintDimensionRatio="W,16:9"
app:layout_constraintDimensionRatio="16:9"

可以指定固定宽的情况下调整高，H,16:9
也可以固定高的情况下调整宽，W,16:9

---

圆形布局

app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45"

---

参考线

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp">
 </androidx.constraintlayout.widget.Guideline>

---

group 形式设置组内控件的 visibility

<androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="textView,textView2"
        >

---

placeholder 预留控件位置占位用

<androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="23dp"
        android:background="@color/colorAccent"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5">
 </androidx.constraintlayout.widget.Placeholder>

代码中可以动态加载控件到 placeholder 中

button = findViewById(R.id.placebtn);
        placeholder = findViewById(R.id.placeholder);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                placeholder.setContentId(R.id.placebtn);
            }
        });

---

chain 链式约束

控件之间形成相互约束即可创建链
或者直接选中多个控件点击 create chain

chain 有很多种 style 设置不同的样式

在 chain head 也就是第一个控件设置 style

---

bias 偏移百分比

需要设置水平方向位置摆放百分比需要指定
左右都要以 parant 为约束
同理需要指定为垂直方向则要指定竖直方向都为 parant 约束

<TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_bias="0.8"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />