~~NOTOC~~ [[app:app_lektion001|=> Lektion 1: Softwareumgebung]] ====== Lektion 1.1: Designer ====== Wenn du den AppInventor startest, landest du zunächst im Projektordner, in dem zu natürlich noch keine Projekte angelegt hast. Das wird die nächste Aufgabe sein. {{ :work.png|}} ==== Aufgabe 2 ==== Verfahre wie auf den Bildern gezeigt. Starte ein neues Projekt und gib ihm den Namen ''smile''. {{:app:start_project.png?700|}} {{:app:name_project.png?300|}} Die Ansicht wechselt automatisch in den **Design-Monitor**. {{:app:ansicht_designer.png?600|}} ===== Layout ===== Per "Drag & Drop" wird das Layout erstellt. Als erstes benötigen wir ein Bild. Füge es wie angezeigt hinzu. {{:app:image_hinzufuegen.png?600|}} {{:app:rename_image.png?150 |}} Es erscheint die Komponente "Image1" unter **Components** welches wir zunächst umbenennen in **ImageOhneZunge**. Anschließend laden wir unter **Properties** die entsprechende Bilddatei hoch. {{ :app:image_upload2.png?300|}} {{ :app:image_upload1.png?200|}} ===== Einstellungen der Components ===== Im Nachhinein können dann noch Sichtbarkeit und die Größe des Bildes eingestellt werden. Bei anderen Komponenten wie ''Buttons'' oder ''Textboxen'' uvm. gibt es natürlich unterschiedliche Einstellungsmöglichkeiten, welche ebenfalls auf der rechten Seite vorgenommen werden. {{:app:image_settings.png?600|}} ---- {{ :work.png|}} ==== Aufgabe 3 ==== {{ :app:layout1.png?250|}} Erstelle das Layout der APP so, dass es wie auf dem Bild aussieht. Nutze dafür die folgenden Komponenten. ^ Komponente ^ Name ^ Eigenschaften ^ | Image | ImageOhneZunge | Sichtbar: "True"\\ Bild: {{:app:smilie_ohne_zunge.png?linkonly|smile_ohne_zunge.png}} | | Image | ImageMitZunge | Sichtbar: "False"\\ Bild: {{:app:smilie_zunge.png?linkonly|smile_zunge.png}} | | Button | ButtonMitZunge | Text: "Mit Zunge" | | Button | ButtonOhneZunge | Text: "Ohne Zunge" | ---- [[app:app_lektion001_02|=> Lektion 1.2: Block-Programmierung]]\\ [[app:start|=> Übersicht: Android APPs programmieren]]