Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Erstellen Sie ein benutzerdefiniertes Uhr-Widget: Uhrendesign

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Die Entwicklung von Widgets für die Android-Plattform erfordert etwas andere Aufgaben als die Standard-App-Entwicklung.  In dieser Serie von Tutorials werden wir den Prozess der Entwicklung eines anpassbaren Analoguhr-Widget durcharbeiten.  Die Uhr basiert auf der Android-AnalogClock-Klasse und wird mit Ihrer eigenen Grafik angepasst.


Serienübersicht

In dieser Tutorialserie entwickeln wir ein anpassbares Android-Analoguhr-Widget mit der AnalogClock-Klasse und benutzerdefinierten Grafiken.  Im ersten Teil der Serie erstellen wir das Projekt und bereiten die Manifest-Datei und andere Ressourcen vor.  In diesem Teil arbeiten wir am Widget-Design.  Dazu werden Grafiken für das Zifferblatt und die Zeiger der Uhr erstellt und das Layout in XML implementiert.  Wir erstellen Grafiken für unterschiedliche Gerätedichten.  Im letzten Teil der Serie werden wir implementieren, indem der Benutzer aus einer Auswahl von Designs für die Uhr auswählen kann. Daher werden hier drei Designoptionen erstellt.

Dies ist Teil 2 unserer Serie zum Erstellen eines anpassbaren Android Analog Clock Widget in vier Tutorials:

Das Android AnalogClock-Widget verwendet drei Bilder: das Uhrzifferblatt, den Minutenzeiger und den Stundenzeiger.  Wir werden daher drei Designelemente für jede Version des Uhr-Widget erstellen, unter der die Benutzer auswählen können.  Wir werden auch alternative Designoptionen mit Zifferblatt-, Stunden- und Minutenzeigern erstellen.  Für dieses Projekt müssen wir unterschiedliche Bildschirmdichten für Geräte anvisieren, für die wir Bilddateien in vier verschiedenen Maßstäben erstellen werden.


Schritt 1: Erstellen Sie Bilder für die Uhr

Wir werden drei Uhrentwürfe erstellen, jeweils mit einem Zifferblatt, einem Minutenzeiger und einem Stundenzeiger.  Sie können natürlich auch Ihre eigenen Designs verwenden, aber Sie können die hier verwendeten Bilddateien verwenden, um zu beginnen.  Die Bilddateien für jedes Design in jeder Dichte sind im Download-Link für dieses Lernprogramm enthalten und werden auch im Download für Teil 4 enthalten.

An erster Stelle steht das Uhrzifferblatt.  Denken Sie daran, dass wir das Widget als zwei Zellen breit und zwei Zellen hoch angegeben haben, was zu einer maximalen Größe von 146 dB (dichteunabhängigen Pixeln) führt.  Für diese Tutorial-Serie erstellen wir vier Versionen jedes Bildes, die den vier Dichtekategorien entsprechen.

Anstatt Bilder für jede Dichte zu erstellen, können Sie alternativ auch NinePatch-Grafiken verwenden. Hierbei handelt es sich um Bitmaps, die je nach Gerätedichte nach oben und unten skaliert werden können, sodass Sie für jedes Design ein einzelnes Bild erstellen können.  Die Durchführbarkeit der Verwendung von NinePatch hängt zum Teil vom Inhalt der verwendeten Designs ab. Es gibt jedoch Tools, die Sie bei der Erstellung unterstützen, wenn Sie möchten.

Am einfachsten ist es, wenn Sie mit der mittleren Dichte beginnen, die auf beiden Achsen maximal 146px betragen sollte.  Hier ist das Standarduhrzifferblatt, das wir mit mittlerer Dichte verwenden, das Sie entweder als Referenz für Ihre eigenen Designs verwenden können oder wenn Sie erst später ein eigenes erstellen möchten:

