Android Studio pour les débutants, partie 2: Explorez et codez l'application

Mise à jour: janvier 2020.

Dans la partie 1 de cette introduction à Android Studio pour débutants, vous avez configuré Android Studio dans votre environnement de développement et vous avez appris à connaître l'interface utilisateur. Maintenant, dans la partie 2, vous allez coder votre première application.

L'application mobile animée se compose d'une seule activité, qui présente le personnage du robot Android de Google et un bouton pour animer le personnage. En cliquant sur le bouton, le personnage change progressivement de couleur du vert au rouge au bleu, puis revient au vert. Bien que l'application ne soit pas particulièrement utile, l'écrire vous aidera à vous familiariser avec l'utilisation d'Android Studio. Dans la troisième partie, vous allez créer et exécuter l'application à l'aide d'un émulateur d'appareil Android et d'une tablette Kindle Fire.

Notez que cette série a été mise à jour pour Android Studio 3.2.1, la version stable actuelle à ce jour.

Fenêtres de projet et d'éditeur d'Android Studio

J'ai présenté la fenêtre principale d'Android Studio à la fin de la partie 1. Cette fenêtre est divisée en plusieurs zones, y compris une fenêtre Projet où vous identifiez les fichiers de ressources d'une application, et diverses fenêtres d'éditeur où vous allez écrire le code et spécifier les ressources pour les applications mobiles dans Android Studio. La fenêtre Projet et une fenêtre d'édition sont illustrées à la figure 1.

Jeff Friesen

La fenêtre Projet met en évidence W2A , qui est le nom du W2A.javafichier source de l'application (bien que l' .javaextension de fichier ne soit pas affichée). Correspondant à W2A est une fenêtre d'édition, accessible en double-cliquant sur W2A dans la fenêtre Projet. La fenêtre de l'éditeur révèle le contenu actuel du fichier, dans ce cas le code source Java squelette de l'activité principale de l'application.

Chaque fenêtre de l'éditeur est associée à un onglet. Par exemple, la fenêtre de l'éditeur de W2A est associée à un onglet W2A.java . Un deuxième onglet identifié comme main.xml (la mise en page XML par défaut pour l'activité principale de l'application) est également affiché. Vous passez d'une fenêtre d'éditeur à une autre en cliquant sur l'onglet de la fenêtre.

télécharger Obtenir le code Téléchargez le code source de l'exemple d'application Android: W2A.java. Créé par Jeff Friesen pour JavaWorld.

L'exemple d'application Android

L'exemple d'application ( W2A.java ) se compose d'une activité principale qui affiche le personnage du robot Android et un bouton. Lorsque l'utilisateur appuie sur le bouton, le robot s'anime à travers une série de couleurs. Dans cette section, nous explorerons le code source et les ressources de l'activité.

Explorer et coder l'exemple d'application Android

Le code source de l'activité est stocké dans le fichier W2A.java, présenté dans le Listing 1.

Liste 1. W2A.java

 package ca.javajeff.w2a; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class W2A extends Activity { AnimationDrawable androidAnimation; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView androidImage = (ImageView) findViewById(R.id.android); androidImage.setBackgroundResource(R.drawable.android_animate); androidAnimation = (AnimationDrawable) androidImage.getBackground(); final Button btnAnimate = (Button) findViewById(R.id.animate); View.OnClickListener ocl; ocl = new View.OnClickListener() { @Override public void onClick(View v) { androidAnimation.stop(); androidAnimation.start(); } }; btnAnimate.setOnClickListener(ocl); } } 

Le W2A.javafichier commence par une instruction package , qui nomme le package ( ca.javajeff.w2a) qui stocke la W2Aclasse. Ceci est suivi d'une série d'instructions d'importation pour différents types d'API Android. Ensuite, le code décrit la W2Aclasse, qui s'étend android.app.Activity.

W2Adéclare d'abord un androidAnimationchamp d'instance de type android.graphics.drawable.AnimationDrawable. Les objets de type AnimationDrawabledécrivent des animations image par image, dans lesquelles le dessin actuel est remplacé par le dessin suivant dans la séquence d'animation.

Qu'est-ce qu'un dessinable?

Un dessinable est quelque chose qui peut être dessiné, comme une image. AnimationDrawableétend indirectement la android.graphics.drawable.Drawableclasse abstraite , qui est une abstraction générale pour un dessinable.

La méthode onCreate ()

Tout le travail de l'application se déroule dans W2Ala onCreate(Bundle)méthode de substitution de : aucune autre méthode n'est requise, ce qui permet de garder cette application simple.

onCreate(Bundle) appelle d'abord sa méthode de superclasse du même nom, une règle qui doit être suivie par toutes les méthodes d'activité de substitution.

Cette méthode s'exécute ensuite setContentView(R.layout.main)pour établir l'interface utilisateur de l'application. R.layout.mainest un identifiant (ID) pour une ressource d'application, qui réside dans un fichier séparé. Vous interprétez cet identifiant comme suit:

  • Rest le nom d'une classe générée lors de la création de l'application. Cette classe est nommée Rparce que son contenu identifie divers types de ressources d'application, y compris les mises en page, les images, les chaînes et les couleurs.
  • layoutest le nom d'une classe imbriquée dans R. Une ressource d'application dont l'ID est stocké dans cette classe décrit une ressource de mise en page spécifique. Chaque type de ressource d'application est associé à une classe imbriquée nommée de la même manière. Par exemple, stringidentifie les ressources de chaîne.
  • mainest le nom d'une intconstante de base déclarée dans layout. Cet ID de ressource identifie la ressource de mise en page principale. Plus précisément, mainfait référence à un main.xmlfichier qui stocke les informations de mise en page de l'activité principale. mainest W2Ala seule ressource de mise en page de.

Passing R.layout.main to Activity's void setContentView(int layoutResID) method instructs Android to create a user interface screen using the layout information stored in main.xml. Behind the scenes, Android creates the user interface components described in main.xml and positions them on the device screen as specified by main.xml's layout data.

The screen is based on views (abstractions of user interface components) and view groups (views that group related user interface components). Views are instances of classes that subclass the android.view.View class and are analogous to AWT/Swing components. View groups are instances of classes that subclass the abstract android.view.ViewGroup class and are analogous to AWT/Swing containers. Android refers to specific views (such as buttons or spinners) as widgets.

Continuing, onCreate(Bundle) executes ImageView androidImage = (ImageView) findViewById(R.id.android);. This statement first calls View's View findViewById(int id) method to find the android.widget.ImageView element declared in main.xml and identified as android. It instantiates ImageView and initializes it to the values declared in the main.xml file. The statement then saves this object's reference in local variable androidImage.

ImageView and AnimationDrawable

Next, the androidImage.setBackgroundResource(R.drawable.android_animate); statement invokes ImageView's inherited (from View) void setBackgroundResource(int resID) method, setting the view's background to the resource identified by resID. The R.drawable.android_animate argument identifies an XML file named android_animate.xml (presented later), which stores information on the animation, and which is stored in res's drawable subdirectory. The setBackgroundResource() call links the androidImage view to the sequence of images described by android_animate.xml, which will be drawn on this view. The initial image is drawn as a result of this method call.

ImageView lets an app animate a sequence of drawables by calling AnimationDrawable methods. Before the app can do this, it must obtain ImageView's AnimationDrawable. The androidAnimation = (AnimationDrawable) androidImage.getBackground(); assignment statement that follows accomplishes this task by invoking ImageView's inherited (from View) Drawable getBackground() method. This method returns the AnimationDrawable for the given ImageView, which is subsequently assigned to the androidAnimation field. The AnimationDrawable instance is used to start and stop an animation, a process I'll describe shortly.

Finally, onCreate(Bundle) creates the Animate button. It invokes findByViewId(int) to obtain the button information from main.xml, then instantiates the android.widget.Button class.

It then employs the View class's nested onClickListener interface to create a listener object. This object's void onClick(View v) method is invoked whenever the user clicks the button. The listener is registered with its Button object by calling View's void setOnClickListener(AdapterView.OnClickListener listener) method.

To stop, then start the animation, Animate's click listener invokes androidAnimation.stop(); followed by androidAnimation.start();. The stop() method is called before start() to ensure that a subsequent click of the Animate button causes a new animation to begin.

Update and save your code

Before we continue, replace the skeletal code in your W2A.java tab with the code from Listing 1. Save the contents of this window by pressing Ctrl+S, or select Save All from the File menu.

Coding the Android app's main.xml

The app's main activity is associated with an XML-based layout, which is stored in file main.xml, and which is presented in Listing 2.

Listing 2. main.xml

After the XML declaration, Listing 2 declares a LinearLayout element that specifies a layout (a view group that arranges contained views on an Android device's screen in some manner) for arranging contained widgets (including nested layouts) either horizontally or vertically across the screen.

The tag specifies several attributes for controlling this linear layout. These attributes include the following:

  • orientation identifies the linear layout as horizontal or vertical. Contained widgets are laid out horizontally or vertically, and the default orientation is horizontal. "horizontal" and "vertical" are the only legal values that can be assigned to this attribute.
  • layout_width identifies the width of the layout. Legal values include "fill_parent" (to be as wide as the parent) and "wrap_content" (to be wide enough to enclose content). (Note that fill_parent was renamed to match_parent in Android 2.2, but is still supported and widely used.)
  • layout_height identifies the height of the layout. Legal values include "fill_parent" (to be as tall as the parent) and "wrap_content" (to be tall enough to enclose content).
  • gravity identifies how the layout is positioned relative to the screen. For example, "center" specifies that the layout should be centered horizontally and vertically on the screen.
  • background identifies a background image, a gradient, or a solid color. For simplicity, I've hardcoded a hexadecimal color identifier to signify a solid white background (#ffffff). (Colors would normally be stored in colors.xml and referenced from this file.)

The LinearLayout element encapsulates ImageView and Button elements. Each of these elements specifies an id attribute, which identifies the element so that it can be referenced from code. The resource identifier (special syntax that begins with @) assigned to this attribute begins with the @+id prefix. For example, @+id/android identifies the ImageView element as android; this element is referenced from code by specifying R.id.android.

These elements also specify layout_width and layout_height attributes for determining how their content is laid out. Each attribute is assigned wrap_content so that the element will appear at its natural size.

ImageView specifies a layout_marginBottom attribute to identify a space separator between itself and the button that follows vertically. The space is specified as 10 dips, or density-independent pixels. These are virtual pixels that apps can use to express layout dimensions/positions in a screen density-independent way.

Density-independent pixels

Un pixel indépendant de la densité (creux) équivaut à un pixel physique sur un écran de 160 ppp, la densité de base assumée par Android. Lors de l'exécution, Android gère de manière transparente toute mise à l'échelle des unités de trempage requises, en fonction de la densité réelle de l'écran utilisé. Les unités de creux sont converties en pixels d'écran via l'équation: pixels = creux * (densité / 160) . Par exemple, sur un écran de 240 ppp, 1 creux équivaut à 1,5 pixels physiques. Google recommande d'utiliser des unités DIP pour définir l'interface utilisateur de votre application afin de garantir un affichage correct de l'interface utilisateur sur les différents écrans de l'appareil.

Choisir et enregistrer une nouvelle mise en page