web-dev-qa-db-fra.com

Comment ajouter une liste à puces à l'application Android?

J'ai googlé ma question mais il n'y a pas de réponse de travail fournie. Comment ajouter une liste à puces à ma vue texte?.

androidtextview
85
user590849

Difficile à faire car les ul/li/ol ne sont pas supportés. Heureusement, vous pouvez utiliser ceci comme sucre syntaxique:

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

&#8226; est l'entité html d'une liste. d'autres choix sont disponibles http://www.elizabethcastro.com/html/extras/entities.html

en savoir plus sur les balises prises en charge fournies par Mark Murphy (@CommonsWare) http://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html Chargez ça avec Html.fromHtml

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

  1. browep a expliqué le chemin sur HTML. La solution fournie avec l'entité html peut être utile. Mais cela ne comprend que la balle. Si votre texte se termine, le retrait ne sera pas correct.

  2. J'ai trouvé d'autres solutions intégrant une vue Web. C'est peut-être approprié pour certains, mais je pense que c'est un peu excessif ... (La même chose avec l'utilisation d'une liste.)

  3. J'aime la approche créative de Nelson : D, mais cela ne vous donne pas la possibilité d'ajouter une liste non ordonnée à une vue texte.

  4. Mon exemple d'une liste non ordonnée avec des puces en utilisant 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));

Positif:

  • Balles avec retrait correct après le retour au texte.
  • Vous pouvez combiner du texte formaté ou non formaté dans une instance de TextView.
  • Vous pouvez définir dans le constructeur BulletSpan la taille de l'indentation.

Négatif:

  • Vous devez enregistrer chaque élément de la liste dans une ressource chaîne distincte. Donc, vous ne pouvez pas définir votre liste aussi confortable que vous pourriez en HTML.
53
Diego Frehner

J'ai trouvé une alternative .. copiez simplement cette puce "•" (c'est un texte) et collez-la dans le texte de votre affichage texte. Vous pouvez modifier la couleur de la puce en modifiant la couleur du texte, ainsi que tous les autres attributs tels que la taille, la hauteur, la largeur. .. :)

vous pouvez utiliser un raccourci pour obtenir cette puce lors de la frappe

pour les fenêtres

ALT + 7

pour Mac

ALT + 8

32
Ishtiaq

Inspiré par les différentes réponses données ici, j'ai créé une classe utilitaire pour en faire un support simple . Cela créera une liste à puces avec indentation pour le texte enveloppé. Il a des méthodes pour combiner des chaînes, des ressources de chaîne et des ressources de tableau de chaînes.

Cela créera un CharSequence que vous pourrez transmettre à un TextView. Par exemple:

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

J'espère que c'est utile. Prendre plaisir.

Remarque: Ceci utilisera la puce standard du système, un petit cercle de la même couleur que le texte. Si vous voulez une puce personnalisée, envisagez de sous-classer BulletSpan et de remplacer sa drawLeadingMargin() pour dessiner la puce souhaitée. Jetez un coup d’œil à source BulletSpan pour avoir une idée de son fonctionnement.

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

}
21
cottonBallPaws

C'est de loin le plus facile ..

<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>
6
Amit Tumkur

utiliser TextView simple avec un extractible composé. Par exemple

<TextView     
    Android:text="Sample text"
    Android:drawableLeft="@drawable/bulletimage" >
</TextView>
4
Nouman Hanif

Une option que j'ai utilisée consistait à définir la puce tirable à l'aide d'un style.

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

Usage:

<TextView Android:id="@+id/tx_hdr" 
Android:text="Item 1" style="@style/Text.Bullet" />
4
Nelson Ramirez

Voici une autre solution, qui ne consiste pas à ajouter une liste à une vue de texte, mais je suppose que le but est le même. Il utilise TableLayout, qui nécessite uniquement XML et est très simple pour les petites listes ordonnées ou non ordonnées. Ci-dessous, exemple de code que j'ai utilisé pour cela, pas une ligne de code en Java.

Positif:

  • vous pouvez mettre ce que vous voulez dans les lignes d'un tableau, cela ne doit pas forcément être une vue de texte
  • vous pouvez l'utiliser pour créer une liste à puces et numérotée ou quoi que
  • vous pouvez définir un retrait avec padding ou layout_weight

Négatif:

  • fastidieux pour les très longues listes (sauf si vous utilisez un éditeur de texte astucieux avec regex)

  • chaque élément de la liste est stocké en tant que ressource de chaîne séparée

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

et le style:

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

Je suis allé trop loin et a créé une vue de texte personnalisée.

Utilisez-le comme ceci:

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

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

}
2
Blundell

Voici une liste à puces avec un en-tête et un onglet devant chaque élément.

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

Je trouve que cela est le moyen le plus simple, laissez le textView tel quel dans le fichier xml et utilisez le code Java) suivant. Cela a parfaitement fonctionné pour moi.

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"));
}
1
fernand bontemps

La liste à puces peut être simplement créée en utilisant le <ul> et <li> balises dans la ressource chaîne.

NE PAS UTILISER setText (Html.fromHtml (chaîne)) pour définir la chaîne dans le code! Il suffit de définir la chaîne normalement en XML ou en utilisant setText ( string ).

Par exemple:

fichier strings.xml 

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


fichier layout.xml 

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


Cela produira le résultat suivant:

  • première article
  • point 2


Les balises suivantes sont supportées comme ceci (directement intégrées dans la ressource chaîne):

  • <a> (prend en charge les attributs "href")
  • <annotation>
  • <b>
  • <big>
  • <font> (prend en charge les attributs "height", "size", "fgcolor" et "bicolor", sous forme d'entiers)
  • <je>
  • <li>
  • <Chapiteau>
  • <petit>
  • <grève>
  • <sous>
  • <sup>
  • <tt>
  • <u>
0
Abhishek

Les deux options que vous avez pour faire une liste à puces sont

  • créer la liste en utilisant HTML (ul, ol) et charger le HTML dans un WebView
  • Chargez les données dans un ListView et définissez la vue dessinable à gauche de la vue de texte dans la présentation d’éléments de la liste sur une image adaptée à la puce.

L'option 1 est la plus simple.

0
Robby Pond

extension Kotlin prête à l'emploi

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

tilisation:

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

une autre façon de prendre en charge les balises HTML manquantes consiste à les remplacer correctement, comme indiqué ici

0
android developer