Comment réaliser une page de renseignement en kotlin ?

Voilà, enfin mon article qui va parler de ma dernière application ! J’ai beaucoup travaillé sur cette application depuis ces 3 dernières semaines à apprendre de nouvelles choses et à trouver des solutions aux problèmes que j’ai rencontrés. Lorsque, j’ai commencé à rédiger cet article, je m’étais décidé à vous présenter cette application en un seul article. Finalement, j’ai avisé en voyant que l’article allait s’éterniser en le découpant en deux parties.

Dans cet article, je vais aborder comment vous allez pouvoir réaliser une page de renseignement  sur Android avec le langage Kotlin. Dans mon cas, je vais récupérer les pseudo des utilisateurs pour les transmettre à une seconde activité. Avec cette application vous allez également retrouver des notions que j’ai abordé dans l’article “TextWatcher en kotlin” et l’article “Comment gérer plusieurs Activity en kotlin ? ” .

Le principe

Cette activité a été réalisée pour correspondre à l’enregistrement des noms des joueurs pour le jeu du morpion (une seconde activité). Vous pouvez très bien l’utiliser, pour autres choses (exemple : page de contact, etc…). Si vous souhaitez, en savoir plus sur comment réaliser le jeu du morpion, allez lire l’article [pas encore disponible].

Les fonctionnalités

Pour rendre le jeu plus immersif, j’ai mis en place un écran de démarrage ou j’amène les joueurs à rentrer leurs pseudo. Tant que les joueurs n’ont pas rempli leur champ de saisie, le bouton “Lancer” n’est pas utilisable et les joueurs n’ont pas accès à la suite de l’application. Ce principe force donc l’utilisateur à remplir, les champs de saisie.

Pour éviter des erreurs d’affichage par la suite, les pseudo des joueurs ne peuvent pas dépasser plus de 9 caractères.

Le visuel de l’application

l’application va posséder deux activités, une pour l’enregistrement des joueurs et une autre pour la partie de jeu :

La première activity

Cette activité reste simple Trois TextView (“Morpion” “Joueur 1 : ”, “Joueur 2 : ”),  deux EditText pour inscrire les joueurs et un bouton pour lancer la partie. Cette activité est décomposée en trois couches (3 LinearLayout vertical), une couche pour le titre (Morpion), une couche pour l’enregistrement des joueurs et une dernière couche pour lancer la partie avec le bouton.

Titre

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

    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
        <TextView
                android:text="Morpion"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" android:id="@+id/Titre" android:textSize="30sp"
                android:gravity="center"
                android:textStyle="bold" android:textColor="?attr/colorBackgroundFloating"
                android:fontFamily="sans-serif"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
    </LinearLayout>
</LinearLayout>

Le Textview est centré (gravity) pour donner un aspect plus organisé. Les caractères du Textview  sont définis en gras (textStyle),  de couleur blanche (textColor), avec une taille de 30 sp (textSize) et une police de fond “sans-serif” (fontFamily).

“sp” : L’unité “Scale-independant Pixels” est définie par la préférence de l’utilisateur en matière de taille de police.

EditText

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingHorizontal="20dp"
        android:layout_weight="1">
    <TextView
            android:text="Joueur 1 :"
            android:paddingTop="10dp"
            android:layout_width="match_parent"
            android:textStyle="bold" android:textColor="?attr/colorBackgroundFloating"
            android:fontFamily="sans-serif"
            android:layout_height="wrap_content" android:id="@+id/TitreJoueur1"/>
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:paddingHorizontal="20dp"
            android:maxLength="9"
            android:background="@color/Blanc"
            android:ems="10"
            android:id="@+id/editNomJoueur1"/>

    <TextView
            android:text="Joueur 2 :"
            android:layout_width="match_parent"
            android:textStyle="bold" android:textColor="?attr/colorBackgroundFloating"
            android:paddingTop="10dp"
            android:fontFamily="sans-serif"
            android:layout_height="wrap_content" android:id="@+id/TitreJoueur2"/>
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:maxLength="9"
            android:paddingHorizontal="20dp"
            android:background="@color/Blanc"
            android:ems="10"
            android:id="@+id/editNomJoueur2"/>
</LinearLayout>

Les deux EditText possèdent un padding horizontal (paddingHorizontal) pour donner un visuel plus espacé, une couleur de fond blanc (background) pour faire ressortir la zone de saisie, une taille de 9 caractères maximum (maxLength) et un champ de saisie au format nominal (inputType).

Button

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:paddingBottom="20dp"
        android:layout_weight="1">

    <Button
            android:text="Lancer"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false"
            android:id="@+id/buttonLancer"/>
</LinearLayout>

Le bouton est centré (layout_gravity) pour donner un aspect plus sympathique et il est désactivé par défaut (enabled). Il sera activé, lorsque chaque joueur aura renseigné son pseudo.

Le code de l’application

L’enregistrement des joueurs (première activité)

Le rôle de la première activité est relativement simple, elle regroupe deux fonctionnalités. Dans un premier temps, elle récupère les pseudos des joueurs inscrits dans les EditText et les transmet à la seconde activité. Dans un dernier temps, elle redirige les joueurs sur la seconde activité pour démarrer le jeu lors du clique sur le bouton “Lancer”. Le bouton est accessible si et seulement si, les deux EditText sont remplis. Pour vérifier que les utilisateurs ont bien renseigné leur pseudo,  j’utilise la méthode VerifierJoueur. Cette méthode sera appelée dans la méthode “onChange” que j’ai ajouté à la classe EditText. Pour finir,  la méthode “onChange”  sera appelée dans la méthode “onCreate”. La méthode “onCreate”  est la méthode principale de l’activité qui viendra initialiser et charger l’activité à l’écran.

La méthode VerifierJoueur :

lateinit var EditNomJoueur1:EditText
lateinit var EditNomJoueur2:EditText

fun VerifierNomJoueur() {
    if (!(EditNomJoueur1.text.isEmpty()) && !(EditNomJoueur2.text.isEmpty()) )
    {
        BoutonLancer.isEnabled = true
    }
}

Cette méthode va être utilisée pour rendre accessible le bouton “Lancer” si et seulement si les deux deux EditText ne sont pas vide.

La méthode onChange :

fun EditText.onChange () {
    this.addTextChangedListener(object: TextWatcher {
        override fun afterTextChanged(s: Editable?) { VerifierNomJoueur()  }
        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
    })
}

Cette méthode est une méthode ajoutée à la classe EditText qui permettra à n’importe quelle EditText  d’appeler cette méthode. Cette déclaration est très pratique,  je l’ai découvert avec le langage kotlin. Dans cette méthode on fait appel à la méthode addTextChangedListener  qui  va rajouter des actions à notre EditText. Elle demande en paramètre un textWatcher. Très utile, dans notre cas ! On va pouvoir venir vérifier le remplissage de nos EditText (VerifierJoueur).

La méthode onCreate :

lateinit var BoutonLancer:Button

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

    //initialisation
    EditNomJoueur2 = findViewById(R.id.editNomJoueur2)
    BoutonLancer  = findViewById(R.id.buttonLancer)
    EditNomJoueur1 = findViewById(R.id.editNomJoueur1)

    //verification des EditText
    EditNomJoueur1.onChange()
    EditNomJoueur2.onChange()


    BoutonLancer.setOnClickListener {
        val monIntent :Intent = Intent(this,MorpionActivity::class.java).apply {
            putExtra("Joueur1",EditNomJoueur1.text.toString())
            putExtra("Joueur2",EditNomJoueur2.text.toString())
        }
        startActivity(monIntent)
    }

}

Dans cette méthode, on venir initialiser nos composant, venir ajouter les actions sur nos editText et effectuer les deux actions lors du clique sur le bouton “Lancer”.

• La première action consiste à faire l’échange des pseudo avec la méthode “putExtra”. Cette méthode demande en paramètre un tag et la donnée à transmettre. Le tag nous servira à récupérer notre donnée dans la seconde activité.
• La seconde action consiste à débrancher les joueurs sur la seconde activités avec la méthode “startActivity”

L’envoi des données a été une difficulté pour moi ! Le principe de placer les “putExtra” dans la méthode apply de l’intent, m’a permis de solutionner mon problème.

Merci d’avoir lu ! Maintenant, si vous avez aimé le contenu de l’article, si  vous connaissez une personne à qui cet article peut intéresser, n’hésitez pas à le liker et à le partager sur les réseaux sociaux. Si  vous souhaitez me faire part de vos remarques, de vos problèmes, de vos suggestions de prochain article ou tout simplement de votre soutien n’hésitez pas à m’en faire part dans les commentaires, je vous en remercie.

Credit : photo de geralt.