Wie füge ich eine Liste mit Aufzählungszeichen zur Android-Anwendung hinzu?

89

Ich habe meine Frage gegoogelt, aber es wird keine funktionierende Antwort bereitgestellt. Wie füge ich meiner Textansicht eine Liste mit Aufzählungszeichen hinzu?

user590849
quelle

Antworten:

185

Schwer zu tun, da ul / li / ol nicht unterstützt werden. Glücklicherweise können Sie dies als syntaktischen Zucker verwenden:

&#8226; foo<br/>
&#8226; bar<br/>
&#8226; baz<br/>

&#8226;ist die HTML-Entität für eine Liste Aufzählungszeichen Weitere Auswahlmöglichkeiten finden Sie hier http://www.elizabethcastro.com/html/extras/entities.html

Weitere Informationen dazu, welche Tags von Mark Murphy (@CommonsWare) unterstützt werden http://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html Laden Sie diese mit Html.fromHtml

((TextView)findViewById(R.id.my_text_view)).setText(Html.fromHtml(myHtmlString));
browep
quelle
1
Vielen Dank für den Link zur Commonsware-Site, die schon seit einiger Zeit nach so etwas sucht!
Norman H
4
Bitte beachten Sie, dass Sie, wenn Sie die Zeichenfolge aus den Werten / strings.xml (unter Verwendung von context.getString (R.string.yourstring);) abrufen, diese in CDATA einschließen müssen : <string name="string_name"><![CDATA[ &#8226; foo<br /> &#8226; bar... ]]></string>
Quentin S.
5
Dies funktioniert nicht, wenn das Aufzählungszeichen mehr als eine Zeile enthält
thepoosh
es sieht aus wie ul/ liwird jetzt unterstützt stackoverflow.com/questions/9754076/…
hmac
55
  1. browep erklärte nett den Weg über HTML. Die mit der HTML-Entität bereitgestellte Lösung kann hilfreich sein. Aber es enthält nur die Kugel. Wenn Ihr Text umbrochen wird, ist der Einzug nicht korrekt.

  2. Ich habe andere Lösungen gefunden, die eine Webansicht einbetten. Das ist vielleicht für einige angemessen, aber ich denke, es ist eine Art Overkill ... (Das gleiche gilt für die Verwendung einer Listenansicht.)

  3. Ich mag den kreativen Ansatz von Nelson : D, aber er gibt Ihnen nicht die Möglichkeit, einer Textansicht eine ungeordnete Liste hinzuzufügen.

  4. Mein Beispiel für eine ungeordnete Liste mit Aufzählungszeichen mit BulletSpan

    CharSequence t1 = getText(R.string.xxx1);
    SpannableString s1 = new SpannableString(t1);
    s1.setSpan(new BulletSpan(15), 0, t1.length(), 0);
    CharSequence t2 = getText(R.string.xxx2);
    SpannableString s2 = new SpannableString(t2);
    s2.setSpan(new BulletSpan(15), 0, t2.length(), 0);
    textView.setText(TextUtils.concat(s1, s2));

Positiv:

  • Aufzählungszeichen mit korrektem Einzug nach dem Zeilenumbruch.
  • Sie können anderen formatierten oder nicht formatierten Text in einer Instanz von TextView kombinieren
  • Sie können im BulletSpan-Konstruktor festlegen, wie groß der Einzug sein soll.

Negativ:

  • Sie müssen jedes Element der Liste in einer separaten Zeichenfolgenressource speichern. Sie können Ihre Liste also nicht so komfortabel definieren, wie Sie es in HTML könnten.
Diego Frehner
quelle
1
Dieser Ansatz (genau nachgeahmt) funktioniert in 2.2 nicht. Sie haben nur eine einzige Kugel.
Skone
Hallo Skone, es funktioniert im 2.2-Emulator und in den ursprünglichen Android-Builds. Ich habe eine Android-Version gesehen, bei der der Abstand zwischen der Kugel und dem Text ignoriert wurde. Aber die Kugel erschien immer noch. Haben Sie eine neue Zeile am Ende Ihrer Aufzählungszeichen?
Diego Frehner
Diese Lösung funktioniert nicht, wenn Sie den Zeilenabstand in der Textansicht ändern
Marqs
Tolle Möglichkeit, dies mit BulletSpan zu tun, funktioniert perfekt und ist sehr einfach!
Mondblüte
7
Der obige Code funktioniert bei mir !!! Alles was ich tun musste, ist "\ n" am Ende jeder Zeichenfolge in XML
hinzuzufügen
38

Ich habe eine Alternative gefunden. Kopieren Sie einfach dieses Aufzählungszeichen "•" (es ist ein Text) und fügen Sie es in den Text Ihrer Textansicht ein. Sie können die Aufzählungszeichenfarbe ändern, indem Sie die Textfarbe und alle anderen Attribute wie Größe, Höhe und Breite ändern. .. :)

Sie können die Verknüpfung verwenden, um diese Kugel während der Eingabe zu erhalten

für Windows

ALT + 7

für mac

ALT + 8

Ishtiaq
quelle
2
Alt + 7 funktioniert bei mir nicht (vielleicht ist es nur eine Mac- oder Linux-Sache), aber das Kopieren und Einfügen des Unicode-Zeichens hat funktioniert.
Jon
2
Zu Ihrer Information: ALT + 7 funktioniert nur, wenn die Tastatur über einen separaten Nummernblock verfügt.
Aks4125
Wenn Sie das Symbol in Code einfügen, dh in eine Zeichenfolge, beachten Sie die Probleme mit Nicht-ASCII-Zeichen und der Dateicodierung (versuchen Sie, die Codierung der Datei in der unteren rechten Ecke von IntelliJ zu ändern). Besser wäre es, die entsprechende Escape-Sequenz zu verwenden (zB \ u1234).
Gil Vegliach
Weiter so !! Schlägerleben!
GoonerDroid
2
\ u2022 ist die Antwort
user2322082
21

Inspiriert von den verschiedenen Antworten hier habe ich eine Utility-Klasse erstellt, um dies zu einem einfachen Einzeiler zu machen . Dadurch wird eine Liste mit Aufzählungszeichen mit Einzug für umbrochenen Text erstellt. Es verfügt über Methoden zum Kombinieren von Zeichenfolgen, Zeichenfolgenressourcen und Zeichenfolgenarrayressourcen.

Es wird eine CharSequence erstellt, die Sie an eine Textansicht übergeben können. Beispielsweise:

CharSequence bulletedList = BulletListUtil.makeBulletList("First line", "Second line", "Really long third line that will wrap and indent properly.");
textView.setText(bulletedList);

Hoffe es ist hilfreich. Genießen.

Hinweis: Hierbei wird das Systemstandard-Aufzählungszeichen verwendet, ein kleiner Kreis mit der gleichen Farbe wie der Text. Wenn Sie ein benutzerdefiniertes Aufzählungszeichen möchten, sollten Sie BulletSpan in Unterklassen unterteilen und überschreiben, drawLeadingMargin()um das gewünschte Aufzählungszeichen zu zeichnen. Schauen Sie sich die BulletSpan-Quelle an, um eine Vorstellung davon zu bekommen, wie es funktioniert.

public class BulletTextUtil {

/**
 * Returns a CharSequence containing a bulleted and properly indented list.
 *
 * @param leadingMargin In pixels, the space between the left edge of the bullet and the left edge of the text.
 * @param context
 * @param stringArrayResId A resource id pointing to a string array. Each string will be a separate line/bullet-point.
 * @return
 */
public static CharSequence makeBulletListFromStringArrayResource(int leadingMargin, Context context, int stringArrayResId) {
    return makeBulletList(leadingMargin, context.getResources().getStringArray(stringArrayResId));
}

/**
 * Returns a CharSequence containing a bulleted and properly indented list.
 *
 * @param leadingMargin In pixels, the space between the left edge of the bullet and the left edge of the text.
 * @param context
 * @param linesResIds An array of string resource ids. Each string will be a separate line/bullet-point.
 * @return
 */
public static CharSequence makeBulletListFromStringResources(int leadingMargin, Context context, int... linesResIds) {
    int len = linesResIds.length;
    CharSequence[] cslines = new CharSequence[len];
    for (int i = 0; i < len; i++) {
        cslines[i] = context.getString(linesResIds[i]);
    }
    return makeBulletList(leadingMargin, cslines);
}

/**
 * Returns a CharSequence containing a bulleted and properly indented list.
 *
 * @param leadingMargin In pixels, the space between the left edge of the bullet and the left edge of the text.
 * @param lines An array of CharSequences. Each CharSequences will be a separate line/bullet-point.
 * @return
 */
public static CharSequence makeBulletList(int leadingMargin, CharSequence... lines) {
    SpannableStringBuilder sb = new SpannableStringBuilder();
    for (int i = 0; i < lines.length; i++) {
        CharSequence line = lines[i] + (i < lines.length-1 ? "\n" : "");
        Spannable spannable = new SpannableString(line);
        spannable.setSpan(new BulletSpan(leadingMargin), 0, spannable.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        sb.append(spannable);
    }
    return sb;
}

}
BaumwolleBallPaws
quelle
Vielen Dank, sehr geehrter Herr! Ich habe die Funktion makeBulletList verwendet und sie funktioniert wie ein Zauber: D
Aba
Es ist toll! Vielen Dank)
Kulikovman
9

Dies ist bei weitem die einfachste ..

<string name="bullet_ed_list">\n\u2022 He has been Chairman of CFL Manufacturers Committee of ELCOMA, the All India Association of Lighting Equipment Manufacturers.
\n\u2022 He has been the President of Federation of Industries of India (FII).</string>
Amit Tumkur
quelle
8

Gebrauchsfertige Kotlin-Erweiterung

fun List<String>.toBulletedList(): CharSequence {
    return SpannableString(this.joinToString("\n")).apply {
        this@toBulletedList.foldIndexed(0) { index, acc, span ->
            val end = acc + span.length + if (index != this@toBulletedList.size - 1) 1 else 0
            this.setSpan(BulletSpan(16), acc, end, 0)
            end
        }
    }
}

Verwendung:

val bulletedList = listOf("One", "Two", "Three").toBulletedList()
label.text = bulletedList

Farben und Größe:

Verwenden Sie CustomBulletSpan anstelle von BulletSpan, um die Farbe oder Größe des Aufzählungszeichens zu ändern

package com.fbs.archBase.ui.spans

import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.text.Layout
import android.text.Spanned
import android.text.style.LeadingMarginSpan
import androidx.annotation.ColorInt

class CustomBulletSpan(
        private val bulletRadius: Int = STANDARD_BULLET_RADIUS,
        private val gapWidth: Int = STANDARD_GAP_WIDTH,
        @ColorInt private val circleColor: Int = STANDARD_COLOR
) : LeadingMarginSpan {

    private companion object {
        val STANDARD_BULLET_RADIUS = Screen.dp(2)
        val STANDARD_GAP_WIDTH = Screen.dp(8)
        const val STANDARD_COLOR = Color.BLACK
    }

    private val circlePaint = Paint().apply {
    color = circleColor
        style = Paint.Style.FILL
        isAntiAlias = true
    }

    override fun getLeadingMargin(first: Boolean): Int {
        return 2 * bulletRadius + gapWidth
    }

    override fun drawLeadingMargin(
            canvas: Canvas, paint: Paint, x: Int, dir: Int,
            top: Int, baseline: Int, bottom: Int,
            text: CharSequence, start: Int, end: Int,
            first: Boolean,
            layout: Layout?
    ) {
        if ((text as Spanned).getSpanStart(this) == start) {
            val yPosition = (top + bottom) / 2f
            val xPosition = (x + dir * bulletRadius).toFloat()

            canvas.drawCircle(xPosition, yPosition, bulletRadius.toFloat(), circlePaint)
        }
    }
}
Mikhail Sharin
quelle
Können Sie die Größe des Aufzählungszeichens ändern, um sie irgendwie an die Textgröße anzupassen?
nenur
@NoahTanenholtz Sie können die Aufzählungsgröße erhöhen, indem Sie den Argumentwert von BulletSpan () ändern
Mikhail Sharin
Oh, ich dachte, das wäre der Abstand
nenur
Der Abstand wird anstelle der Kugelgröße vergrößert):
Sumit Shukla
@ SumitShukla danke für den Kommentar. Ich habe gerade BulletCustomSpan für die Anpassung von Farben und Größen hinzugefügt
Mikhail Sharin
4

