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>  

利用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 控件相互约束形成链
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"
        />