In diesem Fall ist das Bild auf beiden Achsen 146px, Sie können es jedoch auch verkleinern.  Wir geben eine Marge für Geräte an, auf denen Android-APIs unter 14 ausgeführt werden, liefern jedoch keine Marge für Geräte ab 14, da auf den neueren API-Ebenen eine automatische Marge zwischen Widgets eingefügt wird.  Sie können so ziemlich jedes Design verwenden, das Sie mögen - Ihre Uhr muss nicht einmal rund sein.  Das Einfügen von Markierungen oder Zahlen, die die Stunden auf dem Zifferblatt angeben, ist aus Sicht der Benutzerfreundlichkeit ratsam, obwohl dies nicht unbedingt erforderlich ist.

Hier sind die beiden alternativen Uhrzifferblatt-Designs, die wir verwenden werden, eine Steinart und die andere metallisch, die hier in mittlerer Dichte angezeigt werden:

Nachdem Sie Ihre Uhrenuhren entworfen haben, können Sie für jedes Bild alternative Versionen für die unterschiedlichen Dichten erstellen.  Abhängig von Ihren Entwürfen ist dies möglicherweise nicht erforderlich, aber wir werden für jedes Motiv in diesem Tutorial maßgeschneiderte Versionen für jedes Motiv hinzufügen.  Das Folgende gibt die maximale Größe an, die wir für unser Widget auf der X- und Y-Achse bei jeder Dichte verwenden:

  • Niedrige Dichte: 110px
  • Mittlere Dichte: 146px
  • Hohe Dichte: 220px
  • Extra hohe Dichte: 292px

Wenn Sie Bilddateien für jedes zu verwendende Uhrzifferblatt-Design (und ggf. Versionen für jede Dichte) haben, kopieren Sie sie in die Zeichnungsordner des Arbeitsbereichs des Android-Widget-Projekts.  Eclipse erstellt normalerweise automatisch einen Ordner für jede Dichtekategorie. Wenn Sie jedoch nur ein Bild für alle Dichten verwenden, können Sie einen Ordner mit dem Namen "drawable" erstellen und das Bild dort platzieren.  Die Ordner für jede Dichtestufe sind:

  • Low: drawable-lpdi
  • Medium: drawable-mpdi
  • Hoch: drawable-hpdi
  • Extra hoch: Draw-xhpdi

Mit dem Android AVD Manager können Sie Ihr fertiges Widget-Projekt bei jeder dieser Dichten testen.  Nachdem Sie Ihre Bilder in den verschiedenen Zeichnungsordnern gespeichert haben, stellen Sie sicher, dass Sie in jedem Ordner dieselben Namen verwendet haben.  Zum Beispiel wird eines der von uns verwendeten Zifferblattdesigns "clock_dial_stone" genannt. Dies ist der Dateiname für das steinerne Zifferblatt in jedem Dichteordner, obwohl sich der Inhalt jeder Version nur in der Größe unterscheidet.  Wenn Sie sich immer noch nicht sicher sind, wie das funktionieren soll, laden Sie einfach die Bilddateien mit dem Download-Link oben in diesem Tutorial herunter und durchsuchen Sie die Ordner, um sich ein Bild zu machen.


Schritt 2: Erstellen Sie die Uhrzeigerbilder

Erstellen Sie anschließend ein Bild für die Stunden- und Minutenzeiger Ihres Uhr-Widget, einschließlich Bilder für jedes Design und jede Dichte, auf die Sie abzielen.  Hier sind unsere Minutenzeiger mit mittlerer Dichte für jedes Design:

Fühlen Sie sich frei, diese zu verwenden, um mit zu beginnen oder Ihre eigene zu erarbeiten.  Beachten Sie, dass diese Bilddateien transparenten Platz um die Hand enthalten.  Sie müssen jedes Ihrer Handbilder mit der vollen Höhe des Uhrzifferblatts gestalten, mit dem sie verwendet werden.  Jeder Zeiger muss sich genau in der Position befinden, in der er sich befinden würde, wenn er auf zwölf zeigt, über das Zifferblatt der Uhr gelegt wird und auf halbem Weg.  Die Hand muss sich horizontal in der Mitte der Bilddatei befinden, da sie beim Anzeigen der Zeit vom Mittelpunkt aus gedreht wird.  Die Länge der Zeiger in der Bilddatei hängt von Ihnen ab, solange die volle Höhe des Bildes der Höhe des Wählbilds entspricht.