Eine Option, die ich verwendet habe, war das Setzen des Aufzählungszeichens mithilfe eines Stils.

<style name="Text.Bullet">
    <item name="android:background">@drawable/bullet</item>
    <item name="android:paddingLeft">10dp</item>
</style>

Verwendung:

<TextView android:id="@+id/tx_hdr" 
android:text="Item 1" style="@style/Text.Bullet" />
Nelson Ramirez
quelle
Ich habe gerade ein kleines Kugelbild aus dem Internet genommen, um es zu zeichnen. Das grafische Layout in Eclipse zeigt die Grafik, die unter dem Text ausgestreckt ist ... ziemlich weit von dem entfernt, was ich wollte.
JohnK
1
Ich denke, er meinteandroid:drawableLeft=
Blundell
4

Verwenden Sie eine einfache Textansicht mit einer zusammengesetzten Zeichnung. Beispielsweise

<TextView     
    android:text="Sample text"
    android:drawableLeft="@drawable/bulletimage" >
</TextView>
Nouman Hanif
quelle
3

Hier ist eine andere Lösung, bei der einer Textansicht nicht genau eine Liste hinzugefügt wird, aber ich denke, das Ziel ist dasselbe. Es verwendet TableLayout, das nur XML benötigt, und es ist wirklich einfach für kleine geordnete oder ungeordnete Listen. Unten Beispielcode, den ich dafür verwendet habe, keine Codezeile in Java.

