Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Apps für Android Wear Grundkurs

Karten anzeigen mit CardFragment

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Smartwatch-Displays können rund oder quadratisch sein, und sie können viele verschiedene Auflösungen haben. Damit Ihre App auf allen Geräten möglichst gleich aussieht, können Sie CardFragments einsetzen und so ohne viel Aufwand ein einheitliches Layout schaffen.

Transkript

Für das Layout in Wear Apps werden am Häufigsten sogenannte Karten oder Cards verwendet. Im SDK sind bereits verschiedene Card Layouts vordefiniert, die Sie sofort nutzen können. In diesem Video werde ich Ihnen zeigen, wie sie die Card Fragment Klasse verwenden, um in einem einfachen Layout eine Meldung anzuzeigen. Das Ergebnis wird dann sowohl auf runden wie auch auf quadratischen Uhren gut aussehen, ohne dass Sie irgendwelche Anpassungen am Design oder am Code vornehmen müssen. Ich habe hier das Projekt CardFragment geöffnet. Im res Ordner, im drawable Verzeichnis befinden sich bereits zwei Bilder. Das ist einmal ein Icon mit einer Größe von 48x48 und dann ein Foto mit 800x800 Punkten, das wird dann später für den Hintergrund der Karte verwendet. Im Layoutverzeichnis liegen drei Dateien. In activity_main – das ist das Startlayout – sind die beiden Verweise auf das rechteckige und das runde Layout. In diesem Beispiel möchte ich Ihnen aber das Card Layout zeigen und das passt sich automatisch an die verschiedenen Displayformen an, deshalb brauche ich die beiden Dateien nicht und kann sie löschen. Jetzt ändere ich mein eigentliches Layout. Als Wurzelelement nehme ich nicht mehr WatchViewStub, sondern ich nehme hier ein BoxInset- Layout, das ist dieses. Das wird dann gleich mein Card Fragment enthalten. Die beiden Zeilen mit rect und round_activity brauche ich jetzt natürlich nicht mehr, die kann ich löschen. Nun füge ich in mein BoxInsetLayout ein inneres Element ein und zwar ein FrameLayout. Das ist gut geeignet, wenn man zur Laufzeit ein einzelnes Item einfügen möchte, dafür wird es auch häufig in Smartphone-Apps verwendet. Breite und Höhe setze ich auf match_parent, indem ich die vorgeschlagenen Werte bestätige. Um dieses Layout nun aus dem Java- Code heraus ansprechen zu können, braucht es eine ID. Ich gebe ihm also eine ID und zwar nenne ich mein FrameLayout frame_layout. Jetzt kann ich mein Layout noch etwas weiter tunen, zum Beispiel über ein Attribut Layout_box, das setze ich auf bottom, dadurch wird meine Karte auf einem eckigen Display am unteren Rand sein. Mit Alt + Enter werde ich das End-Tag los und damit ist meine Layoutdatei fertig. Den Inhalt meines Layouts möchte ich nun programmatisch zur Laufzeit festlegen, deshalb gehe ich zu meiner Klasse MainActivity. In der onCreate Methode wird noch WatchViewStub verwendet, das brauchen wir jetzt nicht mehr, das kann ich rauswerfen, denn ich nehme nun mein Card Layout. Ich lade das Layout immer noch aus activity_main, aber nun nehme ich ein FragmentManager und füge ein Card Layout ein. Das ist das gleiche Fragment API, das auch in normalen Smartphone-Apps verwendet wird. Ich kann hier also ganz normal mit dem FragmentManager arbeiten, also schreibe ich FragmentManager, manager = getFragmentManager. Wir müssen keine Kompatibilitäts- Bibliotheken verwenden, denn diese App wird auf einer Smartwatch laufen und die gibt es nur mit aktuellen Android-Versionen. Als nächstes muss ich nun eine FragmentTransaction beginnen und die hole ich mir vom Manager mit beginTransaction. Nun baue ich mir ein CardFragment. Das stammt aus der Wearable Support Bibliothek, das erwähne ich deshalb, weil diese Bibliothek hier in der gradle build Datei als Abhängigkeit deklariert wird. Zurück zum Quelltext. Ich brauche hier also ein CardFragment und das hole ich mir mit CardFragment.create. Diese Methode hat zwei strings, nämlich den Titel und die Beschreibung, die habe ich in der Datei strings.xml vordefiniert, einmal als card_title und einmal als card_description. Die kann ich hier jetzt einfügen und zwar hole ich die mit getString, geb hier als ID R.string.card_title an und als zweites nochmal getString und dann R.string.card_description. Jetzt habe ich also mein Fragment, mit dem ich festlege, was auf der Uhr angezeigt wird. Jetzt füge ich es noch zur FragmentTransaction hinzu @ transaction.add und hier gebrauche die ContainerViewId und das Fragment, die habe ich ja bereits bei der Definition des Layouts festgelegt und zwar hier FrameLayout. Kann ich also hier einfügen id.frame_Layout und als zweites mein Fragment, also fragment. Schließlich muss ich die Transaktion noch abschließen, also transaction.commit. Nun können wir die Anwendung testen. Achten Sie darauf, dass Sie die wear Konfiguration gewählt haben und drücken Sie auf den grünen Knopf. Hier meine Emulatoren, ich habe den runden und den quadratischen, ich wähle beide, sodass beide gestartet werden und wir uns auf beiden anschauen können, wie das aussieht. Das dauert jetzt einen kleinen Moment und nun erschein die App auf beiden Uhren. Wir sehen hier die Nachrichten, denn die Nachrichten werden ja gleich auf der on- Create Methode geschickt. Jetzt können Sie auf beiden die Nachricht nach rechts schieben und verwerfen. Jetzt gehe ich nochmal zurück zu meinem Code und füge noch ein paar weitere Features hinzu. Zuerst lege ich mal ein Hintergrundbild fest, dazu füge ich im activity_layout ein Attribut hinzu und zwar background und dann nehme ich aus meinem drawable Verzeichnis das London-Foto. Jetzt kann ich auch noch ein Icon hinzufügen und zwar hier an der Stelle, an der ich mein Fragment erstelle. Als dritten Parameter gebe ich hier an R.drawable.Landon_icon. Sie sehen hier links wieder die Vorschau. Jetzt kann ich erneut testen. Ich wähle wieder beide Emulatoren und drücke wieder auf OK. Wie Sie sehen, erscheint auch diesmal wieder die Meldung auf beiden Uhren, diesmal mit meinem Icon und dem Hintergrundbild. Wie Sie auch sehen können, haben wir hier auf unterschiedlichen Displayformen auch ein leicht unterschiedliches Layout. Auf der quadratischen Uhr, wenn Sie genau hinsehen, liegt die Karte am unteren Rand des Displays, auf der runden Uhr liegt sie in der Mitte. Auch der Abstand des Icons zum Displayrand ist unterschiedlich, hier ist er etwas grösser und hier stößt das Icon fast an. Sie können dieses Layout im XML und in Ihrem Java-Code beeinflussen mit der Klasse CardFragment, aber Sie haben keine volle Kontrolle darüber, wo genau auf dem Display die Elemente sein werden. Der Titel wird immer oben sein und die Beschreibung wird immer unten sein und das Icon irgendwo rechts oben. Auf diese Weise ist das Layout leicht zu handhaben und Sie müssen nicht Unmengen von Code schreiben, um alles zum Laufen zu bekommen.

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!