Accéder facilement aux éléments d'une vue Android [AK 4 UI Native]

Interface Utilisateur Native dans Kotlin pour Android

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.

Plus précisément, il est indiqué comment configurer le projet Android et comment utiliser le View Binding depuis une Activity, un Fragment, ou un RecyclerView.

Dans cet article, il est expliqué comment :

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

Créez un projet Android Studio, en cochant le support du langage Kotlin
Choisissez comme modèle d’activité la vide soit Empty Activity
Laissez les noms proposés par défaut MainActivity pour l’Activity et activity_main.xml pour la vue (ou layout)

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

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

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

Utiliser le View Binding depuis une Activity

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, en utilisant le View Binding depuis le code d’une Activity Kotlin.

Placez vous dans la vue, soit le fichier activity_main.xml situé dans le dossier layout/
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.
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").

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

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

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.

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 :) !

Envie de tester le sélecteur de date sur Android ? Retrouvez le code dans le thème “Interface Utilisateur Native” de l’app. “Kotlin pour Android : quiz”.

sélecteur de date Android kotlin

Utiliser le View Binding depuis un Fragment

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

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

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

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

 <LinearLayout ... >
   <Button android:id="@+id/mainButton" />
 </LinearLayout>

Dans la classe MainFragment, déclarez la variable binding

   private var _binding: FragmentMainBinding? = null
   // This property is only valid between onCreateView and
   // onDestroyView.
   private val binding get() = _binding!!

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 (false for attach to the root)
     _binding = FragmentMainBinding.inflate(inflater, container, false)
     return binding.root
   }
   ...

Dans la méthode onDestroyView(), libérez l’instance de FragmentMainBinding :

  ...
  override fun onDestroyView() {
      super.onDestroyView()
      _binding = null
  }
  ...

Dans la méthode onViewCreated(), gerez le clique sur le bouton, via la lambda setOnClickListener de la variable mainButton,

   ...
   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
     super.onViewCreated(view, savedInstanceState)
     binding.mainButton.setOnClickListener { Toast.makeText(requireContext(), "Be Happy", Toast.LENGTH_LONG).show() }
   }
   ...

Utiliser View Binding avec un RecyclerView

Une optimisation est d’utiliser le View Binding depuis le code d’un Adapter Kotlin, lié à un RecyclerView.

Par exemple, pour l’affichage de la liste des versions Android (cf. AK-6).

Le fichier de vue item_and_version.xml, situé dans le dossier layout/, contient un TextView :

  <TextView
      android:id="@+id/andVersionTxt"
      android:layout_width="match_parent"
      android:layout_height="@dimen/common_size" />

L’Adapter initialise la variable binding depuis la fonction onCreateViewHolder() :

  val binding = ItemAndVersionBinding.inflate(LayoutInflater.from(parent.context), parent, false)
  return ViewHolder(binding)

La déclaration du ViewHolder de l’Adapter devient alors :

  inner class ViewHolder(val binding: ItemAndVersionBinding) : RecyclerView.ViewHolder(binding.root)

Les éléments graphiques sont alors accessibles via la variable holder.binding ou binding :
```
  bindind.andVersionTxt.text = "$name"
```

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.

Par ailleurs, les appels à la fonction findViewById() sont très couteux. Utiliser le View Binding avec un RecyclerView assure une optimisation de l’affichage d’une liste d’éléments.

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, un Fragment, ou un Adapter.

Référence

Android Developers: View Binding, Part of Android Jetpack

Partagez ou réagissez sur Twitter.

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

Comments