App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Der Attributinspektor

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Attribute Inspector ist der Teil des Utility Area in Xcode, in der Sie die Attribute des aktuell ausgewählten UI-Objekts ändern können. Dieses Video erklärt, wie man auf den Attribute Inspector zugreift, wie man die Eigenschaften ändert und wie der Attribute Inspector organisiert ist.

Transkript

Wir kümmern uns jetzt ein wenig um die Arbeit im Storyboard im Allgemeinen und im Besonderen um die Arbeit mit dem Attributsinspektor. Ich habe hier ein einfaches Projekt, das ist nichts weiter als Single View App. Unter dem Namen "Basis UI", sie ist leer. Es gibt also noch keine Komponenten drin. Aber hier möchte ich einige Komponenten hinzufügen und mir dann die Attribute von diesen Komponenten ansehen, wie sie in diesem Inspektor auftauchen, wie man sie ändern kann, was für Informationen man da herausziehen kann. Lassen Sie uns zuerst die Document Outline wegblenden, damit ich etwas mehr Platz habe. Und zudem werde ich hier ein bisschen zoomen, damit mein Bereich für die View etwas größer erscheint. Fügen wir ein paar Komponenten hinzu, beispielsweise einen Button, das heißt, ich suche hier nach einem Button und ziehe ihn einfach hinein auf die View. Dann könnten wir nochmal nach einer Switch suchen. Es ist so ein Umschalter, um etwas an- oder auszustellen. Und nehmen wir noch einen Slider, einfach so zum Spaß. Das ist ein Schieberegler. Beginnen wir nun mit dem Button, das heißt, ich selektiere ihn und schalte auf den "Attribute Inspector", den Attributsinspektor, um. Daran sieht man ja bekanntlich alle relevanten Eigenschaften, alle offen gelegenen Eigenschaften einer Komponente, die man selektiert hat. Nun sind diese Informationen, die Sie hier erhalten, auf eine ganz interessante Art und Weise organisiert. Sie haben erstmal hier oben den Button. Wenn Sie etwas weiter nach unten scrollen, dann haben Sie hier plötzlich eine Klasse "Control". Das ist eine Superklasse von Button. Und wenn Sie noch weiter nach unten scrollen, haben Sie die View, was die Superklasse aller visuell darstellbaren Komponenten in der Oberfläche ist. Das heißt also, oben werden die ganz spezifischen Eigenschaften angezeigt, und weiter unten immer allgemeinere Eigenschaften. Ganz oben sehen Sie hier den Typ von dem Button. Es ist ein Systembutton mit einem Default-Text und Sie können hier die Art des Buttons ändern. Sie sehen die Veränderungen, wenn Sie hier ein bisschen rumspielen. Sie sehen, hier gibt es eine Veränderung, das ist so ein Informationsbutton für Details. Hier können Sie Kontakt hinzufügen, dann steht so ein Plus. Oder so ein Info-Zeichen, verschiedenfarbig oder auch anpassen. Sie sehen die Veränderung unmittelbar, wobei es kann durchaus sein, dass die Oberfläche jetzt sich erstmal nicht wieder aktualisiert, wenn Sie zurückgehen auf "System". Besonders interessant ist der angepasste Button, da kann man hier nämlich irgendwelche Bilder für den Button verwenden, für die Schaltfläche, die Sie vorher aber importiert haben müssen. Wenn Sie die importiert haben, dann werden die hier angezeigt. Derzeit ist in diesem Projekt noch kein Bild verfügbar. Es genügt erstmal zu wissen, dass es grundsätzlich möglich ist. Doch zurück zu dem Problem, dass wir jetzt plötzlich beim System-Button keinen Text mehr haben, das liegt daran, dass der Default-Title hier plötzlich leer ist, das geht verloren. Es ist eine Eigenheit von Xcode, ich würde es fast sogar als ein Bug sehen. Aber, wahrscheinlich "it's not a bug, it's a feature". Es ist nun mal so, man muss halt hier wieder etwas hinschreiben, beispielsweise "Button". Gegebenenfalls, wenn ich bestätige, wird der Text nicht hineinpassen, weil der Button zwischenzeitlich verkleinert wurde. Also muss man gegebenenfalls hier wieder den Button, die Komponente, etwas vergrößern. Sie sehen des weiteren hier alle Eigenschaften, die Sie modifizieren können von dem Button, beispielsweise die Schriftart, die Schriftfarbe, ob Schatteneffekte auftauchen und so weiter, und so weiter. Was wir ausschließlich hier noch anpassen wollen, ist der Status, der Default-Status. Sie können beispielsweise jetzt festlegen, wie der Button aussieht, wenn er "disabled" ist, also nicht aktivierbar. Also, Sie können hier dann individuell alles anpassen, was gerade für diesen Zustand spezifisch sein soll. Gehen wir jetzt zum Default-Status zurück und merken Sie sich, dass Sie, wenn Sie hier einen anderen Status auswählen, Änderungen nur für diesen spezifischen Status vornehmen. Für den Default-Status hätten Sie damit keine Änderungen. Die ganzen Änderungen hier sind zwar immens wichtig, aber im Prinzip trivial, also Anpassen der Schriftart, dass man hier zum Beispiel die Schriftgröße verändert oder auch die "Font Family", dass man so eine Auswahlliste hat. Das kennt man dann, wenn das läuft von Textverarbeitungssystemen et cetera. Das ist alles trivial. Wenn Sie etwas weiter nach unten scrollen, dann sehen Sie hier auch noch Anpassung der Ausrichtung und wie sich beispielsweise auch eine Komponente bezüglich der Auffüllung von Content verhält, beispielsweise Bilder, die auf eine Gesamtgröße einer Komponente ausgedehnt werden, also gestreckt oder ob sie sich wiederholen, oder ob sie nur als ein Content auftauchen und so weiter, und so weiter. Es ist sehr zu empfehlen, das mal für verschiedene Komponenten auszuprobieren, wie sich das ganz konkret hier auswirkt. Hier ist beispielsweise dieses Stretching zu finden. Nun haben wir noch ein paar weitere Komponenten hier. Und es ist ganz interessant zu sehen, was sich unterscheidet. Natürlich werden diese verschiedenen Komponenten nur die Eigenschaften anzeigen, die sinnvoll sind. Ein Slider hat in dem Sinne keinen Text, sondern er zeigt einen Wert an. Sie sehen hier, dass ein Default-Wert vorgegeben wird, also zwischen 0 und 1. Und bei 0,5 steht man in der Mitte. Minimum und Maximum geben den Minimum- und Maximum-Wert an, das ist trivial. Offensichtlich, denke ich. Und bei einem solchen Switch gibt es einen Value "On" und "Off". Das heißt, ob das Objekt einen angeschalteten Zustand darstellt, oder einen ausgeschalteten Zustand. Das kann man sehr leicht nachvollziehen, auch inwieweit dann die Farben, das verdeutlichen, nicht nur die Position von diesem Kreis, das kann man hier alles vorgeben. Es gibt hier wieder eine ganze Reihe an Einstellungsmöglichkeiten und ich empfehle, damit rumzuexperimentieren. Das macht eine Menge Spaß. Aber ich brauche das nicht in Detail zu erklären, denke ich. Sie probieren einfach für jede Komponente aus, was geht denn, wenn man beispielsweise hier diesen Minimum-Wert da ändert. Man sieht, was dann passiert und man kann das Ding auch, was weiß ich, ein bisschen vergrößern, verkleinern. Die Position von diesem Kreis in der Mitte, die bleibt erhalten, relativ zu dem Minimum, Maximum. Alles extrem viel Spielerei. Nichtsdestotrotz, Sie sollten es wissen und es ist natürlich ganz wichtig für die Erstellung von Oberflächen. Zusammenfassend kann man sagen, dass man über den Attributsinspektor die Eigenschaften jeder Komponente zur Verfügung gestellt bekommt, sie anpassen kann und die Eigenschaften, so wie sie hier angezeigt werden, in einer Hierarchie dargestellt werden, sehr speziell und nach unten hin immer allgemeiner.

App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Entwickeln Sie das User Interface Design einer iOS-App.

1 Std. 19 min (16 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:29.05.2017

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!