Mrz 122015
 
K5L3B1

Im ersten Teil haben wir unsere App schon einmal erstellt und auch getestet. In dieser Lektion werden wir eine zweite Aktivität erstellen, eine Nachricht von der einen zur anderen Aktivität schicken mit Buttons und dadurch weiß diese dann, welches Lied gespielt werden soll.

Lasst uns nochmal einen Blick auf unsere Struktur werfen. Wir haben eine MainActivity mit 4 Knöpfen. Beim drücken von einem Knopf, soll sich die App merken welchen wir gedrückt haben und eine Nachricht an die zweite Aktivität schicken. Diese startet dann und spielt das gewünschte Lied ab.

K5L3B1

Um eine neue Aktivität auszuführen, benötigt Android ein sogenannten Intent (Absicht). Intents sind Nachrichten, welche mit Daten für die gewünschte Aktion gefüllt sind. Wir nutzen einen Intent zum Beispiel, wenn wir eine neue Aktivität starten. Wir können unserem Intent auch noch mit weiteren Informationen füttern, um weitere Aktivitäten zu starten.

Dies wird nach und nach klarer werden, wenn wir sehen, wie wir diese nutzen.

Wir fangen nun damit an eine zweite Aktivität zu erstellen

1. Rechts Klick auf den Paketnamen. Dann auf New –> Other –> Android –> Android Activity

K5L5B1

K5L5B2

2. Wir werden diese wieder als Blank Activity nehmen und nennen sie SecondActivity

K5L5B3

Die erste und die zweite Aktivität sind nun identisch. Als erstes werden wir nun die Display Ausrichtung in den Querformat ändern. Danach werden wir Buttons / Tasten hinzufügen. Um die Ausrichtung zu ändern, müssen wir das AndroidManifest öffnen. Dies können wir mit einem doppel Klick auf AndroidManifest.xml.

K5L5B5

Ihr solltet hierbei beachten, dass Eclipse die SecondActivity automatisch hinzufügen sollte.

In beiden Aktivitäten werden wir nun folgendes ergänzen:
android:screenOrientation=”landscape”

 

 

Dies sollte nun sicherstellen, dass unsere App im Querformat startet. Wir haben dann das folgende Bild:

K5L5B6

 

 

Hinzufügen von Knöpfen

Es macht keinen Sinn 2 Aktivitäten zu haben, wenn wir nicht zu der zweiten wechseln können. Daher werden wir uns jetzt Knöpfe erstellen um zur zweiten wechseln zu können.

Ändern der Benutzeroberfläche / UI

Es gibt 3 verschiedene Wege die UI in unserer App zu ändern. Die erste und wahrscheinlich einfachste ist, wenn wir das Graphical Layout benutzen. Diese Funktion nimmt den Code aus der .xml und zeigt ihn live an. Die zweite Möglichkeit ist es den Code manuell anzupassen. Die dritte ist es den Code in Java zu programmieren. Für diese Lektion werden wir die ersten beiden Varianten uns vornehmen.

Als erstes öffnen wir unsere MainActivity.java, dies ist unsere erste Seite die wir sehen, wenn wir unsere App starten. Die onCreate Methode, ist die Methode die aufgerufen wird, wenn wir unsere Aktivität starten.

In einer der vorherigen Lektionen haben wir schon mal darüber gesprochen, wie der Code unserer Aktivität in dem Layout angezeigt wird. In unserem Fall finden wir die xml unter:

res > layout > activity_main.xml.

Wenn wir dies öffnen, können wir die graphische Oberfläche und die XML öffnen. Dies sieht dann so aus:

K5L5B7 K5L5B8

Dies sind die 2 einfachen Wege, die selbe Datei zu ändern. Wir werden nun bei der graphischen Oberfläche unsere Knöpfe hinzufügen.

Als erstes löschen wir den Text. Dafür klicken wir einfach auf den Text und drücken rechte Maustaste und Löschen. Nun schaut ihr links in der Spalte nach Button, dies ist unserer Knopf. Nun zieht ihr bitte einfach dieses Widget 4 mal in unsere App. Wie ihr erkennen könnt, könnt ihr die Knöpfe gleich mit ausrichten. Nun sollten wir den folgenden Stand haben:

K5L5B10

In unserer xml Datei sieht es wie folgt aus:

K5L5B11

Wenn ihr nun einfach auf jeden einzelnen Knopf drückt und auf edit Text geht, könnt ihr diese umbenennen. Unter Layout Hight und Width könnt ihr auch die Größen ändern.

K5L5B12

Wenn wir unsere App nun auf unseren Geräten laufen lassen, merken wir recht schnell, die Knöpfe können noch nichts. Daher werden wir als nächstes einen Listener in unsere MainActivity.Java programieren.

1. Als erstes müssen wir Variablen erzeugen

2. Nun mit STRG + Shift + O oder mit dem Mauszeiger über Button und Android.widget.Button importieren

3. Nun werden wir die Knöpfe initialisieren in der onCreate Methode. Um dies zu tun, nutzen wir die ID jedes Buttons. Button B1 sollte die ID button1 haben und so weiter.

findViewById schaut nach, wo unsere Buttons sind und weißt diesem Feld unsere Buttons zu. Wir erzeugen somit quasi aus dem Bereich der den Button darstellt einen Knopf zum drücken.

4. Jetzt müssen wir noch den onCklick Listener hinzufügen:

Jetzt müssen wir noch den Listener in unserer onCreate Methode erstellen. Wenn wir dies nicht erstellen, können von unseren Knöpfen nie befehle ausgehen.

Ihr müsst auch schauen das ihr alle Importierungen richtig habt.

Nun haben wir es geschafft, dass unsere App auf unseren Klick den Knopf richtig erkennt. Momentan haben wir aber noch keinen Befehl in den leeren Code eingefügt, was wir damit vor haben. Wir können hier alles machen, was wir wollen. Wir werden jetzt die secondActivity starten.

5. Dafür werden wir die folgende Methode hinzufügen:

6. Nun müssen wir noch in unseren onClick Listener den entsprechenden Code einfügen:

Diese Methode ist ganz klar und einfach. Wir nehmen einen Integer als Parameter. In der ersten Zeile erstellen wir einen Intent, welcher die Aktivität (MainActivity) zur SecondActivity überträgt. Danach fügen wir einen Wert, die Nummer unseres Knopfes, dem Intent hinzu. Dabei ist der Schlüssel unseres Buttons, damit wir immer nachvollziehen können, was passiert ist. Zum Schluss rufen wir die startActivity auf, mit dem neu erstellen Intent. Dies wird nun die secondActivity aufrufen, egal welchen Knopf wir drücken und sendet auch wieder eine Nachricht, durch welche wir nachvollziehen können was passiert.

K5L5B13 K5L5B14

 

Hier auch nochmal mein Code zum Abschluss:

 

Wenn wir nun unsere Architektur der App genauer anschauen, wird diese langsam klar. Der Punkt 5 werden wir in der nächsten Lektion klären.

K5L3B1

Falls ihr Fragen habt, immer raus damit, ich helfe euch sehr gerne. Hinterlasst bitte einfach einen Kommentar.

Teilt diese Seite mit euren Freunden und besucht uns mal auf Facebook und auf Google+, dass würde dieser Seite wirklich weiterhelfen, Danke sehr. Oder ein Klick auf die Werbung, hilft dabei diese Seite am laufen zu halten.

Quelle: Original Anleitung auf englisch von Kilobolt Studios

Lektion 4 - Erstellen einer Musik App Teil 1 Lektion 6 - Erstellen einer Musik App Teil 3

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)

%d Bloggern gefällt das: