Pregunta ¿Cómo agregar una lista con viñetas a la aplicación de Android?


He buscado en Google mi pregunta, pero no se ha proporcionado ninguna respuesta. ¿Cómo agrego una lista con viñetas a mi vista de texto?


73
2018-02-14 13:38


origen


Respuestas:


Difícil de hacer como ul / li / ol no son compatibles. Afortunadamente puedes usar esto como azúcar sintáctico:

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

&#8226; es la entidad html para una lista de balas más opciones están aquí http://www.elizabethcastro.com/html/extras/entities.html

más sobre las etiquetas compatibles con Mark Murphy (@CommonsWare) http://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html Cargue eso con Html.fromHtml

((TextView)findViewById(R.id.my_text_view)).setText(Html.fromHtml(myHtmlString));

167
2018-05-05 01:36



  1. browep explicó muy bien sobre HTML. La solución provista con la entidad html puede ser útil. Pero incluye solo la bala. Si el texto se ajusta, la sangría no será correcta.

  2. Encontré otras soluciones que incluyen una vista web. Eso tal vez sea apropiado para algunos, pero creo que es un poco exagerado ... (Lo mismo con el uso de una vista de lista).

  3. me gusta el enfoque creativo de Nelson : D, pero no le da la posibilidad de agregar una lista desordenada a una vista de texto.

  4. Mi ejemplo de una lista desordenada con viñetas utilizando 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));
    

Positivo:

  • Viñetas con sangría correcta después del texto.
  • Puede combinar otro texto formateado o no formateado en una instancia de TextView
  • Puede definir en el constructor BulletSpan qué tan grande debe ser la sangría.

Negativo:

  • Debe guardar cada elemento de la lista en un recurso de cadena separado. Así que no puedes definir tu lista cómodamente en HTML.

46
2017-08-05 10:33



He encontrado una alternativa ... simplemente copie esta viñeta "•" (es un texto) y pegue el texto de la vista de texto, puede cambiar el color de la viñeta cambiando el color del texto y todos los demás atributos como el tamaño y el ancho de la altura. .. :)

puedes usar el atajo para obtener esta bala mientras escribes

para ventanas

ALT + 7 

para Mac

ALT + 8


22
2018-04-11 04:32



Inspirado por las diversas respuestas aquí, creé un Clase de utilidad para hacer esto un trazador de líneas sencillo. Esto creará una lista con viñetas con sangría para texto envolvente. Tiene métodos para combinar cadenas, recursos de cadena y recursos de matriz de cadenas.

Creará una CharSequence que puede pasar a un TextView. Por ejemplo:

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

Espero que sea útil. Disfrutar.

Nota: Esto usará la viñeta estándar del sistema, un pequeño círculo del mismo color que el texto. Si desea una viñeta personalizada, considere la creación de subclases BulletSpan y anulando su drawLeadingMargin() para dibujar la bala que quieres. Eche un vistazo a la Fuente BulletSpan para una idea de cómo funciona

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;
}

}

17
2018-05-10 16:20



Una opción que utilicé fue establecer la viñeta dibujable usando un estilo.

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

Uso:

<TextView android:id="@+id/tx_hdr" 
android:text="Item 1" style="@style/Text.Bullet" />

4
2018-05-26 15:54



utilice TextView simple con un compuesto dibujable. Por ejemplo

<TextView     
    android:text="Sample text"
    android:drawableLeft="@drawable/bulletimage" >
</TextView>

4
2018-04-12 07:06



Este es de lejos el más fácil ...

<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>

3
2018-04-01 12:21



Aquí hay una lista con viñetas con un encabezado y una pestaña al frente de cada artículo.

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();
    }

}

2
2017-09-02 15:18



Fuimos completamente exagerados e hicimos una vista de texto personalizada.

Úselo así:

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

y el código:

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);
    }

}

2
2017-08-27 20:18



Aquí hay otra solución, no agregar exactamente una lista a una vista de texto, pero supongo que el objetivo es el mismo. Está utilizando TableLayout, que solo necesita XML y es realmente simple para listas ordenadas o no ordenadas. A continuación, el código de muestra que utilicé para esto, no una línea de código en Java.

Positivo:

  • puedes poner lo que quieras en las filas de la tabla, no tiene que ser una vista de texto
  • puede usarlo para crear una lista numerada o con viñetas o lo que sea
  • puede definir sangría usando relleno o layout_weight

Negativo:

  • tedioso para listas muy largas (a menos que use algún editor de texto astuto con expresiones regulares)
  • cada elemento de la lista se almacena como un recurso de cadena separado

        <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>
    

y el estilo:

<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>

2
2018-06-20 08:23