Material Text View


Dans ce vous allez découvrir le composant MaterialTexview disponible dans la librairie des composants material d’android.

Material TextView

La classe MaterialTexview est une dérivée de la classe AppCompatTextView qui affiche du texte à l’utilisateur.La particularité avec cette classe est que , elle permet de définir la hauteur de ligne à partir d’un style TextAppearance .

Nous allons voir dans un exemple comment utiliser ce composant dans votre application.Pour cela nous allons créer un nouveau projet.

Table des matières

Créer un nouveau projet

Créez un nouveau projet dans android studio en cliquant sur File dans le menu principale d’android studio puis sur New->New Project.Dans la fenêtre qui s’affiche sélectionnez Empty Activity puis cliquez sur Next .Dans la nouvelle fenêtre qui apparaît, nommez le projet MaterialTextView, choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.

Ajouter la librairie des composants material comme dépendance

Le composant MaterialTexView est disponible dans la librairie des composants material. Avant de pouvoir l’utiliser, vous devez ajouter la librairie des composants material comme dépendance dans votre projet.Pour cela ouvrez le fichier build.gradle(Module:app) de votre projet puis ajoutez la dépendance suivante

implementation 'com.google.android.material:material:1.1.0-alpha10'

Faire hérité le thème de votre application par un des thème de librairie des composants material

Pour utiliser un MaterialTextView, vous allez faire hérité le thème de votre application par un des thèmes de la librairie des composants material comme suit

Ouvrez le fichier values/styles.xml puis ajoutez le contenu suivant

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
       ...
       ...
     
    </style>

Ajouter la composant dans le fichier layout

Ouvrez le fichier res/layout/activity_main.xml puis ajoutez le contenu suivant

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:text="dddddd"
        android:layout_height="wrap_content" />

</LinearLayout>

Note:Puisque le thème de votre application hérite d’un des thème de la librairie des composants material, le simple textview sera inflaté comme un MaterialTextView. Si le thème de votre application n’hérite pas d’un des thèmes de la librairie des composants material,vous devez déclarer le textview comme suit.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.google.android.material.textview.MaterialTextView
        android:layout_width="wrap_content"
        android:text="dddddd"
        android:layout_height="wrap_content" />

</LinearLayout>

Attributs

La classe MaterialTexview prend en charge tous les attributs standard qui peuvent être modifiés comme avec la classe AppCompatTextView .

Contrairement à la classe AppCompatTextView qui permet de spécifier la hauteur de ligne uniquement dans le fichier XML de la vue , la classe MaterialTextView permet de spécifier la hauteur de ligne à partir d’un style TextAppearance , qui peut ensuite être appliqué à MaterialTextView en utilisant l’attribut style ou en utilisant l’attribut android: textAppearance.

Ondéfinir la hauteur de ligne dans un style textAppearance avec la proproété android:lineHeight

L’exemple suivant montre comment utiliser cette propriété dans avec un style TextAppearance.

 <style name="MyTextview.Line.Height" parent="TextAppearance.MaterialComponents.Headline2">
        <item name="lineHeight">30sp</item>
    </style>

Ensuite vous pouvez appliquer cela à un textView comme suit

<com.google.android.material.textview.MaterialTextView
        android:layout_width="wrap_content"
        android:text="dddddd"
        android:textAppearance="@style/MyTextview.Line.Height"
        android:layout_height="wrap_content" />

Autres ressources

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textview/MaterialTextView.java

https://developer.android.com/reference/com/google/android/material/textview/MaterialTextView

Conclusion

Nous somme à la fin de ce tutoriel sur le composant MaterialTexView.J’espère que ce tutoriel vous aidera à utiliser ce composant.A bientôt pour un nouveau tutoriel


Laisser un commentaire

Résoudre : *
16 ⁄ 1 =


%d