Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Apps für Android Wear Grundkurs

Action-Buttons anzeigen mit ActionPage

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie Ihrer App einen Button hinzufügen, dann können die Nutzer darauf tippen und damit diverse Aktionen auslösen.

Transkript

Ein weiteres Standardlayout für Wearable Apps ist die Action Page. Sie zeigt einen runden Button an und optional können noch ein Bild und ein Text dargestellt werden. Dann kann man am Button einen Click Listener anmelden, der aufgerufen wird, wenn der Nutzer den Button drückt. Ich habe das Projekt ActionPage geöffnet. Im drawable Verzeichnis des res Folders im wear Modul befindet sich ein Icon namens ic_info, das hat einen weißen Vordergrund und einen durchsichtigen Hintergrund. Jetzt ersetze ich mein Projekt durch eine ActionPage. Dazu gehe ich in die Datei activity_main. Zuerst ändere ich das Wurzelement BoxInsetLayout auf ActionPage, Breite und Höhe lasse ich auf match_parent jetzt füge ich Attribute hinzu, die es nur bei ActionPage gibt. Zuerst möchte ich die Hintergrund- farben des Buttons setzen. Dazu füge ich das Attribut color hinzu mit dem Wert android:color/holo_blue_bright. Als Hintergrundbild habe ich ein Foto von London, das sieht so aus. Später wird auf der Action- Page ein Label erscheinen, das kann aus ein oder aus zwei Zeilen bestehen. Ich möchte das gerne alles in einer Zeile haben, deshalb füge ich hier noch ein Attribut maxLines hinzu und setz es auf 1. Schließlich setze ich noch das Textattribut auf den Namen der Anwendung string/app_name. Dann sind wir fertig. Hier unten das Framelayout brauche ich nicht mehr, das kann ich löschen. Jetzt mache ich noch ein leeres Tag draus, indem ich die Zeile lösche und damit ist unser Layout fertig. Jetzt gehe ich zu meiner Main- Activity und räume da ebenfalls auf. All diesen Code, der hier das Fragment erzeugt und konfiguriert, den brauche ich nicht mehr, ich habe ja mein Layout vollständig in der xml-Datei definiert. Hier sind alle benötigten Informationen enthalten, ich muss also keinen weiteren Java-Code schreiben. Jetzt kann ich die Anwendung ausführen. Achten Sie wieder darauf, dass Sie das wear Modul wählen und drücken Sie auf das Knöpfchen. Ich starte beide Emulatoren, den runden und den rechteckigen, damit wir sehen können, wie das auf den beiden aussieht. Wenn die beiden Emulatoren gestartet sind, dann können Sie sehen, die Layouts sind grundsätzlich die gleichen. Ich habe hier unten mein Label, dann habe ich das Hintergrundbild auf beiden und in der Mitte habe ich den runden Knopf. Jetzt kann ich da draufdrücken und dann sehen Sie, es gibt diesen lustigen Effekt. All das ist unabhängig davon, welche Form das Display hat und ich musste dafür auch nirgendwo irgendwas extra programmieren. Nun sieht der Button aber noch etwas eintönig aus und es passiert auch noch nichts, wenn ich draufdrücke. Wir werden jetzt also ein Icon hinzufügen und einen entsprechenden Listener an den Button dranhängen. Für das Icon bietet mir die ActionPage Komponente ein einfaches Attribut an. Ich füge das hier hinten an und zwar heißt das src also source und hier geben ich meine Ressource an für das Icon also mein drawable/ic_info. So, das genügt schon. Ich starte also meine Anwendung erneut, Restart, wieder auf beiden Emulatoren, wieder OK. Jetzt habe ich den i auf meinen Buttons und der User kann erwarten i für Info, dass wenn er drauftippt, weitere Informationen zum Hotel bekommt. Der Button ist im Vergleich zum Display groß genug, er sollte gut zu sehen und leicht zu treffen sein. Jetzt fehlt nur noch die eigentliche Aktion, also was passieren soll, wenn der Button gedrückt wird. Um das zu konfigurieren, gehe ich wieder zurück in die onCreate Methode meiner MainActivity. Zuerst benötige ich eine Referenz auf meiner ActionPage und dazu wiederum benötige ich die ID. Die heißt hier noch watch_view_stub, ich ändere das auf action_page, das passt besser. Jetzt gehe ich wieder in meine MainActivity und erstelle mir hier eine Variable vom Typ ActionPage. Ich nenne Sie page und ich finde sie über findViewById mit der ID, die ich gerade festgelegt habe. Das muss ich natürlich noch casten, damit der Typ stimmt. Nun hänge ich an meine Page den Listener dran, der auf den Klick reagiert. Das heißt, ich schreibe page, setOnClickListener, new OnClickListener. Ich bekomme von Android Studio schon alles vorgefertigt und muss nur den eigentlichen Nutzcode schreiben und zwar hier in der Methode onClick. Ich mache es mir einfach und schreibe einfach nur eine Log-Ausgabe. Dazu nehme ich die Klasse Log und die Methode d für debug. Als Quelle gebe ich die MainActivity an und als Logtext button gedrückt! Bevor ich die App jetzt erneut ausführe, ordne ich das hier auf dem Bildschirm etwas anders an. Nun habe ich mein Android Studio links und meine beiden Emulatoren rechts – rechts oben den quadratischen, rechts unten den runden. Links unten im Android Studio sehe ich die Ausgabe des Emulators Wear_Square und ich kann es umschalten auf den Emulator Wear_Round und dann sehe ich hier die Logausgaben des runden Emulators. Nun tippe ich auf den Button auf der runden Uhr. Wie Sie sehen können, steht tatsächlich im Log button gedrückt! Tippe ich hier oben drauf, passiert nichts, denn das ist ja das Logfile des runden Emulators und der eckige hat sein eigenes. Ich stelle also um auf das andere Log und dann können Sie sehen, hier kam die Meldung bereits an. Ich zeige mal noch zwei, drücken, es geht weiter. HIer wieder klicken, passiert nichts. Sie können also zur gegebenen Zeit immer nur die Ausgaben eines Emulators sehen und die Anwendung nur auf einem Emulator aktualisieren, ausführen und steuern. Wenn Sie an grafischen Oberflächen arbeiten, dann kann es sinnvoll sein, mehrere Emulatoren gleichzeitig laufen zu lassen, damit können Sie besser überprüfen, wie Ihr Layout und Design auf unterschiedlichen Displays aussieht.

Apps für Android Wear Grundkurs

Erstellen Sie Anwendungen für das Internet der Dinge mit Android Wear.

2 Std. 39 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!