Android Studio für Anfänger, Teil 2: Erkunden und codieren Sie die App

Aktualisiert: Januar 2020.

In Teil 1 der Einführung dieses Anfängers in Android Studio haben Sie Android Studio in Ihrer Entwicklungsumgebung eingerichtet und die Benutzeroberfläche kennengelernt. In Teil 2 codieren Sie jetzt Ihre erste App.

Die animierte mobile App besteht aus einer einzelnen Aktivität, in der Googles Android-Robotercharakter und eine Schaltfläche zum Animieren des Charakters dargestellt werden. Durch Klicken auf die Schaltfläche ändert das Zeichen allmählich die Farbe von Grün zu Rot zu Blau und dann wieder zu Grün. Obwohl die App nicht besonders nützlich ist, hilft Ihnen das Schreiben, sich mit Android Studio vertraut zu machen. In Teil 3 erstellen und führen Sie die App mit einem Android-Geräteemulator und einem Kindle Fire-Tablet aus.

Beachten Sie, dass diese Serie für Android Studio 3.2.1, die aktuelle stabile Version zum Zeitpunkt dieses Schreibens, aktualisiert wurde.

Projekt- und Editorfenster von Android Studio

Ich habe das Hauptfenster von Android Studio am Ende von Teil 1 vorgestellt. Dieses Fenster ist in mehrere Bereiche unterteilt, darunter ein Projektfenster, in dem Sie die Ressourcendateien einer App identifizieren, und verschiedene Editorfenster, in denen Sie den Code schreiben und Ressourcen für mobile Apps angeben in Android Studio. Das Projektfenster und ein Editorfenster sind in Abbildung 1 dargestellt.

Jeff Friesen

Das Projektfenster hebt W2A hervor , den Namen der W2A.javaQuelldatei der App (obwohl die .javaDateierweiterung nicht angezeigt wird). Zu entsprechendem W2A ist ein Editor - Fenster, mit einem Doppelklick erreicht W2A im Projekt - Fenster. Das Editorfenster zeigt den aktuellen Inhalt der Datei an, in diesem Fall den Java-Quellcode für die Hauptaktivität der App.

Jedes Editorfenster ist einer Registerkarte zugeordnet. Das Editorfenster von W2A ist beispielsweise einer Registerkarte W2A.java zugeordnet . Eine zweite Registerkarte mit der Bezeichnung main.xml (das standardmäßige XML-basierte Layout für die Hauptaktivität der App) wird ebenfalls angezeigt. Sie wechseln von einem Editorfenster in ein anderes, indem Sie auf die Registerkarte des Fensters klicken.

download Holen Sie sich den Code Laden Sie den Quellcode für die Android-Beispiel-App herunter: W2A.java. Erstellt von Jeff Friesen für JavaWorld.

Die Android-Beispiel-App

Die Beispiel-App ( W2A.java ) besteht aus einer Hauptaktivität, in der der Android-Robotercharakter und eine Schaltfläche angezeigt werden. Wenn der Benutzer die Taste drückt, animiert der Roboter durch eine Reihe von Farben. In diesem Abschnitt werden wir den Quellcode und die Ressourcen der Aktivität untersuchen.

Entdecken und codieren Sie die Android-Beispiel-App

Der Quellcode der Aktivität wird in der Datei gespeichert W2A.java, die in Listing 1 dargestellt ist.

Listing 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); } } 

Die W2A.javaDatei beginnt mit einer Paketanweisung , die das Paket ( ca.javajeff.w2a) benennt, in dem die W2AKlasse gespeichert ist . Darauf folgt eine Reihe von Importanweisungen für verschiedene Android-API-Typen. Als nächstes beschreibt der Code die W2AKlasse, die erweitert wird android.app.Activity.

W2Adeklariert zuerst ein androidAnimationInstanzfeld vom Typ android.graphics.drawable.AnimationDrawable. Objekte vom Typ AnimationDrawablebeschreiben Frame-by-Frame - Animationen, in dem der aktuellen drawable mit dem nächsten drawable in der Animationssequenz ersetzt ist.

Was ist ein Drawable?

Ein Zeichenobjekt kann gezeichnet werden, z. B. ein Bild. AnimationDrawableindirekt erweitert die abstrakte android.graphics.drawable.DrawableKlasse, die eine allgemeine Abstraktion für ein Drawable ist.

Die onCreate () -Methode

Die gesamte Arbeit der App findet in W2Ader übergeordneten onCreate(Bundle)Methode statt: Es sind keine anderen Methoden erforderlich, was dazu beiträgt, diese App einfach zu halten.

onCreate(Bundle) ruft zuerst die gleichnamige Superklassenmethode auf, eine Regel, die von allen überschreibenden Aktivitätsmethoden befolgt werden muss.

Diese Methode wird dann ausgeführt setContentView(R.layout.main), um die Benutzeroberfläche der App einzurichten. R.layout.mainist eine Kennung (ID) für eine Anwendungsressource, die sich in einer separaten Datei befindet. Sie interpretieren diese ID wie folgt:

  • Rist der Name einer Klasse, die beim Erstellen der App generiert wird. Diese Klasse wird benannt, Rweil ihr Inhalt verschiedene Arten von Anwendungsressourcen identifiziert, einschließlich Layouts, Bilder, Zeichenfolgen und Farben.
  • layoutist der Name einer Klasse, die darin verschachtelt ist R. Eine Anwendungsressource, deren ID in dieser Klasse gespeichert ist, beschreibt eine bestimmte Layoutressource. Jede Art von Anwendungsressource ist einer verschachtelten Klasse zugeordnet, die auf ähnliche Weise benannt ist. Zum Beispiel stringidentifiziert String - Ressourcen.
  • mainist der Name einer intKonstante auf Basis von layout. Diese Ressourcen-ID identifiziert die Hauptlayoutressource. Insbesondere mainbezieht sich auf eine main.xmlDatei , die speichert die Layoutinformationen Haupttätigkeit. mainist W2Adie einzige Layout-Ressource.

Durch R.layout.maindie Übergabe an Activitydie void setContentView(int layoutResID)Methode wird Android angewiesen, einen Benutzeroberflächenbildschirm mit den in gespeicherten Layoutinformationen zu erstellen main.xml. Hinter den Kulissen erstellt Android die in beschriebenen Benutzeroberflächenkomponenten main.xmlund positioniert sie auf dem Gerätebildschirm, wie in den main.xmlLayoutdaten angegeben.

Der Bildschirm basiert auf Ansichten (Abstraktionen von Benutzeroberflächenkomponenten) und Ansichtsgruppen (Ansichten, die verwandte Benutzeroberflächenkomponenten gruppieren). Ansichten sind Instanzen von Klassen, die die android.view.ViewKlasse unterordnen und analog zu AWT / Swing-Komponenten sind. Ansichtsgruppen sind Instanzen von Klassen, die die abstrakte android.view.ViewGroupKlasse unterordnen und analog zu AWT / Swing-Containern sind. Android bezeichnet bestimmte Ansichten (wie Schaltflächen oder Drehfelder) als Widgets .

Weiter, wird onCreate(Bundle)ausgeführt ImageView androidImage = (ImageView) findViewById(R.id.android);. Diese Anweisung erste Anrufe View‚s View findViewById(int id)Methode , um die zu finden android.widget.ImageViewElement deklariert in main.xmlwie und identifiziert android. Es instanziiert ImageViewund initialisiert es mit den in der main.xmlDatei deklarierten Werten . Die Anweisung speichert dann die Referenz dieses Objekts in einer lokalen Variablen androidImage.

ImageView und AnimationDrawable

Als Nächstes androidImage.setBackgroundResource(R.drawable.android_animate);ruft die Anweisung die ImageViewgeerbte (von View) void setBackgroundResource(int resID)Methode auf und setzt den Hintergrund der Ansicht auf die durch identifizierte Ressource resID. Das R.drawable.android_animateArgument identifiziert eine XML - Datei mit dem Namen android_animate.xml(presented später), die speichert Informationen über die Animation und die gespeichert wird res‚s - drawableUnterverzeichnis. Der setBackgroundResource()Aufruf verknüpft die androidImageAnsicht mit der von beschriebenen Beschreibung der Bildsequenz android_animate.xml, die in dieser Ansicht gezeichnet wird. Das erste Bild wird als Ergebnis dieses Methodenaufrufs gezeichnet.

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

Ein dichteunabhängiges Pixel (Dip) entspricht einem physischen Pixel auf einem 160-dpi-Bildschirm, der von Android angenommenen Basisliniendichte. Zur Laufzeit übernimmt Android transparent die Skalierung der erforderlichen Dip-Einheiten basierend auf der tatsächlichen Dichte des verwendeten Bildschirms. Dip-Einheiten werden über die folgende Gleichung in Bildschirmpixel umgewandelt: Pixel = Dips * (Dichte / 160) . Auf einem 240-dpi-Bildschirm entspricht 1 Dip beispielsweise 1,5 physischen Pixeln. Google empfiehlt die Verwendung von Dip-Einheiten, um die Benutzeroberfläche Ihrer App zu definieren und eine ordnungsgemäße Anzeige der Benutzeroberfläche auf verschiedenen Gerätebildschirmen sicherzustellen.

Auswählen und Speichern eines neuen Layouts