Construire l'écran Hello

Nous avons construit un projet avec une activité vide. Ce nouveau projet sera très similaire à celui-ci. Si vous souhaitez travailler sur cet exemple de code, vous pouvez utiliser les informations sur le projet présentées dans le tableau 4-1. De cette façon, il sera plus facile à suivre. 

Table 4-1. Project Information

  Une fois que l'assistant de création aura terminé, vous aurez plusieurs fichiers dans le dossier du projet, mais seulement deux d'entre eux sont importants pour nous à présent: nous sommes particulièrement intéressés par MainActivity. java et activity_main.xml (Tableau 4-2, pour plus de détails).  

Table 4-2. Important files for this project

Le fichier de mise en page

Ouvrez activity_main s'il n'est pas encore ouvert; Si ce n’est pas le cas ou si vous avez fermé l’onglet précédemment, vous pouvez le lancer à partir de la fenêtre de l’outil de projet.La fenêtre de l'outil de projet nous montre une structure arborescente de nos fichiers de projet. Lorsque vous double-cliquez sur un fichier, celui-ci est lancé et ouvert sous forme d'onglet dans l'éditeur principal.La fenêtre de l'outil de projet vous permet de modifier des perspectives ou des vues. La plupart des développeurs laissent simplement la vue sur «Android», comme illustré à la figure 4-1, mais vous pouvez passer de la vue à Project, Packages, Scratches, Project Files, etc. Essayez d'ouvrir les différentes vues en cliquant sur le bouton fléché situé juste à côté de «Android» pour pouvoir explorer chaque vue par vous-même.Lorsque le fichier de présentation est ouvert dans l'éditeur principal, vous pouvez l'afficher en mode conception (wysiwyg) ou en mode texte. En mode conception, vous pouvez voir à la fois la conception et le plan directeur du fichier de présentation. 

Figure 4-1. Project tool window

 Vous pouvez passer du mode de dessin au mode texte lors de la modification du fichier de mise en page en cliquant sur les onglets «texte» ou «dessin»; vous pouvez trouver ces onglets quelque part dans la partie inférieure gauche de l'éditeur principal. Ces onglets apparaissent uniquement lorsque vous modifiez le fichier de mise en page (c’est-à-dire qu’ils sont sensibles au contexte). La figure 4-2 illustre le fichier de mise en page en mode «conception». 

Note   The AS3 UI elements in your installation may not be consistent with what's shown in Figure 4-1. AS3 is progressing at a rapid pace, and your version of AS3 may not be the same as what's been used in this book.

Figure 4-2. Design editor

Table 4-3. Elements of the Design Editor

 Il peut y avoir deux fenêtres représentées dans l'éditeur de conception: comme vous pouvez le voir à la figure 4-2, ces deux fenêtres sont en fait des représentations du même fichier de présentation (notre activité principale). La vue de conception montre un aperçu couleur du fichier de mise en page, tandis que la vue de plan ne montre que le contour. Vous pouvez choisir de désactiver l'une ou l'autre de ces vues ou les deux.Le Listing 4-1 montre le fichier de mise en page en «mode texte». Dans ce mode, vous pouvez voir le code XML généré par AS3 lorsque vous apportez des modifications à la présentation en mode Création. Ce processus de génération de code entre wysiwyg et le code est bidirectionnel: si vous modifiez le code XML directement, les modifications seront reflétées presque instantanément dans la vue Conception, bien que je n’imagine pas que vous souhaitiez créer l’UI en modifiant directement le code XML. 

Listing 4-1. app/src/main/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
 
<android.support.constraint.ConstraintLayout 
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="com.example.ted.hello.MainActivity">
 
  <TextView android:layout_width="wrap_content"
     android:layout_height="wrap_content" 
     android:text="Hello World!"
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent"  
     app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 
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="com.example.ted.hello.MainActivity">

  <TextView android:layout_width="wrap_content"
     android:layout_height="wrap_content" 
     android:text="Hello World!"
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent"  
     app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>

Le nœud racine du fichier XML, cette ligne définit la présentation de cette activité en tant que ConstraintLayout.Définit le widget TextView en tant que premier enfant du nœud racine. Un TextView est un widget texte non éditable, couramment utilisé comme étiquette.Dans la plupart des situations, vous n’avez pas besoin de manipuler le code XML du fichier de présentation, car l’éditeur de conception suffit à concevoir et à construire l’interface utilisateur. 

Programme principal Java

L’autre fichier d’intérêt est le programme principal. S'il n'est pas encore ouvert dans l'éditeur principal, lancez MainActivity.java à partir de la fenêtre de l'outil de projet.La figure 4-3 montre le programme principal dans la fenêtre de l'éditeur. Vous verrez une foule de guides visuels ici, y compris le contour de pliage du code, les numéros de ligne dans la gouttière et les icônes des fichiers associés (le cas échéant).  

