Zoom in en uit op een image met een scrollview

Als het hoogzomer is blijf ik liever in mijn eigen Amsterdam. De stad zindert op dit moment onder de hitte en het ene na het andere temperatuurrecord sneuvelt. Het voor- en najaar reserveer ik dan voor mijn reisavonturen, maar een juli en augustus in Mokum is absoluut geen straf!

Samen met psycholoog Merel Hovestad en een andere developer leggen we op dit moment de laatste hand aan een zelfhulp app die OpenMind gaat heten. De app gaat mensen helpen om beter te kunnen dealen met hun issues. Denk aan slapeloosheid, stress of andere veel voorkomende problemen waar eigenlijk iedereen weleens mee te maken heeft. Niks om geheimzinnig over te doen dus en met de app kun je door meditatie-, ademhalings- en smarttapping oefeningen je problemen en probleempjes verlichten.

Smarttapping is een methode die tot de ‘Emotional Freedom Techniques’  kortweg EFT genoemd, wordt gerekend. Door met je middel- en wijsvinger te tikken op een aantal specifieke meridiaanpunten op je lichaam (vooral in je gezicht) en hierbij hardop jouw issue uit te spreken, kun je de symptomen van je probleem verminderen. In die zin gaat EFT ook niet op zoek naar wortel van je probleem, maar lost het op een simpele manier de nadelige effecten ervan op korte termijn op. En op de lange termijn kan dit de achterliggende oorzaak ook oplossen. Iets waar Merel zelf heilig in gelooft. Nadat ze zelf een aantal jaar geleden een persoonlijk trauma te verwerken kreeg, heeft smarttapping haar heel erg geholpen.

Genoeg over OpenMind, nu eerst wat code.. Een pinchable image maken m.b.v. een scrollView

Als een plaatje of foto erg klein is op het beeldscherm van de gebruikers smartphone, wil je soms dat hij door middel van een ‘pinch’ (met 2 vingers) kan in- en uitzoomen om de details beter te bekijken. Hoe pak je dit op een makkelijke manier aan? Hierbij een handig stappenplan!

Stap 1: Voeg een scrollview toe aan je storyboard of xib. Je geeft de scrollView layoutconstraints mee: Bottom, Left, Right en Top. Je kunt de scrollview fullscreen maken, maar ook een gedeelte van het scherm laten bedekken.

Stap 2: Voeg een imageview toe aan de scrollview. Het is belangrijk dat de imageview dus een subview is van de scrollView! Je geeft de imageview ook constraints: Bottom, Left, Right en Top en centerd horizontal en vertical. Plaats nu de image die je wilt gebruiken in de imageview.

Stap 3: Drag van de scrollview naar je viewcontroller en creƫer zo een IBOutlet voor de scrollview. Herhaal deze stap voor de imageview.

Stap 4: Voeg nu de UIScrollViewDelegate toe aan de viewcontroller:

Stap 4: Plaats in viewDidLoad de volgende code om de zoomfactoren te bepalen:

Een minimumZoomScale van 1.0 betekent dat de image niet kleiner kan worden gezoomd dan het origineel.

Stap 5: Voeg tenslotte de volgende delegate-functie toe:

Stap 6: Vergeet niet om in de imageview User Interaction Enabled aan te vinken. Als je dit niet doet, is de imageview niet ‘pinchable’ en kun je dus ook niet zoomen.

En that’s it!

Goof luck en Happy coding!