ConstraintLayout笔记

作者: 橙果子 | 来源:发表于2023-08-08 15:31 被阅读0次

居中

底部覆盖一点的居中效果

        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)
    }

ConstraintLayout笔记

居中

权重

角度

`constrainedWidth` 约束宽度

`constraintHorizontal_bias`用法

`goneMarginStart`用法

`layout_constraintVertical_chainStyle` 约束链用法

`constraintDimensionRatio`宽高比例

Guideline 辅助线使用

Group 一组控件操作

Layer 一组控件一起操作移动

Barrier

ConstraintHelper 动画复用

Placeholder 占位符

控件位置改变 `constraintSet`

Folw 排列

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ConstraintLayout笔记

居中

权重

角度

constrainedWidth 约束宽度

constraintHorizontal_bias用法

goneMarginStart用法

layout_constraintVertical_chainStyle 约束链用法

constraintDimensionRatio宽高比例

Guideline 辅助线使用

Group 一组控件操作

Layer 一组控件一起操作移动

Barrier

ConstraintHelper 动画复用

Placeholder 占位符

控件位置改变 constraintSet

Folw 排列

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

`constrainedWidth` 约束宽度

`constraintHorizontal_bias`用法

`goneMarginStart`用法

`layout_constraintVertical_chainStyle` 约束链用法

`constraintDimensionRatio`宽高比例

控件位置改变 `constraintSet`