Les 5: Lay-out elementen

Python intro
Programming basics-II
Les 3 / Week 7a
Lay-out-elementen
Keuzedeel: Mobile Application Development
Les 5
1 / 32
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 32 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

Python intro
Programming basics-II
Les 3 / Week 7a
Lay-out-elementen
Keuzedeel: Mobile Application Development
Les 5

Slide 1 - Diapositive

Deze les
  • Korte Herhaling
  • Tweede Activity toevoegen aan project
  • Responsive lay-out met ConstraintLayout
  • Met een Button een tweede Activity openen
  • Intents
  • Gegevens uit een EditText ophalen
  • Zelf uitzoeken: Een afbeelding element tonen

Slide 2 - Diapositive

Wat is hier omlijnd?
A
Value
B
Attribuut
C
Key
D
Element

Slide 3 - Quiz

Wat is hier omlijnd?
A
Value
B
Attribuut
C
Key
D
Element value

Slide 4 - Quiz

Wat is hier omlijnd? (twee juiste antwoorden)
A
Tag
B
Self-closing Tag
C
Opening Tag
D
Element

Slide 5 - Quiz

Herhaling: Project aanmaken
We starten een nieuw project altijd met een ‘Empty Views Activity’, dat geeft ons 1 activiteit genaamd ‘MainActivity’ met een bijbehorende layout ‘activity_main.xml’




(Let op dat het lesboek licht verouderd is en het verkeerd aangeeft)

Slide 6 - Diapositive

Herhaling: Project aanmaken
💻 Doe mee: Open Android Studio en maak een nieuw project met een naam als 'DitBenIkApp'
Let op: wanneer je dit blok ziet, 
dan ga je code schrijven

Slide 7 - Diapositive

Herhaling: Lay-outs resource (.xml)

Slide 8 - Diapositive

Herhaling: Lay-outs resource (.xml)

Slide 9 - Diapositive

Herhaling: Lay-outs resource (.xml)
TextViews voor het tonen van tekst, EditTexts voor een tekstveld waar iets ingevoerd kan worden, Buttons, CheckBoxes, CalenderViews en nog veel meer:

Slide 10 - Diapositive

Herhaling: Lay-out code-behind (.kt)
Zo weet de MainActivity welke xml geladen moet worden:

Slide 11 - Diapositive

Tweede Activity toevoegen aan project

Slide 12 - Diapositive

Tweede Activity een geschikte naam geven
Activity Klassenaam: UpperCamelCase, eindigend op ‘Activity’, bijv.: ContactActivity
Layout naam: lower_snake_case, beginnend met ‘activity_’, bijv.: activity_contact

Slide 13 - Diapositive

Tweede Activity een geschikte naam geven
💻 Doe mee:
  • Maak een tweede 'Empty Views Activity'
  • Geef die de naam ContactActivity

Slide 14 - Diapositive

Responsive lay-out met ConstraintLayout
  • Geen vaste margins, noch paddings
  • androidx.constraintlayout.widget.ConstraintLayout

Slide 15 - Diapositive

Responsive lay-out met ConstraintLayout
Zorg dat de bovenkant van dit element ‘vastzit’ aan de bovenkant van dit andere element
Zorg dat de linkerkant van dit element vastzit aan de linkerkant van dit andere element
We maken duidelijk welk element we bedoelen via de id van dat element.
‘parent’ is het bovenliggende element (kan ook de activity zelf zijn)

Slide 16 - Diapositive

Responsive lay-out met ConstraintLayout
Als we zowel app:layout_constraintTop_toTopOf=”parent” als app:layout_constraintBottom_toBottomOf=”parent” hebben dan wordt ons element verticaal in het midden geplaatst

Slide 17 - Diapositive

Responsive lay-out met ConstraintLayout

Slide 18 - Diapositive

Responsive lay-out met ConstraintLayout
💻 Doe mee:
  • Maak een EditText met het id 'nameEditText'
  • Maak een knop onderaan het scherm met het id 'nextButton' en de tekst: 'Ga naar de contactpagina'
  • Zorg dat de EditText gecentreerd is in het scherm
  • Zorg dat de nextButton horizontaal gecentreerd is
  • Zorg dat de nextButton verticaal onderaan het scherm staat
Let op! Niet alle code die we tonen komt overeen met de opdracht. Je moet ook zelf nadenken 😉

Slide 19 - Diapositive

Met een Button een tweede Activity openen
'packageContext' is een hint van de editor, geen code om te schrijven.

Slide 20 - Diapositive

Met een Button een tweede Activity openen

Slide 21 - Diapositive

Met een Button die een tweede Activity openen

Slide 22 - Diapositive

Met een Button een tweede Activity openen
De naam die je als id geeft wordt automatisch toegevoegd aan de ‘R.id.registry.

We kunnen hierna in Kotlin in de MainActivity.kt dat element vinden met de ‘findViewById’-methode en er een 'click event listener' aan koppelen (of attributen bewerken)

Slide 23 - Diapositive

Met een Button een tweede Activity openen
💻 Doe mee:
  • Koppel een setOnClickListener aan de knop met id 'nextButton'.
  • Laat die knop de ContactActivity openen

Slide 24 - Diapositive

Gegevens aan een Activity meegeven
💻 Doe mee:
  • Zorg dat de naam 'Janiek' wordt meegegeven via putExtra
  • Gebruik als key 'Name'
key / value

Slide 25 - Diapositive

Intents
Intent om een Activity te openen:



Intent om een andere App te openen:

Slide 26 - Diapositive

Intents
Intent om een andere App te openen:



In de emulator is Chrome de enige app die hierop reageert. Die zal de link proberen te openen.
Apps kunnen in hun AndroidManifest.xml configuratie aangeven dat ze iets kunnen met ‘Intent.ACTION_VIEW’. Die worden dan als optie getoond voor het openen/verwerken van de link. 

Slide 27 - Diapositive

Intents
💻 Doe mee:
  • Voeg in de MainActivity een tweede knop toe die bovenin, in het midden staat.
  • Geef de knop de tekst 'Open website'
  • Geef de knop een id
  • Zorg er in de code-behind (MainActivity.kt) dat bij het klikken op de knop de link 'https://curio.nl' of jouw eigen website opent.

Slide 28 - Diapositive

Gegevens uit een EditText ophalen
Meegeven (eerste Activity)




                                     Ophalen (tweede Activity)

Slide 29 - Diapositive

Gegevens uit een EditText ophalen
Tonen in de lay-out van de tweede Activity
Maak een TextView in de tweede Activity met een id, zodat je de 'text' via Kotlin kan instellen

Slide 30 - Diapositive

Gegevens uit een EditText ophalen
💻 Doe mee:
  • Geef uit de eerste Activity de in de EditText ingevulde naam mee (op de plek waar nu "Janiek" hard-coded wordt meegegeven)
  • Haal die naam in de tweede Activity op
  • Maak een TextView in de tweede Activity, geef die een id als 'welcomeTextView'
  • Toon de naam in die TextView
  • Zoek zelf uit hoe je "Welkom <hier de naam>" kunt tonen (in C#: $"Welkom {name}" of "Welkom " + name)
Meegeven (eerste Activity) - klik om te vergroten:
Ophalen (tweede Activity):

Slide 31 - Diapositive

💻 Doe mee:
Zelf uitzoeken: Een afbeelding element tonen
Zoek op internet een voorbeeld en/of de documentatie om in je Activity een afbeelding te tonen.


Eisen:
  • Gebruik ImageView
  • Importeer een eigen afbeelding (drawable)
  • Centreer de afbeelding in je app

Slide 32 - Diapositive