Positiv:

  • Sie können beliebig in Tabellenzeilen einfügen, muss keine Textansicht sein
  • Sie können es verwenden, um eine Liste mit Aufzählungszeichen und Nummern oder was auch immer zu erstellen
  • Sie können Einrückungen mit padding oder layout_weight definieren

Negativ:

  • langwierig für sehr lange Listen (es sei denn, Sie verwenden einen schlauen Texteditor mit Regex)
  • Jedes Listenelement wird als separate Zeichenfolgenressource gespeichert

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
    
            >
    
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="0.2"
                android:text="1." />
    
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="3"
                android:text="@string/help_points1" />
        </TableRow>
    
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="0.2"
                android:text="2." />
    
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="3"
                android:text="@string/help_points2" />
        </TableRow>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="0.2"
                android:text="3." />
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="3"
                android:text="@string/help_points3" />
        </TableRow>
    
    
    </TableLayout>

und der Stil:

<style name="helpPagePointsStyle">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">left</item>
</style>
dorsz
quelle
2

Hier ist eine Liste mit Aufzählungszeichen mit einer Kopfzeile und einer Registerkarte vor jedem Element.

public class BulletListBuilder {

    private static final String SPACE = " ";
    private static final String BULLET_SYMBOL = "&#8226";
    private static final String EOL = System.getProperty("line.separator");
    private static final String TAB = "\t";

    private BulletListBuilder() {

    }

    public static String getBulletList(String header, String []items) {
        StringBuilder listBuilder = new StringBuilder();
        if (header != null && !header.isEmpty()) {
            listBuilder.append(header + EOL + EOL);
        }
        if (items != null && items.length != 0) {
            for (String item : items) {
                Spanned formattedItem = Html.fromHtml(BULLET_SYMBOL + SPACE + item);
                listBuilder.append(TAB + formattedItem + EOL);
            }
        }
        return listBuilder.toString();
    }

}
Maksim Dmitriev
quelle
2

Ging völlig übertrieben und machte eine benutzerdefinierte Textansicht.

Verwenden Sie es so:

<com.blundell.BulletTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="--bullet 1 --bullet two --bullet three --bullet four" />

und der Code:

package com.blundell;

import android.content.Context;
import android.text.Html;
import android.util.AttributeSet;
import android.widget.TextView;

public class BulletTextView extends TextView {
    private static final String SPLITTER_CHAR = "--";
    private static final String NEWLINE_CHAR = "<br/>";
    private static final String HTML_BULLETPOINT = "&#8226;";

    public BulletTextView(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.textViewStyle);
    }

    public BulletTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        checkForBulletPointSplitter();
    }

    private void checkForBulletPointSplitter() {
        String text = (String) getText();
        if (text.contains(SPLITTER_CHAR)) {
            injectBulletPoints(text);
        }
    }

    private void injectBulletPoints(String text) {
        String newLinedText = addNewLinesBetweenBullets(text);
        String htmlBulletText = addBulletPoints(newLinedText);
        setText(Html.fromHtml(htmlBulletText));
    }

    private String addNewLinesBetweenBullets(String text) {
        String newLinedText = text.replace(SPLITTER_CHAR, NEWLINE_CHAR + SPLITTER_CHAR);
        newLinedText = newLinedText.replaceFirst(NEWLINE_CHAR, "");
        return newLinedText;
    }

    private String addBulletPoints(String newLinedText) {
        return newLinedText.replace(SPLITTER_CHAR, HTML_BULLETPOINT);
    }

}
Blundell
quelle
Wie können wir die Größe und den Abstand der Kugeln erhöhen?
Sumit Shukla
In diesem Beispiel &#8226;müssten Sie ein anderes Symbol auswählen. Fsymbols.com/signs/bullet-point
Blundell
1

Ich finde, dass dies der einfachste Weg ist, die Textansicht so zu belassen, wie sie in der XML-Datei enthalten ist, und den folgenden Java-Code zu verwenden. es hat perfekt funktioniert für mich.

