ConstraintLayout筆記

居中

底部覆蓋一點的居中效果

        app:layout_constraintTop_toBottomOf="@+id/imageview"
        app:layout_constraintBottom_toBottomOf="@+id/imageview"
        app:layout_constraintStart_toStartOf="@+id/imageview"
        app:layout_constraintEnd_toEndOf="@+id/imageview"

權(quán)重

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 當(dāng)前面的控件隱藏后, 加邊距

<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設(shè)置gone屬性就能將constraint_referenced_ids里相關(guān)的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 動畫復(fù)用

class CircularRevealHelper(context: Context, attrs:AttributeSet) : ConstraintHelper(context,attrs ) {

    /**
     * 所有的布局創(chuàng)建完成的回調(diào)
     */
    @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設(shè)置上onClick
//代碼實現(xiàn)
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)
    }

Folw 排列

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容