Buch o.ä. zum Thema UI Entwicklung bzw. Gestaltung

Im Fall Android würde ich mal auf der entsprechenden Site schauen, ob es eine Art Leitfaden für die Gui-Oberfläche gibt. Oder auch eine Art Rumpfprogramm. Das man weiss wie eine App aussehen soll, Untermenüs usw.

Mit was entwickelst du ? Evtl. gibt es auch einen Gui-Editor dafür, bei dem man grafisch die Oberfläche gestalten kann, ohne auf Quellcode-Ebene sich mit Pixel-Angaben rumärgern zu müssen.

hehe, wer dafür was anständiges und brauchbares entwickelt, würde sicher viel geld von mir bekommen ;)

da gibt es wohl genau nichts, was man auch nur annähernd für ernsthafte apps verwenden könnte

OK, die Wette gilt

Eclipse samt SDK habe ich auch drauf, aber bis auf etwas rumspielen und Code ansehen, ist noch nicht viel passiert. Droiddraw habe ich mir angesehen, sage jetzt aber besser nichts darüber ...

Na mal sehen, ich hab schon das unmöglichste gefunden

Das MotoDev hat auch noch nen Designer. ;-)

Das Android-eigene UI (wenn man das so nennen kann) ist eh hässlich.
Selberbauen is da immer besser wenn man wirklich was burnen will.

kann der irgendwas brauchbares?

Schau mir das gerade an. Bin dabei die ganzen SDKs zu laden. Sieht aus wie eine angepasste Version von Eclipse. Aber der Installationsvorgang läuft noch.

— geändert am 05.02.2010, 20:41:48

aha ok - hab mir das zu installieren erspart. eine ide reicht mir, aber wenn die irgendwas besser kann, dann kannst es uns ja wissen lassen ;)

Ich schau es mir mal an. Wird ja unter einem eigenen Verzeichnis installiert, kommt also nicht mit meiner Eclipse-Installation in Gehege.

Hallo Sandra,

das Thema GUI Design ist bei Android nicht so gut dokumentiert und auch leider in den Büchern nur kurz behandelt. Du wirst dich wohl viel mit der API-Doku beschäftigen müssen, denn dort sind eine Menge Infos versteckt. Um das Ganze dann in ein hübsches Design zu bringen, heißt es probieren, probieren, probieren …

Ich habe mir mal die Mühe gemacht und die meisten Attribute für die gängigsten Layout Klassen in eine FreeMind Datei als Übersicht zusammengefasst, mit direkter Verlinkung zur API-Doku.
Sie ist noch nicht vollständig, aber die wichtigsten Attribute sind enthalten. Wer sie haben will, einfach eine Mail an mich senden.



An Design Werkzeugen habe ich leider auch noch nichts brauchbares gefunden. DroidDraw ist wirklich nur für den Anfang gebrauchbar. Sonst kenne ich kein externes Tool. Bleibt also nur der SDK Eigene DesignViewer. Leider ist der auch etwas buggy, aber immer noch besser als gar nichts.
Das Design selber muss per XML Code definiert werden einen GUI-Designer im eigentlichem Sinne mit drag & drop gibt es im SDK nicht.

Gute Erfahrungen beim lernen habe ich mit dem Hierarchy Viewer gemacht. Dieser hat mir sehr geholfen die Zusammenhänge beim GUI Design zu verstehen.

Empfehlen kann ich dir folgende Grundstruktur für Deine GUI:

Verwende als Root Element ein RelativeLayout.
Darin entweder Blöcke mit LiniarLayout positionieren oder direkt die entsprechenden Views. (Label-, Image, Button-, TextView).
Vermeide eine zu tiefe Verschachtelung der LayoutViews. Max 3, besser nur 2 Ebenen.
Soweit möglich mit fill_parent / warp_content arbeiten.
Wenn du Größenangaben machst am besten dip (density independent pixel) verwenden. Das hat den Vorteil, dass dein Layout evtl. ohne Anpassungen auch auf größeren Displays funktioniert.

Hier mal ein Screenshot meiner App mit der oben beschriebenen Grundstruktur. Durch das RelativLayout ist es auch einfach mit nur wenigen Veränderungen, verschiedene Layouts für Hoch- und Querformat zuerstellen.

@Mikro
Wow, nicht schlecht.

Aber warum ich schreibe, ich habe jetzt Motodev komplett installiert und gestartet. Ich muss sagen, da bin ich schwer beeindruckt was Motorola da geschnitzt hat. Da hätte sich Google eine Scheibe abschneiden können. Eine geschlossene eigenständige Installation, die alles nachlädt und installiert was man braucht. Also kein rumgefummle mehr. Und alles auf Eclipse-Basis. Zusätzlich gleich noch einen RSS-Feed integriert, SVN, CVS und anderes. Bin noch am erkunden was das alles integriert hat und kann.

Für alle Androidentwickler auf jeden Fall ein Blick wert.

Meist ist es einfacher als man denkt:
Der grüne Fuß ist als Hintergrund des RelativeLayouts zugewiesen.


Die grüne Fläche ist eine Hintergrundgrafik mit Alpha-Transparenz, die ich für alle Flächen wiederverwenden.
Diese wird direkt dem LiniarLayout zugewiesen. Damit die Grafik gut skaliert ist sie in ein NinePatchDrawable umgewandelt. Also von *.png zu *.9.png
Dazu zuerst eine kleine Grafik z.B. mit Gimp erstellen und dann einfach das png mit dem draw9patch tool (unter tools im SDK zufinden) bearbeiten und als 9.png speichern.

Die original Grafik für die grünen Flächen sieht so aus:



Sie ist relativ klein damit nicht viel Speicher verbraucht wird. Android skaliert dann die Grafik anhand der NinePatch Info entsprechen der benötigten Größe.


Die TextViews innerhalb des LinearLayouts haben keine weitere Formatierung außer Schriftgröße und Farbe.

Datenbank - immer gerne