對齊子彈帶包裹的TextView

我試圖創建的Android項目符號列表，其中子彈對準第一線的垂直中心在一個TextView像這樣的第一行：對齊子彈帶包裹的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與子彈一致，但由於取向不是在其他各項決議，這不是一個解決方案。我也嘗試將子彈字符放在文本字符串本身中，但第二行文本將位於子彈的下方，這不是我想要的。我想就如何做到這一點提供一些建議。

來源

2017-10-14 Jake Moritz

你所說的'第二行文字的意思是bullet'下會坐？ –

我會使用**複合可繪製**，它將與文本保持分離。如果它有意義的話，它就是一個「TextView中的ImageView」。 –

我不認爲複合drawable在這種情況下起作用，因爲如果文本被包裝到多行中，它將垂直居中在整個視圖中，而且聽起來像OP希望它始終與中心對齊文本的第一行。 –

我想出了一個解決方案是創建一個圓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" />

來源

2017-10-15 11:21:38

使用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"

來源

2017-10-14 17:25:48

限制基線是一個好主意，但我認爲這不適用於此。子彈字符漂浮在它自己的基線之上。 https://i.imgur.com/cHhLN4u.png –

@JakeMoritz也許你可以使用一個不同的角色......一個不會坐得太高的人。我不知道你在使用什麼，因爲它隱藏在字符串資源的後面，但也許互動字符（'\ u00B7'或？）可以工作？ –

謝謝你的建議。我嘗試了多個其他unicode字符的點，但他們只是沒有正確排列。 –

對齊子彈帶包裹的TextView

回答

相關問題