Formater une TextView avec du code HTML

Publié par Throrïn    Aucun Commentaire

Dans Android, quand on veut mettre en forme une TextView, on peut aller jusqu’à se pendre. De base, Dans une TextView, nous pouvons éditer que le style global du texte. Donc exit les couleurs ici, un lien par-là, du texte italique au milieu et j’en passe.

Pour faire tout ceci quelques choix s’offrent à nous dont la mise en forme en Html. Par contre, il faut penser à cette mise en forme avant de setter le texte de notre TextView.

Pour ceci, nous allons créer un nouveau projet Android basique.

Ensuite, allez dans votre main.xml et modifiez le comme ceci :

 XML | 
 copy code |
?
 
01
<?xml version="1.0" encoding="utf-8"?>
02
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03
    android:orientation="vertical"
04
    android:layout_width="fill_parent"
05
    android:layout_height="fill_parent"
06
    >
07
    <TextView  
08
        android:id="@+id/textView"
09
        android:layout_width="fill_parent" 
10
        android:layout_height="wrap_content" 
11
        android:text="@string/hello"
12
        />
13
</LinearLayout>

Nous avons juste rajouté une ID à notre TextView afin de la récupérer dans notre Activity. Ensuite, placez-vous dans votre Activity et récupérez votre TextView avec la commande suivante (à faire après le setContentView()) :

 Java | 
 copy code |
?
 
1
TextView text = findViewById(R.id.textView);

Bien, à partir d’ici, nous pouvons entièrement surcharger notre TextView. Nous pouvons lui remplacer le texte de base, changer sa couleur, sa taille, …

Nous allons juste changer son texte par du code Html :

 Java | 
 copy code |
?
 
1
String html = "<p>Test de code HTML avec un <a href='http://www.throrinstudio.com'>lien</a>. <b>Et un texte en gras</b>";
2
text.setText(html);

Si nous lançons notre projet, nous obtenons ceci :

Ce n

Ce n’est pas ce que nous attendions n’est-ce pas ? C’est normal, par défaut, la TextView retranscrit tel quel le texte qu’on lui attribue. Un peu à la manière des balises en HTML. Pour avoir notre texte mis en forme, nous devons passer par une étape intermédiaire.

Cette étape c'est juste d'indiquer que ce que l'on passe à notre TextView est du Html et qu'il devra être affiché avec la bonne mise en forme. Donc nous allons juste modifier la ligne d’attribution du texte comme ceci :

text.setText(Html.fromHtml(html));

Ici, nous faisons juste un Html.fromHtml. Cette fonction native à Android permet justement de formater le texte à partir de l’html. Ce qui nous donne ceci :

C

Nous avons enfin le résultat escompté sauf que, si vous essayez de cliquer sur le lien, il ne se passe rien. Android n’a fait que la mise en forme, pas l’action associée au lien. Pour ce faire, nous devons dire à notre TextView que nous souhaitons interagir avec notre lien grâce à la ligne suivante :

 Java | 
 copy code |
?
 
1
text.setMovementMethod(LinkMovementMethod.getInstance());

Et maintenant relancez votre application, cliquez sur le lien et ho, magie, ça marche !!

La mise en forme Html n’utilise que le style HTML basique. N’espérez pas faire ce que vous voulez comme en web avec du CSS. De plus, les images ne s’afficheront pas dans votre TextView.

• Partager :
• Facebook
• Imprimer
• Digg

Mots-clefs :Android, html, TextView