将项目符号与包装的 TextView 的第一行对齐

Question

我正在尝试在 Android 中创建一个项目符号列表，其中项目符号与 TextView 中第一行的垂直中心对齐，如下所示：

单个项目符号/文本行的 XML 是这样的：

<android.support.constraint.ConstraintLayout
    android:id="@+id/setup_intro_bullet_first_container"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/setup_intro_bullet_first"
        style="@style/TextAppearance.AppCompat.Headline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/bullet"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/setup_intro_bullet_first_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:paddingTop="14dp"
        android:text="@string/setup_intro_benefit_notification"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/setup_intro_bullet_first"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

这里我在 TextView 上使用填充来与项目符号对齐，但这不是解决方案，因为对齐方式在其他分辨率中不一致。我还尝试将项目符号字符放入文本字符串本身中，但第二行文本将位于项目符号下方，这不是我想要的。我想要一些关于如何实现这一目标的建议。

Answer 1

我想出的解决方案是创建一个圆圈

Drawable

并在

ImageView

中使用它。您可以定义

ImageView

的基线，这使我能够将其与

TextView

的基线正确对齐。这是圆 XML：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
</shape>

以及布局 XML：

<ImageView
    android:id="@+id/setup_intro_bullet_first"
    style="@style/TextAppearance.AppCompat.Headline"
    android:layout_width="4dp"
    android:layout_height="4dp"
    android:baseline="7dp"
    android:src="@drawable/circle"
    app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_first_text"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/setup_intro_bullet_first_text" />

<TextView
    android:id="@+id/setup_intro_bullet_first_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="4dp"
    style="@style/TextAppearance.AppCompat.Subhead"
    android:text="@string/setup_intro_benefit_notification"
    android:textColor="@android:color/white"
    app:layout_constraintLeft_toRightOf="@id/setup_intro_bullet_first"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Answer 2

使用

app:layout_constraintBaseline_toBaselineOf

属性将“项目符号”视图的基线限制为文本视图的基线。

项目符号视图的限制：

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/setup_intro_bullet_first_text"
app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_first_text"

您的文字：

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/setup_intro_bullet_first"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Answer 3

对于 Android Pie (28) 及以上版本，您可以直接使用 BulletSpan。对于以下版本，您可以使用

DrawableMarginSpan

，但带有损坏的可绘制加项目符号

"\u2022"

。

val yourSpan = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        BulletSpan(
            8.px,
            ContextCompat.getColor(requireContext(), R.color.gray),
            2.px,
        )
    } else {
        DrawableMarginSpan(ContextCompat.getDrawable(requireContext(), R.drawable.ic_circle)!!, 20)
    }

val yourString = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
   "Just string"
} else {
    "\u2022" + " Just string"
}

yourTextView.text = SpannableStringBuilder(yourString).apply {
                setSpan(
                    yourSpan,
                    startIndex,
                    endIndex,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
                )
            }

损坏的可绘制代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/gray"/>
</shape>