Das folgende Diagramm zeigt den vollen Maßstab der Zeigerbilder mit dem Minutenzeiger bei zwölf und dem Stundenzeiger bei drei (der Stundenzeiger wurde um seinen zentralen Punkt um 90 Grad im Uhrzeigersinn gedreht):

Wenn Sie Ihre Minutenzeiger-Designs sortiert haben, speichern Sie erneut einen Wert für jede Dichte, und skalieren Sie sie nach oben und unten, um die jeweilige Zifferblatthöhe einzustellen.  Kopieren Sie sie erneut in Ihre gezeichneten Ordner. Verwenden Sie für jedes Design denselben Namen in den Dichteordnern wie bei den Wählbildern.

Führen Sie anschließend den gleichen Vorgang für Ihre Stundenzeiger aus.  Hier sind die Stundenzeiger für die drei Designs, die wir verwenden:

Das Prinzip ist das gleiche wie für die Minutenzeiger, nur dass die Stundenzeiger normalerweise kürzer sein sollten.  Entwerfen Sie Ihre Stundenzeiger auf 12 Uhr und bereiten Sie Versionen für jede Dichte vor. Kopieren Sie sie in Ihre gezeichneten Ordner wie in den Minutenzeiger.


Schritt 3: Definieren Sie Widget-Ränder

Das Widget-Design wird einige Daten verwenden, die wir in unsere Projektwerte-Ordner aufnehmen werden.  Ab Android API 14 schließt das System automatisch Ränder zwischen Widgets ein, die auf dem Startbildschirm des Benutzers angezeigt werden.  Bei früheren API-Versionen war dies jedoch nicht der Fall.  Aus diesem Grund möchten wir eine Marge angeben, die rund um die Uhr auf Geräten mit Android-Leveln unter 14 enthalten sein soll.  In diesem Fall können wir die Tatsache ausnutzen, dass wir Werteordner haben, die auf diese beiden Kategorien von Benutzer-API-Levels abzielen.

Wir definieren die Ränder in unserer XML-Layoutdatei anhand einer Dimensionsressource.  Erstellen Sie im Verzeichnis "values" eine neue Datei mit dem Namen "dimensions.xml".  Wählen Sie in Eclipse den Ordner "values" aus und klicken Sie mit der rechten Maustaste oder wählen Sie "Datei", dann "Neu", "Datei" und geben Sie den Dateinamen ein.

Wenn Sie auf die Schaltfläche "Fertig stellen" klicken, erstellt und öffnet Eclipse die Datei.  Wählen Sie die Registerkarte "dimensions.xml",  um den Code zu bearbeiten.  Gebe folgendes ein:

Dieser Code listet einfach einen Dimensionswert unter Verwendung von dichteunabhängigen Pixeln zusammen mit einem Namen auf, sodass wir an anderer Stelle darauf verweisen können.

Speicher die Datei.  Kopieren Sie es jetzt, indem Sie im Ordner "values" mit der rechten Maustaste darauf klicken oder "Edit" auswählen und dann "Copy" wählen.  Fügen Sie es in den Ordner "values-v14" ein, den wir beim letzten Mal erstellt haben. Klicken Sie mit der rechten Maustaste, wählen Sie den Ordner aus, wählen Sie "Bearbeiten" und anschließend "Einfügen".  Die Datei wird im Ordner "values-v14" angezeigt, der sich auf API-Ebenen ab 14 bezieht.  Öffnen Sie diese neue Kopie der Datei und bearbeiten Sie den Dimensionswert wie folgt, um einen Rand von Null anzugeben:

Wenn nun das XML-Layout mit seinem Namen auf diesen Dimensionswert verweist, wird auf Geräten, auf denen API 14 plus ausgeführt wird, der Wert Null verwendet, ansonsten wird ein Wert von 8 dB verwendet.


Schritt 4: Implementieren Sie das Widget-Layout