Figure 4-3. app/src/main/java/MainActivity.java

 Le contour de pliage de code est utile lorsque vous modifiez des fichiers source volumineux. le pliage de certains blocs de code peut aider à mieux montrer la structure du programme (et parfois, il peut également vous aider à traquer les accolades manquantes). Le pliage de code peut être activé ou désactivé dans la fenêtre «Paramètres» (Windows et Linux) ou «Préférences» (macOS). Pour aller à la fenêtre «Paramètres», appuyez sur Ctrl + Alt + S. Pour aller à la fenêtre «Préférences», appuyez sur Commande +, (virgule) 

Table 4-4. Keyboard Shortcuts for Code Folding

AS3 vous permet de visualiser le fichier source du programme dans différents modes: mode normal, affichage de la présentation, mode sans distraction et mode plein écran. Il y a des chevauchements entre certains modes, il est donc préférable d'essayer tous les modes et de voir lequel vous préférez (voir le tableau 4-5).  

Table 4-5. View Modes

 Le Listing 4-2 montre le code complet de MainActivity.java et en souligne certaines parties. 

Listing 4-2. app/src/main/java/MainActivity.java

package com.example.ted.hello; 
 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
 public class MainActivity extends AppCompatActivity { 
 
  @Override 
 
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
 
  }
 
}

package com.example.ted.hello; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
 public class MainActivity extends AppCompatActivity { 

  @Override 

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

  }

}

 Cette instruction de package a été extraite de l'écran de saisie de l'assistant lors de la création du projet (champ Domaine de la société). il s’agit généralement de votre société ou de votre site Web personnel écrit en DNS inversénotation Nous importons AppCompatActivity dans ce fichier source (MainActivity.java) car nous allons l’utiliser plus tard. Même chose que le numéro 2; nous importons l'objet Bundle car nous le référencerons plus tard dans ce fichier sourcePour construire un composant d'activité, nous devons hériter d'android.app.Activity ou de l'une de ses classes enfants. AppCompatActivity est une classe enfant de FragmentActivity qui, à son tour, est une classe enfant Activity. AppCompatActivity nous permet d’ajouter un ActionBar à notre activité@ @Override est une annotation qui aide simplement à clarifier notre intention de réellement remplacer la méthode onCreate () dans AppCompatActivity. C’est l’une des garanties du compilateur Java. onCreate () est une méthode de cycle de vie de la classe Activity. Cette méthode est appelée par le moteur d'exécution Android chaque fois qu'une application a été démarrée pour la première fois. La méthode prend en argument un objet Bundle setContentView (R.layout.activity_main) est l'appel de méthode qui associe notre programme Java principal au fichier de présentation (activity_main). Ce que cette méthode fait est de gonfler le XML, ce qui ajoutera tous les objets de vue (boutons, TextView, etc.) à l'activité. Le moteur d’analyse analyse le fichier XML, crée tous les objets view et viewgroup définis dans le fichier XML et les ajoute par programme à la classe d’activité.  

Vues et mise en page

Maintenant que nous comprenons un peu mieux la présentation et le fichier de programme principal, nous allons supprimer l'objet textView que l'assistant a généré pour nous et le remplacer par certains contrôles de notre propre conception.Sélectionnez activity_main dans l'éditeur principal (assurez-vous d'être en mode Création). Sélectionnez le texte existant “Hello World” en cliquant dessus. Un objet de vue sélectionné apparaît comme celui illustré à la figure 4-4. Supprime-le. 

Figure 4-4. Select the “Hello World” textView

 Vous pouvez également supprimer un objet de vue directement dans le fichier XML. Lorsque le fichier de mise en page est sélectionné dans l'éditeur principal, passez en mode «texte». Sélectionnez l’entrée entière du noeud de TextView en cliquant sur l’éditeur et en le faisant glisser, comme illustré à la figure 4-5. Les entrées XML sont assez pointilleuses; Si vous omettez ou supprimez un caractère supplémentaire, comme indiqué dans la figure 4-5, le code XML sera mal formé et AS3 ne pourra pas l’analyser correctement. Donc, vous devez prendre soin de bien faire les choses. Une fois sélectionné, supprimez le texte sélectionné. 

Figure 4-5. Text mode of activity_main

Revenez en mode «Conception» pour pouvoir ajouter de nouveaux objets de vue. Nous aurons besoin d'un textView, editText, et un objet vue Button. 

Figure 4-6. editText (PlainText), textView, and Button view objects

