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

【问题标题】：Align bullet with first line of a wrapped TextView将项目符号与包装的 TextView 的第一行对齐
【发布时间】：2017-10-15 19:21:38
【问题描述】：

我正在尝试在 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 上使用填充来与项目符号对齐，但这不是解决方案，因为对齐在其他分辨率中不一致。我也尝试将项目符号字符放在文本字符串本身中，但第二行文本将位于项目符号下方，这不是我想要的。我想就如何做到这一点提出一些建议。

【问题讨论】：

second line of text will sit under the bullet 是什么意思？
我会使用 compound drawable，它将与文本分开。如果有意义的话，它有点像“TextView 中的 ImageView”。
我不认为复合可绘制对象在这种情况下有效，因为如果文本包裹到多行，它将在整个视图中垂直居中，并且听起来像是 OP 希望它始终与文本顶行的中心对齐。
最好让它始终垂直居中。
@AshishRanjan 我的意思是如果文本换行到第二行，第二行的文本将直接在点下开始，这是我不想要的。在屏幕截图中，您可以看到第二行不是从点开始，而是与第一行文本对齐。

标签： android android-layout android-constraintlayout

【解决方案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" />

【讨论】：

我需要为我的案例添加的另一个属性是baselineAlignBottom="true"，以便将 ImageView 的基线设置在视图的底部而不是顶部。
有人可以附上修复的截图吗？我很想看看它是否是我需要的修复程序。

【解决方案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"

【讨论】：

限制基线是个好主意，但我认为这在这里行不通。项目符号字符明显高于其自己的基线。 i.imgur.com/cHhLN4u.png
@JakeMoritz 也许你可以使用不同的角色......一个不会坐得太高的角色。我不知道您在使用什么，因为它隐藏在字符串资源后面，但也许插点字符（\u00B7 或·）会起作用？
感谢您的建议。我为点尝试了多个其他 unicode 字符，但它们没有正确排列。
@JakeMoritz 这让我很困扰，所以我尝试将您的布局复制/粘贴到我的编辑器中，结果发现问题出在子弹 TextView 上的 style 属性；删除该样式，子弹垂直方向不会那么高。我假设正在发生的事情是项目符号视图的文本大小明显大于文本视图的文本大小，因此项目符号被“推”了起来。您可以使用相同的文本大小和 bold 文本样式来确保项目符号相当大。