private static final String BULLET_SYMBOL = "&#8226";

@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tutorial);

    TextView tv = (TextView) findViewById(R.id.yourTextView);

    tv.setText("To perform this exercise you will need the following: "
                        + System.getProperty("line.separator")//this takes you to the next Line
                        + System.getProperty("line.separator")
                        + Html.fromHtml(BULLET_SYMBOL + " Bed")
                        + System.getProperty("line.separator")
                        + Html.fromHtml(BULLET_SYMBOL + " Pillow"));
}
fernand bontemps
quelle
1

Eine Liste mit Aufzählungszeichen kann einfach mit dem <ul>und erstellt werden<li> Tags in der Zeichenfolgenressource erstellt werden.

VERWENDEN SIE NICHT setText (Html.fromHtml (string)) , um den String in Code zu setzen! Stellen Sie den String einfach normal in XML oder mit setText ( String ) ein.

Z.B:

string.xml Datei

<string name="str1">
    <ul>
        <li><i>first</i> item</li>
        <li>item 2</li>
    </ul>
</string>


layout.xml Datei

<TextView
    android:text="@string/str1"
/>


Es wird das folgende Ergebnis erzeugt:

  • erster Punkt
  • Punkt 2


Folgende Tags werden folgendermaßen unterstützt (direkt in die String-Ressource eingebettet):

  • <a> (unterstützt Attribute "href")
  • <Anmerkung>
  • <b>
  • <big>
  • <font> (unterstützt die Attribute "height", "size", "fgcolor" und "bicolor" als Ganzzahlen)
  • <i>
  • <li>
  • <Zelt>
  • <klein>
  • <strike>
  • <sub>
  • <sup>
  • <tt>
  • <u>
Abhishek
quelle
Sie brauchen die<ul>
Blundell
5
Funktioniert nicht. Unterstützte HTML-Tags sind nur <b>, <i> und <u>. developer.android.com/guide/topics/resources/…
Wooff
Hat perfekt für mich funktioniert! Das einzige, was ich tun musste, damit alles funktioniert, war \ n am Anfang jeder Zeile. dh\n<ul><li>a</li> \n<li>b</li> \n<li>c</li></ul>
Jack T
1

Denn single line textSie können einfach Drawables verwenden:

<TextView
    android:id="@+id/txtData"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableStart="@drawable/draw_bullet_list"
    android:drawablePadding="@dimen/padding_8dp"
    android:text="Hello"
    android:textColor="@color/colorBlack" />

draw_bullet_list.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />

    <size
        android:width="12dp"
        android:height="12dp" />

</shape>

Sie können ändern shape, size, colorbasierend auf Ihrer Anforderung.

Sumit Shukla
quelle
0

Sie haben zwei Möglichkeiten, eine Liste mit Aufzählungszeichen zu erstellen:

  • Erstellen Sie die Liste mit HTML (ul, ol) und laden Sie das HTML in eine WebView
  • Laden Sie die Daten in eine ListView und setzen Sie die linke Zeichenfläche Ihrer Textansicht im Listenelementlayout auf ein geeignetes Bild für das Aufzählungszeichen.

Option 1 ist am einfachsten.

Robby Pond
quelle
0

Eine andere Möglichkeit, die fehlenden HTML-Tags zu unterstützen, besteht darin, sie wie hier gezeigt gut zu ersetzen

Android-Entwickler
quelle
0

Wenn Sie eine Aufzählungsliste mit der editText-Struktur erstellen möchten.

Ich habe von diesen Referenzen profitiert

Sie können diese Aufzählungszeichen verwenden

           EditText  edtNoteContent = findViewById(R.id.editText_description_note);            

        edtNoteContent.addTextChangedListener(new TextWatcher(){
            @Override
            public void afterTextChanged(Editable e) {

            }
            @Override
            public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {

            }
            @Override
            public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter)
            {
                if (lengthAfter > lengthBefore) {
                    if (text.toString().length() == 1) {
                        text = "◎ " + text;
                        edtNoteContent.setText(text);
                        edtNoteContent.setSelection(edtNoteContent.getText().length());
                    }
                    if (text.toString().endsWith("\n")) {
                        text = text.toString().replace("\n", "\n◎ ");
                        text = text.toString().replace("◎ ◎", "◎");
                        edtNoteContent.setText(text);
                        edtNoteContent.setSelection(edtNoteContent.getText().length());
                    }
                }
            }
        });
Yavuz Yoldaş
quelle