Android vue

Ce tutoriel détaille comment utiliser les extensions Kotlin dans un projet Android Studio, d’ores et déjà configuré avec Kotlin (cf. Configurer Kotlin dans un projet Android Studio [AK 2]). Cela afin d’accéder facilement aux éléments de la vue, déclarée dans un fichier XML.

Pré-requis : Savoir lier une vue à une activité

  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 entré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.

Pré-requis : Observer l’ajout des extensions Kotlin

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

  2. En tête du fichier observez les plugins automatiquement ajouté par AS :

     apply plugin: 'com.android.application'
     apply plugin: 'kotlin-android'
     apply plugin: 'kotlin-android-extensions'
        
     android {
     ...
    

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
  • kotlin-android-extensions : pour l’accès facile aux éléments de la vue entre autres

Accéder à un élément de la vue depuis le code 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 Kotlin :) , 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 myText, à 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
     ...
     <TextView
           android:id="@+id/myText"
     ...
    

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

  3. Placez vous dans la classe principale de votre projet : MainActivity, en particulier dans la méthode onCreate()

  4. Vous pouvez à présent, accéder à l’élément graphique de type TextView, via la variable myText, dans le code Kotlin. Introduisez la variable myText dans la méthode onCreate() :

       ...
       override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_my_main)
         myText
       }
       ...
    
  5. Importez le fichier XML, activity_main.xml, via les extensions Kotlin :

     import kotlinx.android.synthetic.main.activity_main.*
    

    Remarque : Commencez à tapez my, puis sélectionnez myText from activity_main for Activity (Android extensions) TextView. Cela aura pour effet d’importer automatiquement le fichier de la vue à partir des extensions Kotlin.

  6. Modifiez le texte, via l’attribut text, disponible pour tous les objets de type TextView :

    myText.text = "Hello Kotlin :)"
    

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

Comparer avec la solution habituelle

Sans les extensions Kotlin, 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.myText. Il s’agirait donc de coder la ligne supplémentaire :

  • en Java
TextView myText = (TextView) findViewById(R.id.myText);
  • en Kotlin
var myText = findViewById(R.id.myText) as TextView

ou bien

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

Remarquez la conversion, en TextView, de l’objet renvoyé par la fonction findViewById(). De plus, une déclaration de variable est faite : myText, cela est sujet à des fuites mémoires; en utilisant les extensions Kotlin, cela vous assure une bonne gestion des éléments de la vue. Grâce au plugin d’extensions Kotlin, ils sont mis en cache dans des variables déclarées une seule fois.

Note : 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 les extensions Kotlin sont ajoutées dans un projet Kotlin Android. Ensuite, il détaille comment modifier un élément de la vue depuis du code Kotlin. Cela, en lui ajoutant un identifiant depuis la vue, puis en utilisant cet identifiant comme une variable de classe depuis le code.

Référence

Partagez ou réagissez sur Twitter.

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

Comments