利用Guideline实现ConstraintLayout中控件居中

背景

UI要求部分场景居中显示两个按钮，部分场景仅居中显示其中一个按钮，效果图如下：

实现方案

1. activity_main.xml

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    "0dp"
            android:layout_height="62dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"

            android:id="@+id/centerLayout"
            android:background="@color/colorPrimary">

        "156dp"
                android:layout_height="46dp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:background="@color/colorAccent"
                android:id="@+id/aLayout"
                app:layout_constraintEnd_toStartOf="@+id/guideline"
                >

            "操作A"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/textView"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:layout_marginEnd="8dp"
                    android:layout_marginRight="8dp"
                    app:layout_constraintStart_toStartOf="parent"
                    android:layout_marginLeft="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginBottom="8dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:layout_marginTop="8dp"
                    app:layout_constraintTop_toTopOf="parent"/>
        

        "156dp"
                android:layout_height="46dp"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:background="@color/colorAccent"
                android:id="@+id/bLayout"
                app:layout_constraintStart_toStartOf="@+id/guideline"
                android:layout_marginStart="8dp">

            "操作B"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/textView2"
                    app:layout_constraintStart_toStartOf="parent"
                    android:layout_marginLeft="8dp"
                    android:layout_marginStart="8dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:layout_marginEnd="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginTop="8dp"
                    app:layout_constraintTop_toTopOf="parent"
                    android:layout_marginBottom="8dp"
                    app:layout_constraintBottom_toBottomOf="parent"/>
        

        "vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintGuide_percent="0.5"
                android:id="@+id/guideline"/>
    

    "隐藏B"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/hideBBtn"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/showBBtn"
            android:layout_marginBottom="76dp"
            app:layout_constraintBottom_toBottomOf="parent"/>

    "显示B"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/showBBtn"
            app:layout_constraintBaseline_toBaselineOf="@+id/hideBBtn"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintStart_toEndOf="@+id/hideBBtn"
            app:layout_constraintHorizontal_bias="0.5"/>

复制代码

2. activity代码（Kotlin）

hideBBtn.setOnClickListener {
            bLayout.visibility = View.GONE
            guideline.setGuidelinePercent(1.0f)
        }
showBBtn.setOnClickListener {
            bLayout.visibility = View.VISIBLE
            guideline.setGuidelinePercent(0.5f)
        }
复制代码

Demo 代码及apk

gitee.com/cxyzy1/cons…

安卓开发技术分享: blog.csdn.net/yinxing2008…

转载于:https://juejin.im/post/5c089c1ce51d451d8d69b886