Workshops App-Entwicklung
Workshops App-Entwicklung

Zeichnen-App – Schritt 5 (Überarbeitete Version)

Dicker oder dünner?


Ziel 5

Über einen Schieberegler lässt sich die Breite des Stifts einstellen


1.) In der Design-Ansicht

Benötigt werden:

1.

Links im Bereich Benutzerschnittstelle findet ihr die Elemente, die ihr braucht.

  • Fügt ein Element des Typs Schieberegler  hinzu.

  • Fügt ein Element des Typs Bezeichnung, um den Schieberegler zu erklären hinzu.

Benutzerschnittstelle.png

2.

Vergebt einen sinnvollen Text für die Bezeichnung und sinnvolle Namen für die Elemente.

image2022-3-7_9-54-41.png





2.) In der Blöcke-Ansicht (Programmierung)

Funktion Linienbreite anpassen

Auslöser: Schieberegler-Position wird geändert

Zu verändernde Elemente: Zeichenfläche → LinienBreite

Berechnung: DaumenPosition von Schieberegler


Programmiert mit den Elementen:

1.

Erstellt ein PositionGeaendert-Event für den Schieberegler.

image2022-3-7_10-1-50.png Bildschirmfoto 2022-03-07 um 10.02.22.png

2.

Erstellt einen setze-Block  für die Linienbreite der Zeichenfläche. Wenn sich die Position des Schiebereglers ändert, soll die Linienbreite der Zeichenfläche neu gesetzt werden

image2022-3-7_10-9-42.png Bildschirmfoto 2022-03-07 um 10.10.04.png

3.

Die Linienbreite entspricht dabei der DaumenPosition auf dem Schieberegler: Ist der Regler weit nach rechts geschoben, wird der Wert größer. Bleibt er eher links, ist der Wert kleiner. 

image2022-3-7_10-8-3.png

4.

Für die ZeichneKreis-Funktion könnt ihr den Radius nun ebenfalls von der Schieberegler-DaumenPosition abhängig machen. 

Damit die Linie gleich breit ist, müsst ihr den Durchmesser durch Zwei teilen, um den Radius zu berechnen. 

image2022-3-7_10-12-22.png

5.

So könnte das dann aussehen.

zeichnen5_bloecke.png



3.) Testen

1.

Klickt im App Inventor oben auf Verbinden und wählt Al Companion.

Bildschirmfoto 2022-03-02 um 14.45.29.png

2.

Öffnet die App Al Companion auf eurem Test-Smartphone und wählt scan QR code. 

Vergesst nicht den Haken bei Use Legacy Connection  zu setzen.

Bildschirmfoto 2022-03-02 um 14.46.55.png

3.

Scannt den QR-Code auf dem Computerbildschirm - die App wird geladen.

Bildschirmfoto 2022-03-02 um 14.48.35.png


Testet die App nun ausführlich!

  1. Verändert der Schieberegler die Linienbreite?

  2. Verändert sich der Radius des Kreises, wenn ihr nur auf die Zeichenfläche tippt?

  3. Entspricht die Linienbreite der Breite des Kreises? Warum (nicht)? Wie könnt ihr dies ggf. beheben?

  4. Wie stark lässt sich die Linienbreite durch den Schieberegler verändern? Ist das zu viel zu wenig? Tipp: Den minimalen und maximalen Wert, den der Schieberegler einnehmen kann, könnt ihr in den Eigenschaften des Schiebereglers festlegen. 

Funktioniert alles? Herzlichen Glückwunsch! Weiter geht es auf der nächsten Seite!


<< Zeichnen-App - Schritt 4

Zeichnen-App – Schritt 6 >>