Android vue

Ce tutoriel détaille comment utiliser le View Binding de Jetpack dans un projet Android Studio. Cela afin d’accéder facilement aux éléments de la vue, déclarées dans un fichier XML.

Pré-requis : Savoir créer un projet Android

  1. Créez un projet Android Studio, en cochant le support du langage Kotlin
  2. Choisissez comme modèle d’activité la vide soit Empty Activity
  3. Laissez les noms proposés par défaut MainActivity pour l’Activity et activity_main.xml pour la vue (ou layout)
  4. Dans MainActivity, remarquez l’appel de la fonction setContentView() permettant de lier la classe et la vue, dans la méthode onCreate()

       ...
       override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_my_main)
       }
       ...
    

Remarque : La fonction setContentView() prend en paramètre la vue créée par défaut activity_main.xml. Dans le code (Kotlin ou Java), on accède à cette vue via le fichier R, ce dernier contient toutes les références des ressources et il est automatiquement généré par Android Studio. Ainsi une vue contenue dans le dossier layout/ est accessible dans le code via R.layout. + le nom du fichier XML qui la contient.

Configurer View Binding

  1. Placez vous dans le fichier gradle relatif au module du projet, soit build.gradle (Module: app)

  2. Dans la partie android, autorisez l’option viewBinding :

         android {
           ...
           buildFeatures {
             viewBinding true
           }
    

Remarque : AS configure par défaut un projet Android avec les 3 plugins suivants :

  • com.android.application : contient les classes relatives au SDK Android
  • kotlin-android : pour le support du langage Kotlin

Accéder à un élément de la vue

Depuis le code d’une Activité Kotlin

Si vous exécutez le projet créé par défaut, avec le modèle d’activité vide, alors vous devriez voir à l’écran le texte Hello World! s’afficher.

Dans cette partie, l’objectif est de modifier ce texte par Hello Kotliners :) , via la classe MainActivity.

  1. Placez vous dans la vue, soit le fichier activity_main.xml situé dans le dossier layout/

  2. Ajoutez un identifiant, par exemple mainText, à l’élément graphique de type TextView
    • soit via l’éditeur graphique intégré à AS
    • soit directement dans le fichier XML, en passant en mode Text plutôt que Design
     <LinearLayout ... >
       <TextView android:id="@+id/mainText" />
     </LinearLayout>
    

    Remarque : l’annotation@+id/ pour la déclaration d’un nouvel identifiant XML.

  3. Dans la classe principale de votre projet : MainActivity, déclarez la variable binding

       private lateinit var binding: ActivityMainBinding
    

    Note : ViewBinding génère une classe portant le nom du fichier XML en Pascal avec le mot “Binding” accolé, cela pour chaque fichier de vue (sauf s’il comporte tools:viewBindingIgnore="true").

  4. Dans la méthode onCreate(), créez une instance de ActivityMainBinding :

       ...
       override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = ActivityMainBinding.inflate(layoutInflater)
       }
       ...
    
  5. Dans la méthode onCreate(), passez la vue racine à setContentView()

       ...
       override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = ActivityMainBinding.inflate(layoutInflater)
         setContentView(binding.root)
       }
       ...
    

    Note : À présent, il est possible d’accéder aux éléments graphiques via la variable binding.

  6. Dans le code Kotlin, modifiez le texte, via l’attribut text de la variable mainText, (disponible pour tous les objets de type TextView) :

    binding.mainText.text = "Hello Kotlin :)"
    

Enfin, après exécution du projet, vous devriez voir s’afficher à l’écran Hello Kotlin :) !

Depuis le code d’un Fragment Kotlin

Une alternative est d’utiliser le View Binding depuis un Fragment.

Dans cette partie, l’objectif est de modifier un texte depuis un classe MainFragment.

  1. Placez vous dans la vue, soit le fichier fragment_main.xml situé dans le dossier layout/

  2. Ajoutez un identifiant, par exemple mainText, à l’élément graphique de type TextView :

     <LinearLayout ... >
       <TextView android:id="@+id/mainText" />
     </LinearLayout>
    
  3. Dans la classe MainFragment, déclarez la variable binding

       private lateinit var binding: FragmentMainBinding
    
  4. Dans la méthode onCreateView(), créez une instance de FragmentMainBinding et retournez la vue racine :

       ...
       override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?): View? {
         // Inflate the layout for this fragment
         binding = FragmentMainBinding.inflate(layoutInflater)
         return binding.root
       }
       ...
    
  5. Dans la méthode onViewCreated(), modifiez le texte, via l’attribut text de la variable mainText,

       ...
       override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         binding.mainText.text = "Hello Kotlin :)"
       }
       ...
    

Comparer avec la solution habituelle

Sans le View Binding, afin de modifier un élément de la vue depuis du code : d’une part, il s’agit d’ajouter un identifiant à l’élément graphique, comme fait précédemment; d’autre part, il s’agit de récupérer cet élément via la fonction findViewById() prenant en paramètre sa référence R.id.mainText. Il s’agirait donc de coder la ligne supplémentaire :

  • en Kotlin
var mainText = findViewById<TextView>(R.id.mainText) as TextView

ou bien

var mainText:TextView = findViewById(R.id.mainText)

Remarquez la conversion, en TextView, de l’objet renvoyé par la fonction findViewById(). De plus, une déclaration de variable est faite : mainText, cela est sujet à des fuites mémoires; en utilisant le View Binding, cela vous assure une bonne gestion des éléments de la vue. En effet, ils sont mis en cache dans des variables déclarées une seule fois.

Remarque : L’intérêt de modifier les éléments graphiques depuis du code, plutôt que directement dans le fichier XML, c’est de pouvoir les modifier dynamiquement pendant l’exécution de l’application. Par exemple, un texte pourrait être changé si l’utilisateur clique sur un bouton.

Finalement, cet article explique comment le View Binding est ajouté dans un projet Kotlin Android. Ensuite, il détaille comment accéder aux éléments de la vue depuis du code Kotlin, via une variable binding, cela depuis une Activity ou un Fragment.

Référence

Partagez ou réagissez sur Twitter.

Vous avez trouvé une erreur ou voulez améliorer cet article ? Editez le directement !

Comments