web-dev-qa-db-fra.com

Liste de puces à retrait dans TextView

J'ai un TextView que je remplis avec le texte d'une chaîne de ressources dans strings.xml. La ressource chaîne contient des éléments <li> pour créer une liste à puces dans TextView. Mon problème est que je veux contrôler l'indentation des lignes dans la liste à puces qui couvrent plus d'une ligne. Par défaut, le texte n'est pas indenté au-delà de la balle, il a donc l'air un peu moche. Est-il possible de faire cela avec des paramètres de style ou de créer des puces d'une autre manière?

Merci d'avance.

edit: Est-ce vraiment répondu? Je n'ai aucun problème à produire la liste à puces, comme décrit dans ces liens, mais je ne parviens pas à obtenir la mise en page correcte. Le retrait est comme ça:

  • texte qui dépasse la largeur
    de la ligne.

Et je veux que le "de la ligne" commence au moins en retrait jusqu'au texte qui suit la balle. C'est ce que j'essaie de réaliser.

androiduser-interfacetextview
28
Björn

Je suis surpris que personne ne semble avoir ce problème. Je veux dire, liste de puces ne peut pas être aussi rare dans about-dialogs, FAQ etc. et une puce ne doit pas contenir trop de texte pour couvrir plus d'une ligne et rencontrer ce problème.

Quoi qu'il en soit, je dois le résoudre comme ceci pour l'instant:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    Android:id="@+id/ScrollViewTipsLayout"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android" 
        Android:id="@+id/TipsLayout"
        Android:layout_width="fill_parent" 
        Android:layout_height="wrap_content">

        <TableLayout
        Android:layout_height="wrap_content"
        Android:id="@+id/TableLayout01"
        Android:layout_width="wrap_content"
    >
        <TableRow>
            <TextView Android:id="@+id/tvIngress"
                Android:layout_height="wrap_content" 
                Android:layout_width="wrap_content" 
                Android:text="@+string/tv_picking_content_ingress"
                Android:layout_span="2"
                Android:singleLine="false"
                Android:layout_weight="1"
            />
        </TableRow>
        <TableRow>
            <TextView Android:id="@+id/tvCleaningDot1"
                Android:layout_height="wrap_content" 
                Android:text="•"
                Android:singleLine="false"
            />
            <TextView Android:id="@+id/tvCleaningFirst"
                Android:layout_height="wrap_content" 
                Android:text="@+string/tv_picking_content_first" 
                Android:layout_width="0dp"
                Android:layout_weight="1"
                Android:gravity="left"
                Android:singleLine="false" 
            />
        </TableRow>
            <TextView Android:id="@+id/tvCleaningDot2"
                Android:layout_height="wrap_content" 
                Android:text="•"
                Android:singleLine="false"
            />
            <TextView Android:id="@+id/tvCleaningSecond"
                Android:layout_height="wrap_content" 
                Android:text="@+string/tv_picking_content_second" 
                Android:layout_width="0dp"
                Android:layout_weight="1"
                Android:gravity="left"
                Android:singleLine="false"
            />
        </TableRow>
    </TableLayout>
</RelativeLayout>

Je l'utilise pour présenter du texte statique dans une liste à puces afin d'éviter de créer la puce + texte dynamiquement dans le code. Si quelqu'un a des suggestions pour améliorer la même chose, éclairez-moi s'il vous plaît.

Btw, si aller avec la solution proposée dans le deuxième lien ci-dessus:

Android:text="<ol><li>item 1\n</li><li>item 2\n</li></ol>

Les deuxième, troisième, etc. lignes d'une puce couvrant plus d'une ligne n'obtiendront pas le même retrait que la première ligne, ce qui est plutôt moche. 

23
Björn

Merci @Bjorn 
Vous pouvez également faire quelque chose comme ci-dessous.

<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="horizontal" >
        <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:drawableLeft="@drawable/point"
        Android:textAppearance="?android:attr/textAppearanceSmall"
         />

        <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"                
        Android:text="Your Text Here"
        Android:textAppearance="?android:attr/textAppearanceSmall"
        Android:textSize="14sp" />
</LinearLayout>
5
Dharmik

J'ai résolu ce problème en utilisant RelativeLayout et marginLeft. MarginLeft mettra une marge vide entre celui-ci et l'élément précédent.

<ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"
        Android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
        Android:scrollbarSize="12dip">

<RelativeLayout
    Android:orientation="vertical"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:padding="10sp">

    <TextView
        Android:id="@+id/body_text3"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:lineSpacingExtra="3sp"
        Android:text="Main paragraph of text, before the bulleted list"
        Android:textSize="15sp" />
    <TextView
        Android:id="@+id/type1"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:lineSpacingExtra="3sp"
        Android:text="• First bullet"
        Android:textSize="15sp"
        Android:layout_below="@+id/body_text3"
        Android:layout_marginLeft="25dp" />
    <TextView
        Android:id="@+id/type2"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:lineSpacingExtra="3sp"
        Android:text="• Second bullet"
        Android:textSize="15sp"
        Android:layout_below="@+id/type1"
        Android:layout_marginLeft="25dp" />
</RelativeLayout>

</ScrollView>
0
Shygar

J'essaie juste de souligner la réponse clé de la question:

  • pour créer une liste à puces, utilisez TableLayout avec deux colonnes pour chaque ligne. Une colonne pour TextView d'une puce et l'autre pour le texte
  • pour que le texte TextView remplisse le reste vide TableRow et mis en retrait à la nouvelle ligne, définissez le poids sur 1. Vous pouvez définir le poids de la balle sur zéro ou tout simplement ne pas le définir et le laisser vide
  • en fonction de mon expérience, changer le paramètre width n'affecte pas le texte ni la puce. Vous pouvez donc le laisser vide ou le définir sur ce que vous voulez.

Exemple:

<TableLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">
    <TableRow
        Android:id="@+id/tableRow1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content">
        <TextView
            Android:id="@+id/bullet"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:text="@string/bullet"/>
        <TextView
            Android:id="@+id/TextView01"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:text="this is the text of a bullet list"/>
    </TableRow>
</TableLayout>
0
Hans Theo Gafriedzal Sulaeman