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.
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
2. Wir werden diese wieder als Blank Activity nehmen und nennen sie SecondActivity
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.
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“
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.musikapp" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="21" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" android:screenOrientation="landscape" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".SecondActivity" android:label="@string/title_activity_second" android:screenOrientation="landscape" > </activity> </application> </manifest> |
Dies sollte nun sicherstellen, dass unsere App im Querformat startet. Wir haben dann das folgende Bild:
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.
|
1 2 3 4 5 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } |
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:
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:
In unserer xml Datei sieht es wie folgt aus:
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.
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
|
1 2 3 |
public class MainActivity extends ActionBarActivity { Button b1, b2, b3, b4; |
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.
|
1 2 3 4 5 6 7 8 9 10 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); b1 = (Button) findViewById(R.id.button1); b2 = (Button) findViewById(R.id.button2); b3 = (Button) findViewById(R.id.button3); b4 = (Button) findViewById(R.id.button4); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
private void createListeners() { b1.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub } }); b2.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub } }); b3.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub } }); b4.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub } }); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); b1 = (Button) findViewById(R.id.button1); b2 = (Button) findViewById(R.id.button2); b3 = (Button) findViewById(R.id.button3); b4 = (Button) findViewById(R.id.button4); createListeners(); } |
Ihr müsst auch schauen das ihr alle Importierungen richtig habt.
|
1 2 3 4 5 6 7 8 9 |
import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; |
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:
|
1 2 3 4 5 |
private void startSecondActivity(int buttonNum) { Intent intent = new Intent(this, SecondActivity.class); intent.putExtra("BUTTON NUMBER", buttonNum); startActivity(intent); } |
6. Nun müssen wir noch in unseren onClick Listener den entsprechenden Code einfügen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
private void createListeners() { b1.setOnClickListener(new OnClickListener() { public void onClick(View v) { <strong>startSecondActivity(1);</strong> // TODO Auto-generated method stub } }); b2.setOnClickListener(new OnClickListener() { public void onClick(View v) { <strong>startSecondActivity(2);</strong> // TODO Auto-generated method stub } }); b3.setOnClickListener(new OnClickListener() { public void onClick(View v) { <strong>startSecondActivity(3);</strong> // TODO Auto-generated method stub } }); b4.setOnClickListener(new OnClickListener() { public void onClick(View v) { <strong>startSecondActivity(4);</strong> // TODO Auto-generated method stub } }); } |
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.
Hier auch nochmal mein Code zum Abschluss:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
package com.example.musikapp; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class MainActivity extends ActionBarActivity { Button b1, b2, b3, b4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); b1 = (Button) findViewById(R.id.button1); b2 = (Button) findViewById(R.id.button2); b3 = (Button) findViewById(R.id.button3); b4 = (Button) findViewById(R.id.button4); createListeners(); } private void createListeners() { b1.setOnClickListener(new OnClickListener() { public void onClick(View v) { startSecondActivity(1); // TODO Auto-generated method stub } }); b2.setOnClickListener(new OnClickListener() { public void onClick(View v) { startSecondActivity(2); // TODO Auto-generated method stub } }); b3.setOnClickListener(new OnClickListener() { public void onClick(View v) { startSecondActivity(3); // TODO Auto-generated method stub } }); b4.setOnClickListener(new OnClickListener() { public void onClick(View v) { startSecondActivity(4); // TODO Auto-generated method stub } }); } private void startSecondActivity(int buttonNum) { Intent intent = new Intent(this, SecondActivity.class); intent.putExtra("BUTTON NUMBER", buttonNum); startActivity(intent); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
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.
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