如何在約束布局android中居中元素

我想將約束布局中的元素居中。我添加了一個新的文本視圖，它Turns charger...保留在sleep when inactive文本視圖的下方，這會導致它在卡片視圖的頂部展開并空出間隙

有沒有辦法可以將所有元素居中？

<androidx.cardview.widget.CardView
            android:id="@ id/cvTapToWake"
            style="@style/Tile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:layout_marginHorizontal="24dp"
            android:clipChildren="false"
            android:clipToPadding="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/cvLockCharger">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/tapToWake"
                style="@style/Tile"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white_screen_bg"
                android:clipChildren="false"
                android:clipToPadding="false"

                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@ id/lockChargerButtons"
                app:layout_goneMarginTop="32dp">

                <ImageView
                    android:id="@ id/ivTapToAwake"
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:layout_marginVertical="26dp"
                    android:layout_marginStart="24dp"
                    android:src="@drawable/ic_wake"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@ id/tvTapToWake"
                    style="@style/Text.Medium.Bold"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginStart="@dimen/text_margin"
                    android:text="@string/tap_to_wake"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toEndOf="@ id/ivTapToAwake"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.appcompat.widget.SwitchCompat
                    android:id="@ id/tapToAwakeSwitch"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_marginEnd="16dp"
                    android:theme="@style/SwitchCompatTheme"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:checked="true" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:paddingBottom="16dp"
                    android:text="@string/turn_off_screen"
                    app:layout_constraintStart_toStartOf="@ id/tvTapToWake"
                    app:layout_constraintEnd_toEndOf="@ id/tapToAwakeSwitch"
                    app:layout_constraintTop_toBottomOf="@ id/tvTapToWake" />

            </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.cardview.widget.CardView>

這就是現在的樣子，頂部有空格

您能否建議我如何洗掉頂部的空白空間并將所有元素居中

謝謝R

uj5u.com熱心網友回復：

要將兩者TextViews垂直居中，您需要添加相互垂直約束，并將它們都約束到最近的父級垂直邊緣。經過：

• app:layout_constraintBottom_toBottomOf="parent"從tvTapToWake底部轉移TextView
• 添加app:layout_constraintBottom_toTopOf="@ id/bottomTV"到tvTapToWake

而且您已經添加了其他兩個約束。

但這會使底部TextView與 RHS 開關相交。您可能通過修改底部TextView約束app:layout_constraintEnd_toEndOf="@ id/tapToAwakeSwitch"來解決這個問題app:layout_constraintEnd_toStartOf="@ id/tapToAwakeSwitch"

應用這個：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:id="@ id/cvTapToWake"
    style="@style/Tile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:layout_marginHorizontal="24dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@ id/cvLockCharger"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@ id/tapToWake"
        style="@style/Tile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_screen_bg"
        android:clipChildren="false"
        android:clipToPadding="false"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/lockChargerButtons"
        app:layout_goneMarginTop="32dp">

        <ImageView
            android:id="@ id/ivTapToAwake"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginVertical="26dp"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_wake"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@ id/tvTapToWake"
            style="@style/Text.Medium.Bold"
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toTopOf="@ id/bottomTV"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/text_margin"
            android:text="@string/tap_to_wake"
            app:layout_constraintStart_toEndOf="@ id/ivTapToAwake"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.SwitchCompat
            android:id="@ id/tapToAwakeSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:theme="@style/SwitchCompatTheme"
            app:layout_constraintEnd_toEndOf="parent"
            tools:checked="true" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:id="@ id/bottomTV"
            android:paddingBottom="16dp"
            android:text="@string/turn_off_screen"
            app:layout_constraintEnd_toStartOf="@ id/tapToAwakeSwitch"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@ id/tvTapToWake"
            app:layout_constraintEnd_toEndOf="@ id/tapToAwakeSwitch"
            app:layout_constraintTop_toBottomOf="@ id/tvTapToWake" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

TextView解決此問題的另一個選項是通過添加app:layout_constraintBaseline_toBaselineOf="@ id/tvTapToWake"到tvTapToWake, 并從開關中洗掉垂直約束來將開關基線與頂部對齊：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:id="@ id/cvTapToWake"
    style="@style/Tile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:layout_marginHorizontal="24dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@ id/cvLockCharger"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@ id/tapToWake"
        style="@style/Tile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_screen_bg"
        android:clipChildren="false"
        android:clipToPadding="false"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/lockChargerButtons"
        app:layout_goneMarginTop="32dp">

        <ImageView
            android:id="@ id/ivTapToAwake"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginVertical="26dp"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_wake"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@ id/tvTapToWake"
            style="@style/Text.Medium.Bold"
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toTopOf="@ id/bottomTV"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/text_margin"
            android:text="@string/tap_to_wake"
            app:layout_constraintStart_toEndOf="@ id/ivTapToAwake"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.SwitchCompat
            android:id="@ id/tapToAwakeSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBaseline_toBaselineOf="@ id/tvTapToWake"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:theme="@style/SwitchCompatTheme"
            app:layout_constraintEnd_toEndOf="parent"
            tools:checked="true" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:id="@ id/bottomTV"
            android:paddingBottom="16dp"
            android:text="@string/turn_off_screen"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@ id/tvTapToWake"
            app:layout_constraintEnd_toEndOf="@ id/tapToAwakeSwitch"
            app:layout_constraintTop_toBottomOf="@ id/tvTapToWake" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

uj5u.com熱心網友回復：

假設您希望所有文本都經過開關的底部：

您的開關是頂行中最高的東西，因此您應該將影像視圖和第一個文本視圖垂直居中，因此將它們都更改為對開關的頂部和底部而不是父級的頂部和底部約束。此外，從影像視圖中洗掉 marginVertical，因為這會阻止它在開關上居中。

然后洗掉開關的底部約束，使其不在父級上垂直居中。將第二個文本視圖的頂部約束到開關的底部，因為這是頂行小部件的最低點。

直接在 ConstraintLayout 上設定頂部和底部填充以補償移除的內部垂直邊距。

標籤：安卓 xml 安卓布局 安卓约束布局 安卓-xml

上一篇：Cardview在動態生成時顯示兩次

下一篇：按鈕不更新的背景-Andorid