居中
底部覆盖一点的居中效果
app:layout_constraintTop_toBottomOf="@+id/imageview"
app:layout_constraintBottom_toBottomOf="@+id/imageview"
app:layout_constraintStart_toStartOf="@+id/imageview"
app:layout_constraintEnd_toEndOf="@+id/imageview"
权重
layout_constraintHorizontal_weight需要配合layout_width为0dp(math constraint) 时使用
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@+id/view2"
android:background="#666"
/>
<View
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintEnd_toStartOf="@id/view3"
app:layout_constraintStart_toEndOf="@id/view1"
app:layout_constraintTop_toTopOf="parent"
android:background="#999"
/>
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/view2"
app:layout_constraintTop_toTopOf="parent"
android:background="#e1e1e1"
/>
角度
constraintCircleAngle 是顺时针的角度
constraintCircleRadius 距离
constraintCircle 约束控件的id
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="150dp"
app:layout_constraintCircle="@+id/centerimag"
constrainedWidth 约束宽度
文字显示在图片下方, 文字的宽度不可以超过图片
constrainedWidth 约束宽度
<ImageView
android:id="@+id/centerimag"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
android:background="#e1e1e1"
app:layout_constraintTop_toBottomOf="@+id/centerimag"
app:layout_constraintStart_toStartOf="@+id/centerimag"
app:layout_constraintEnd_toEndOf="@+id/centerimag"
android:layout_marginTop="20dp"
app:layout_constrainedWidth="true"
/>
constraintHorizontal_bias用法
constraintHorizontal_bias的值 0靠左边, 1靠右,0.5居中
<ImageView
android:id="@+id/centerimag"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈哈哈哈哈哈哈哈哈哈哈"
app:layout_constrainedWidth="true"
android:background="#e1e1e1"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constrainRight_toLeftOf="@+id/centerimag"
app:layout_constraintStart_toEndOf="@+id/centerimag"
app:layout_constraintTop_toTopOf="parent"
/>
goneMarginStart用法
goneMarginStart 当前面的控件隐藏后, 加边距
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈哈哈哈哈哈哈哈哈哈哈"
android:background="#e1e1e1"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="@+id/centerimag"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_goneMarginStart="20dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintStart_toEndOf="@+id/textview"
app:layout_constraintTop_toTopOf="parent"
/>
layout_constraintVertical_chainStyle 约束链用法
layout_constraintVertical_chainStyle 将两个控件打包, 只能写在第一个控件上
<ImageView
app:layout_constraintVertical_chainStyle="packed"
android:id="@+id/centerimag"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toTopOf="@+id/textview"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginStart="20dp"
/>
<TextView
android:id="@+id/textview"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#e1e1e1"
android:text="哈哈哈哈哈哈哈哈哈哈哈哈哈"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/centerimag"
app:layout_constraintStart_toStartOf="@+id/centerimag"
app:layout_constraintTop_toBottomOf="@+id/centerimag" />
<ImageView
android:id="@+id/view1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/view2"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/view2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/view3"
app:layout_constraintStart_toEndOf="@id/view1" />
<ImageView
android:id="@+id/view3"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/view2" />
constraintDimensionRatio宽高比例
需要配合宽或高为0dp使用
app:layout_constraintDimensionRatio="1:1"
Guideline 辅助线使用
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<ImageView
android:id="@+id/view2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintEnd_toStartOf="@id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈哈哈哈"
app:layout_constraintLeft_toRightOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
Group 一组控件操作
//对group设置gone属性就能将constraint_referenced_ids里相关的id都隐藏
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="tv1,tv2,tv3" />
Layer 一组控件一起操作移动
Barrier
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="tv1,tv2"
/>
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈哈哈哈"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/imageview1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintStart_toEndOf="@+id/tv1"
app:layout_constraintTop_toTopOf="@+id/tv1" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageview1"
/>
<ImageView
android:id="@+id/imageview2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintStart_toStartOf="@+id/imageview1"
app:layout_constraintTop_toTopOf="@+id/tv2"
/>
ConstraintHelper 动画复用
class CircularRevealHelper(context: Context, attrs:AttributeSet) : ConstraintHelper(context,attrs ) {
/**
* 所有的布局创建完成的回调
*/
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun updatePostLayout(container: ConstraintLayout) {
super.updatePostLayout(container)
referencedIds.forEach {
val view=container.getViewById(it)
val radius:Int= hypot(view.width.toDouble(),view.height.toDouble()).toInt()
ViewAnimationUtils.createCircularReveal(view,0,0,0f,0f)
.setDuration(2000L)
.start()
}
}
}
//xml中引用
<com.example.kotlinstudy.view.CircularRevealHelper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="imageview1,imageview2" />
Placeholder 占位符
<androidx.constraintlayout.widget.Placeholder
android:id="@+id/placeholder"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
//搞几个imageview设置上onClick
//代码实现
fun onClick(view:View){
findViewById<Placeholder>(R.id.placeholder).setContentId(view.id)
}
控件位置改变 constraintSet
fun onClick(view: View) {
val constrainLayout: ConstraintLayout = view as ConstraintLayout
val constraintSet: ConstraintSet = ConstraintSet().apply {
clone(constrainLayout)
connect(
R.id.imageview1,
ConstraintSet.BOTTOM,
ConstraintSet.PARENT_ID,
ConstraintSet.BOTTOM
)
}
constraintSet.applyTo(constrainLayout)
}
