Styling
In dieser Lektion lernst du anhand der Image Recognition App die Grundlagen des Stylings von Komponenten mit den Properties des Design-Oberfläche.
Du lädst ein Hintergrundbild für deine App hoch, lernst die Preview-Funktion kennen und fügst alle Komponenten hinzu, die du in deiner App benötigst.
Die drei sichtbaren Komponenten Image, Label und Button stylest du anschließend über die Properties.
In dieser Lektion lernst du…
- … wie du Komponenten mit den Properties stylest.
- … wie du ein Hintergrundbild hochladen kannst.
- … den Unterschied zwischen Margin & Padding und absoluter & relativer Größe kennen.
- … wie du sichtbare und unsichtbare Komponenten zu deiner App hinzufügst.
Tipps:
- Pausiere das Video immer wieder und sieh dir Passagen, die dir zu schnell waren, nochmal an.
- Wechsle immer wieder zwischen dem Tab, in dem du dir das Video ansiehst, und dem Tab, in dem du Thunkable geöffnet hast und baue das Layout Schritt für Schritt nach.
- Probiere auch eigene Designs aus. Du kannst auch andere Farben, Schriftgrößen etc. verwenden!
- Wenn etwas in der Screen-Vorschau nicht richtig aussieht, sieh es dir auch mit der Funktion “Preview” an (mit “Edit” kommst du zurück zur Screen-Vorschau).
[publitio file="youthhackathon/appdesign/ir_app_design"]
Das kannst du / weißt du nach dieser Lektion:
- Du weißt, wie du ein Hintergrundbild hochlädst.
- Du weißt, dass du bei Bildern auf das Copyright achten musst.
- Du kannst sichtbare und unsichtbare Komponenten zu deiner App hinzufügen.
- Du kannst Komponenten mit Farben, Höhe, Breite etc. stylen.
- Du kannst mit Margin & Padding die richtigen Abstände setzen.