Nun definieren wir unser Widget in XML.  Denken Sie daran, dass wir in der XML-Datei ein anfängliches Layout für das Widget angegeben haben, in dem wir seine grundlegenden Eigenschaften definiert haben.  Das Layout, auf das wir uns bezogen haben, war "clock_widget_layout", also erstellen Sie diese Datei jetzt.  Klicken Sie mit der rechten Maustaste oder wählen Sie Ihren "Layout" -Ordner aus und wählen Sie "Datei" und dann "Neu" "Datei".  Geben Sie als Dateinamen "clock_widget_layout.xml" ein und klicken Sie auf "Fertig stellen".

Wählen Sie die Registerkarte "clock_widget_layout.xml" aus, wenn Eclipse die Datei öffnet, damit Sie die XML-Datei bearbeiten können.  Wir verwenden ein relatives Layout für unser Widget. Wenn Sie ein anderes Design verwenden möchten, können Sie alternativ entweder ein lineares oder ein Frame-Layout verwenden, da dies die einzigen sind, die von Widgets unterstützt werden.  Fügen Sie Ihrer XML-Layoutdatei die folgende Gliederung hinzu, um das relative Layout zu verwenden:

Hier geben wir eine ID für das Widget an, mit der wir Klicks darauf in unserem Java-Code in Teil 4 implementieren. Beachten Sie, dass sich der Code auch auf den von uns erstellten Dimensionswert bezieht, wobei die Standardsyntax verwendet wird - der Name der "Dimensions" Die .xml Datei spielt eigentlich keine Rolle, Sie müssen nur ein "dimen" -Element in einer Wertedatei auflisten, um auf diese Weise darauf zu verweisen.

Fügen Sie im relativen Layout Ihr AnalogClock-Widget wie folgt hinzu:

Dies ist das Standardelement für Android Analog Clock, mit dem wir die Anzeige anpassen können.  Wir verwenden ein ID-Attribut, damit wir in Java auf das Widget verweisen können.  Die letzten drei Attribute geben an, welche Ressourcen für die Zeiger für Zifferblatt, Minuten und Stunden erstellt wurden. Wenn Sie Ihre Datei mit anderen Dateinamen gespeichert haben, ändern Sie diesen Code, um sie anzuzeigen.  Android wählt die zu zeichnende Datei auf jedem Benutzergerät aus dem entsprechenden Dichteordner aus.

Da wir Benutzern die Auswahl eines Designs gestatten, werden alle drei Designs tatsächlich in unser XML aufgenommen, wobei alle außer einem als anfänglich unsichtbar festgelegt werden.  Vergewissern Sie sich, dass das erste Design, das Sie einschließen, standardmäßig dasjenige ist, das Sie anzeigen möchten, und fügen Sie die anderen wie folgt hinzu:

Ändern Sie erneut die Zeichennamen, um die Namen der Zifferblätter sowie die Minuten- und Stundenzeigerbilder für jedes Ihrer Entwürfe anzuzeigen.  Sie können mehr als drei Designs hinzufügen, wenn Sie möchten. Stellen Sie sicher, dass bei allen außer einem von ihnen die Sichtbarkeit auf unsichtbar gesetzt ist, sodass zunächst nur ein Design (die Standardoption) angezeigt wird.  Wir können die Benutzerwahl zwischen diesen Designs in Java implementieren, indem die Attribute der Analog Clock-Element-ID verwendet werden, die alle mit Ganzzahlen enden, die bei Null beginnen und bei jedem Design inkrementieren.  Speichern Sie Ihre Layoutdatei.

Nachfolgend finden Sie einige Bildschirmgraphen, wie jedes unserer Designs aussehen wird, wenn das Widget fertig ist:


Nächstes Mal

Das ist der Design-Prozess für unser Uhr-Widget.  Wenn Sie zu diesem Zeitpunkt keine eigenen Design-Images erstellen möchten, verwenden Sie zunächst die Images im Download-Ordner.  Im nächsten Tutorial verwenden wir die AppWidgetProvider-Klasse, um unser Widget in Java zu implementieren.  Im letzten Teil der Serie werden wir Benutzer-Klicks auf das Widget implementieren, die eine Auswahl zwischen den Entwürfen und die Aktualisierung der Benutzereinstellungen bieten, um die gewählte Option kontinuierlich anzuzeigen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.