Android 布局：在 ConstraintLayout 中對齊 CheckBox 和 TextView 的文本

Question

我想將 TextView 的文本（不是圖標和復選框）與 Android 應用程序 ConstraintLayout 中的信息圖標和復選框左對齊。

信息圖標比復選框稍大，因此復選框的文本從 TextView 文本的左側開始。

ASCII 藝術插圖（我希望“This”的“T”與“The”的“T”對齊）：

( i )    This is the information text
[x]    The text of this Checkbox is not aligned with the text of the TextView

XML 布局的摘錄：

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textInfo"
        style="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:drawablePadding="8dp"
        android:text="This is some very important information that has to be aligned left"
        app:drawableStartCompat="@drawable/icon_info"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <CheckBox
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="This is the Text of the Checkbox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textInfo" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

我不知道有沒有一種方法可以對齊 CheckBox 中文本的開頭，您可以做的是使用單獨的 TextView 來保存 CheckBox 的文本，並將信息圖標的 TextView 對齊到那。

XML 布局示例：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/iv_info"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_info_icon"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/iv_info"
        app:layout_constraintBottom_toBottomOf="@id/iv_info"
        app:layout_constraintStart_toStartOf="@id/tv_checkbox_text"
        android:text="This is the info text"/>

    <CheckBox
        android:id="@+id/cb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/iv_info"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_checkbox_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/cb"
        app:layout_constraintBottom_toBottomOf="@id/cb"
        app:layout_constraintStart_toEndOf="@id/cb"
        android:layout_marginStart="20dp"
        android:text="This is the checkbox text"/>

</androidx.constraintlayout.widget.ConstraintLayout>

布局圖：

請注意，您必須調整與 CheckBox 關聯的 TextView 的起始邊距以獲得所需的間距。

Answer 2

我這樣做的方法是將文本提取到 TextViews 中，添加垂直參考線並將文本與此參考線對齊。

Answer 3

這是我的代碼

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/layout_head"
        tools:layout_editor_absoluteX="15dp">


        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/transferBttnChooseRoom"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/pilih"
            android:textColor="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/transferChoosedRoom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="@string/pilih_room_transfer"
            android:textSize="15sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/transferBttnChooseRoom"
            app:layout_constraintTop_toTopOf="parent"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

也許你可以像這樣改變你的情況