Vous pouvez placer des objets de vue sur la présentation en cliquant dessus et en les faisant glisser individuellement à partir de la palette. La palette est catégorisée, mais vous pouvez toutes les afficher dans une seule liste si vous cliquez sur l’option «Toutes» tout en haut, comme indiqué dans la figure 4-6.Pour le moment, nous n’avons défini aucune contrainte pour les nouveaux objets de vue que nous avons ajoutés. Cela posera un problème lors de l'exécution car l'absence de toute contrainte signifie que chaque objet de la vue sera positionné à l'emplacement 0,0 ou au plus haut et au plus à gauche de l'écran. Voir la figure 4-7. 

Figure 4-7. Hello app on the AVD

Pour remédier à cela, nous allons imposer des contraintes à chacun des objets de vue.L’idée de base de ConstraintLayout est de ne pas définir de positions absolues pour chacun des objets de vue, mais plutôt de définir des règles ou des directives pour la présentation, puis de laisser le moteur d’exécution Android déterminer le meilleur agencement de vos widgets. Cela semble une idée terrible au début parce que vous abandonnez le contrôle créatif et le relègue au runtime, mais cela a du sens car il est très difficile de concevoir une application pouvant être visualisée sous différentes tailles d'écran, facteurs de forme et orientations. . ConstraintLayout essaie de résoudre ce problème.Dans un ConstraintLayout, chaque vue reçoit une sorte de règle, de guide ou de contrainte; Un exemple de contrainte consisterait toujours à maintenir une marge gauche de 20dp du conteneur et une marge supérieure de 40dp par rapport à ce qui se trouve en haut de cette vue. Voyons comment faire cela en AS3.Dans l'éditeur principal, cliquez sur la vue editText pour la sélectionner. Notez que lorsqu'un objet de vue est sélectionné, vous pouvez voir à la fois les poignées de dimensionnement et les poignées de contrainte (voir la figure 4-8). Vous pouvez expérimenter sur les poignées de dimensionnement, mais notre préoccupation actuelle concerne les poignées de contrainte 

Figure 4-8. Constraint handles and sizing handles

1.  Pour définir une contrainte de marge gauche et supérieure pour notre objet, procédez comme suit.

2. Make sure that the “Autoconnect” inspector is not turned off (Figure 4-9)

Figure 4-9. Autoconnect inspector

3. Cliquez sur la poignée de contrainte supérieure et faites-la glisser jusqu'en haut du conteneur. Une flèche pointant vers le haut apparaîtra à partir de la poignée de contrainte supérieure; continuez à le faire glisser jusqu'à ce qu'il adhère au sommet du conteneur, comme illustré à la Figure 4-10.                       

Figure 4-10. Edit Text with constraints

4. Faites la même chose pour la poignée de contrainte gauche: cliquez dessus et faites-la glisser vers le haut jusqu'à ce qu'elle adhère au côté gauche du conteneur. Ne vous inquiétez pas trop des chiffres grisés sur la marge; vous pouvez corriger cela à des valeurs précises dans l'inspecteur des propriétés2. Vous pouvez modifier les valeurs des contraintes de marge dans l'inspecteur d'attributs, comme illustré à la figure 4-11. Cliquez sur les valeurs de contrainte, qui deviendront modifiables. Vous pouvez choisir n’importe quelle valeur dans le menu déroulant ou taper simplement le montant précis de la marge (en dp), puis appuyer sur ↵ (Entrée)

Figure 4-11. Attributes inspector

Note dp stands for device-independent pixel. It varies based on screen density. In a 160dpi screen, 1 dp = 1 pixel. dp is a commonly used unit of measurement in AS3

Vous pouvez le faire pour les deux objets de vue restants de notre présentation. Mais comme vous le constaterez bientôt, le travail de mise en page peut prendre autant de temps, sinon plus, que d’écrire des codes. Alternativement, au lieu de définir des contraintes pour chaque composant, vous pouvez laisser AS3 faire tout le travail et définir les contraintes pour vous. Pour ce faire, suivez ces étapes.1. Supprimez toutes les contraintes en cliquant sur le bouton “Effacer les contraintes” (voir Figure 4-12).2. Déplacez les objets de vue à peu près aux positions souhaitées, les uns par rapport aux autres et par rapport au conteneur, comme si vous utilisiez un programme de dessin.3. Laissez AS3 définir les contraintes automatiquement en cliquant sur le bouton «Inférer les contraintes» (voir Figure 4-12). 

Figure 4-12. Constraint inspectors

Lancez un émulateur pour tester l'application. assurez-vous que l'AVD est également au niveau 23 de l'API(Marshmallow) car c’est le SDK minimal que nous avons défini pour ce projet. Exécutez l’application à partir du menu principal ou cliquez sur le bouton «Lancer l’application» de la barre d’outils. Vous devriez voir quelque chose comme la figure 4-13. 

Figure 4-13. Hello app, inferred constraints