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属性约束你的＆＃34; bullet＆＃34;查看文本视图基线的基线。

子弹视图的约束：

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"

将子弹与包装的TextView的第一行对齐

2 个答案: