Layout en Componenten

Nieuw Project

Maak een nieuw project aan en noem het PaintPot. De nieuwe app PaintPot wordt opgestart in de Designer Modus. Verander in ‘Properties’ de ‘title’ van Screen1 in PaintPot. Properties is rechts te vinden. Klik in ‘Media’ op ‘Upload File’ en upload png. Dit is hetzelfde plaatje van de App ‘HelloPurr’.

Eerste rij: teken knoppen

Eerst voegen we de eerste rij toe: de kleur knoppen:

1. Sleep een Button uit ‘Palette’ de ‘Viewer’ in .
2. Verander de naam van ‘Button1’ in RedButton (rename).
3. Verander in ‘Properties’ de ‘Text’ van ‘Tekst for button 1’ in Rood
4. Sleep nog een Button uit ‘Palette’ de ‘Viewer’ in .
5. Verander de naam van ‘Button1’ in BlueButton en de ‘Tekst’ in  Blauw.
6. Sleep een derde Button uit ‘Palette’ de ‘Viewer’ in .
7. Verander de naam van ‘Button1’ in GreenButton en de ‘Tekst’ in Groen.
8. Verander nu bij alle drie de knoppen de ‘BackgroundCollor’ in de kleuren rood (Red), blauw (Blue) en groen (Green). Hiervoor moet je de knoppen in ‘Components’ selecteren, vervolgens kun je in ‘Properties’ dit aanpassen.

Nu gaan we de knoppen naast elkaar plaatsen. Hiervoor gebruiken we een ‘HorizontalArrangement’. Tip: Kijk tussendoor op je mobiel om te zien hoe het er daar uit ziet.

1. Kies bij ‘Palette’ voor de categorie ‘Layout’
2. Sleep een ‘HorizontalArrangement’ de viewer in onder de knoppen.
3. Sleep de knoppen Rood, Blauw en Groen het vierkant van ‘HorizontalArrangement’ in. De eerste gaat makkelijk, de tweede en de derde knop moet je er gewoon bovenop slepen.
4. Schik de knoppen in de volgorde; Rood, Blauw, Groen.
5. Selecteer ‘HorizontalArrangement1’ en verander ‘AlignHorizontal’ in Center:3
6. Stel de ‘Width’ in op Fill parent

Tweede rij: teken canvas

Nu gaan we het teken canvas plaatsen, we zetten er nog even geen plaatje in.

1. Kies bij ‘Palette’ voor de categorie ‘Drawing and Animation’
2. Sleep een ‘Canvas’ in de viewer, onder de knoppen.
3. Verander de naam van ‘Canvas1’ in DrawingCanvas
4. Verander in ‘Poperties’ ‘PaintColor’ in de kleur ‘Rood’

Derde rij: tool knoppen

Nu plaatsen we de tweede rij knoppen in de viewer onder het canvas.

1. Sleep Button in viewer, hernoem naar TakePictureButton en verander ‘Tekst’ in knop naar Neem Foto.
2. Sleep Button in viewer, hernoem naar WipeButton en verander ‘Tekst’ in knop naar
3. Sleep Button in viewer, hernoem naar BigButton en verander ‘Tekst’ in knop naar
4. Sleep Button in viewer, hernoem naar SmallButton en verander ‘Tekst’ in knop naar

We gaan deze vier knoppen naast elkaar zetten in een ‘HorizontalArrangement’

1. Sleep een ‘HorizontalArrangement’ (Palette, Layout) de viewer in onder de vier knoppen.
2. Stel in dit ‘HorizontalArrangement’ de ‘Width’ in op Fill parent
3. Sleep hierin de knoppen ‘Neem foto’, ‘wis’, ‘groot’ en ‘klein’.
4. Selecteer in ‘Components’ ‘DrawingCanvas’
5. Nu kan je van ‘DrawingCanvas’ de ‘BackgroundImage’ instellen op png
6. Kijk op je mobiel om te zien hoe de knoppen eruit zien.
7. Speel met de properties ‘Height’ en ‘Width’ van de knoppen en de ‘HorizontalArrangement’ om de verdeling te optimaliseren. Kijk hiervoor voortdurend op je mobiel.

Camera Component

Ben je tevreden met het uiterlijk van de App? Dan moeten we nog één ding toevoegen aan de viewer. Stel ‘Palette’ in op ‘Media’ en sleep ‘Camera’ de viewer in. Dan kan je nu gaan programmeren. We controleren vooraf de lijst ‘Components’: