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.

Das Projektfenster hebt W2A hervor , den Namen der W2A.java
Quelldatei der App (obwohl die .java
Dateierweiterung 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.java
Datei beginnt mit einer Paketanweisung , die das Paket ( ca.javajeff.w2a
) benennt, in dem die W2A
Klasse gespeichert ist . Darauf folgt eine Reihe von Importanweisungen für verschiedene Android-API-Typen. Als nächstes beschreibt der Code die W2A
Klasse, die erweitert wird android.app.Activity
.
W2A
deklariert zuerst ein androidAnimation
Instanzfeld vom Typ android.graphics.drawable.AnimationDrawable
. Objekte vom Typ AnimationDrawable
beschreiben 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. AnimationDrawable
indirekt erweitert die abstrakte android.graphics.drawable.Drawable
Klasse, die eine allgemeine Abstraktion für ein Drawable ist.
Die onCreate () -Methode
Die gesamte Arbeit der App findet in W2A
der ü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.main
ist eine Kennung (ID) für eine Anwendungsressource, die sich in einer separaten Datei befindet. Sie interpretieren diese ID wie folgt:
R
ist der Name einer Klasse, die beim Erstellen der App generiert wird. Diese Klasse wird benannt,R
weil ihr Inhalt verschiedene Arten von Anwendungsressourcen identifiziert, einschließlich Layouts, Bilder, Zeichenfolgen und Farben.layout
ist der Name einer Klasse, die darin verschachtelt istR
. 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 Beispielstring
identifiziert String - Ressourcen.main
ist der Name einerint
Konstante auf Basis vonlayout
. Diese Ressourcen-ID identifiziert die Hauptlayoutressource. Insbesonderemain
bezieht sich auf einemain.xml
Datei , die speichert die Layoutinformationen Haupttätigkeit.main
istW2A
die einzige Layout-Ressource.
Durch R.layout.main
die Übergabe an Activity
die 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.xml
und positioniert sie auf dem Gerätebildschirm, wie in den main.xml
Layoutdaten 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.View
Klasse unterordnen und analog zu AWT / Swing-Komponenten sind. Ansichtsgruppen sind Instanzen von Klassen, die die abstrakte android.view.ViewGroup
Klasse 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.ImageView
Element deklariert in main.xml
wie und identifiziert android
. Es instanziiert ImageView
und initialisiert es mit den in der main.xml
Datei 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 ImageView
geerbte (von View
) void setBackgroundResource(int resID)
Methode auf und setzt den Hintergrund der Ansicht auf die durch identifizierte Ressource resID
. Das R.drawable.android_animate
Argument 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 - drawable
Unterverzeichnis. Der setBackgroundResource()
Aufruf verknüpft die androidImage
Ansicht 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 thatfill_parent
was renamed tomatch_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 incolors.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.