Apps für Android Wear Grundkurs

Layouts für unterschiedliche Displayformen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es gibt eine Vielzahl verschiedener Smartwatches und jede hat ein anderes Display: rund, eckig, kleine Auflösung, große Auflösung. Hier erfahren Sie, wie Sie Ihre App so entwickeln, dass sie auf all diesen Geräten gut aussieht.

Transkript

Wenn Sie Apps für Smartwatches erstellen, dann können Sie für runde und rechteckige Displays unterschiedliche Layouts definieren. Wenn Sie die App dann ausführen, wird automatisch das richtige Layout verwendet, je nachdem, ob die Uhr ein rundes oder ein rechteckiges Display hat. Ich habe hier das Projekt "MultipleLayouts" geöffnet, ein ganz einfaches "Android Wear" Projekt. Es besteht aus diesen beiden Modulen "mobile" und "wear". Wenn Sie mit "Android Studio" ein neues Projekt erstellen, bekommen Sie genauso eines. Sie können also das Projekt "MultipleLayouts" öffnen, oder auch selbst ein neues, leeres Projekt erstellen. Wenn ich diese App in der "run configuration wear" ausführe, also auf der Smartwatch, dann erscheint dort der Text "Hello Square World!". In diesem Video zeige ich Ihnen, wie das funktioniert, dass genau dieser Text angezeigt wird, und nicht "Hello Round World!", und wie Sie diesen Mechanismus in Ihren eigenen Anwendungen nutzen können. Schauen wir uns dazu die Klasse "MainActivity" im Modul "wear" an. Ich bin im Java-Ordner und hier ist die Klasse "MainActivity". Der Code sieht praktisch genauso aus, wie in einer neuen "Activity" in einem normalen Smartphone-Projekt. In der "onCreate"-Methode wird zuerst "onCreate" der Oberklasse aufgerufen, und danach das Layout "setContentView" gesetzt. Jetzt schauen wir uns diese Layout-Datei mal an. Wie Sie sehen, beginnt die Datei mit dem Element "WatchViewStub", aber das eigentliche Layout fehlt. Stattdessen stehen hier nur zwei Unterlayouts, nämlich "rect_activity_main" und "round_activity_main". Wenn die App auf der Smartwatch ausgeführt wird, dann wird diese Layoutdatei geladen, und je nachdem, ob die Watch ein rundes oder ein rechteckiges Display hat, wird automatisch das passende Layout ausgewählt und die entsprechende Datei geladen. Schauen wir uns zuerst "rect_activity_main "an. Die Datei befindet sich im "res" Ordner, im Unterordner Layout. Wie Sie sehen habe ich hier ein "LinearLayout", und darin gibt es hier eine "deviceId" namens "wear_square". Und dann haben wir hier einen "TextView", und der Text für diesen Textview heißt "Hello Square World!". und der befindet sich hier unter "values" in der Datei "strings.xml". Wenn ich die App nun auf einer Uhr mit einem runden Display ausführe, dann wird diese Datei "round_activity_main" verwendet. Die sieht im Prinzip genauso aus, wie die andere, nur als "deviceId" steht hier "wear_round". Wie alle Layouts können Sie sich auch diese im "Design View" von "Android Studio" anschauen. Allerdings sehen Sie nicht unbedingt ein Uhrendisplay, sondern das Gerät, dass hier halt zuletzt ausgewählt war. In meinem Fall ist das ein Nexus 4. Um das zu ändern, können Sie einfach diese Liste aufklappen und das entsprechende Layout auswählen. Ich nehme gleich oben das erste "Round_API_23". So, jetzt haben wir ein rundes Display und es steht tatsächlich auch drin "Hello Round World!". Jetzt mache ich das Gleiche mit dem rechteckigen Layout, also "rect_activity_main" öffnen, hier in "Design View" umschalten, und jetzt habe ich auch hier wieder den "Round View", den ich eben gerade ausgewählt habe für die andere Datei. Das heißt, auch hier muss ich wieder umschalten, indem ich hier in die Liste klicke. Ich nehme das "Square" und jetzt habe ich mein quadratisches Layout. Das bleibt jetzt aber pro Datei so eingestellt, das heißt, wenn ich zur "round_activity" gehe, habe ich das runde Display, gehe ich zur "rect_activity", sehe ich das rechteckige Display. Jetzt kann ich hier ganz normal Änderungen vornehmen, indem ich in den "Text View" gehe, und dann verschiede Attribute hinzufüge. Ich könnte zum Beispiel die Hintergrundfarbe ändern, "android:background = android:color" und dann nehme ich "holo_blue_bright". Hier auf der linken Seite können Sie schon eine kleine Vorschau sehen, und wenn ich in den "Design View" umschalte, dann sehen Sie hier tatsächlich tolle Hintergrundfarben. Damit man den Text besser lesen kann, setze ich die Textfarbe auf Schwarz. Das mache ich dann im "Text View", ich nehme hier "android:textcolor", setz das auf "android:color", und dann nehmen wir hier "black". Sie sehen hier links wieder die Vorschau, und schalte ich in den "Design View" um, dann können wir sehen, Text schwarz auf Hintergrund hellblau. So jetzt teste ich die Änderungen im Emulator. Die App wird geladen und hier sind meine neuen Farben. Wenn Sie also die GUI für Ihre Apps entwerfen, sollten Sie darauf achten, dass Sie das einmal für runde und einmal für eckige Display machen müssen, denn Sie haben dafür zwei Dateien, in denen Sie jeweils die Layouts beschreiben müssen.

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!