时间戳

首页 > 解决方案 > Android布局：在ConstraintLayout中对齐CheckBox和TextView的文本

android - Android布局：在ConstraintLayout中对齐CheckBox和TextView的文本

问题描述

我想在 Android 应用程序 ConstraintLayout 中将 TextView 的文本（不是图标和复选框）与信息图标和 CheckBox 左对齐。

信息图标比复选框略大，因此 CheckBox 的文本从 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>

标签： androidandroid-layout

解决方案

我不知道有一种方法可以与 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 的起始边距以获得所需的间距。

推荐阅读