Altijd als eerste onze nieuwste blogs lezen? Laat je email adres achter en je ontvangt een bericht als wij een nieuw blog plaatsen.

Onze collega Giovanni legt uit hoe je de standaard UI-elementen uitbreidt van Xamarin.Forms. In deze tutorial maken we een interactieve ImageView om een afbeelding te kunnen zoomen en slepen.

Afbeelding bij custom view in Xamarin mobiele app bouwen

Introductie

Xamarin.Forms is ontzettend handig. Met slechts een enkele codebase kun je een app laten draaien op verschillende mobiele platformen die ook nog eens native zijn. Dit maakt het werk voor een ontwikkelaar een stuk makkelijker. Geen dubbele code meer schrijven en je layout ziet er op alle platformen bijna hetzelfde uit. Dit is natuurlijk handig, maar er zijn ook nadelen.

Zo had een klant van ons namelijk als wens om een afbeelding te kiezen en met deze afbeelding te kunnen zoomen en slepen. Dit klinkt als een veelvoorkomende functie in apps, echter wordt dit niet door Xamarin.Forms ondersteund. Uiteraard levert Xamarin.Forms wel een aantal UI-elementen, waaronder ondersteuning voor afbeeldingen. Helaas had Xamarin.Forms geen ondersteuning voor een interactieve afbeelding.

In deze blog zal ik daarom uitleggen hoe wij onze eigen `Interactieve ImageView` kunnen schrijven. Dit houdt in dat we een van de standaard UI-elementen van Xamarin.Forms gaan uitbreiden voor elk platform. In deze tutorial zijn deze platformen iOS en Android. Voor deze tutorial heb je al wel enige ervaring nodig met de basis van Xamarin.Forms. Tevens beschrijf ik hier de stappen die genomen moeten worden voor het schrijven van deze uitbreidingen. De volledige code is niet volledig in de blogs opgenomen, deze is te vinden op onze Github. Ik heb hiervoor een link opgenomen verder in de blog

Het schrijven van de Interactieve ImageView

We beginnen met het aanmaken van een nieuw Xamarin.Forms project in Visual Studio. We kiezen voor een Blank App voor iOS en Android en als Code Sharing Strategy gebruiken we .NET Standard.

Afbeelding van nieuwe app - Pan and Zoom

We hebben nu een app staan met een standaard layout. Aangezien we een afbeelding willen hebben, gaan we deze toevoegen aan de MainPage.xaml die we kunnen vinden in het gedeelde project.

Zoals hierboven is te zien hebben we een Image toegevoegd. Als Source dien je je eigen afbeelding toe te voegen. Dit kan een URL zijn, maar ook een lokale afbeelding. Wanneer je de app opstart zal je de afbeelding zien. De app zal verder nog niets doen met de afbeelding. We willen nu de afbeelding interactief maken. Om dit te kunnen doen gaan we een eigen UI-element aanmaken.

Voeg een nieuwe klasse toe aan het gedeelde project en noem deze PanZoomView.cs. Vervolgens dienen we deze te extenden van Image, omdat we de bestaande functionaliteit van de Image willen blijven gebruiken. Onze PanZoomView zal er zo uit komen te zien:

Tevens zie je twee properties die ik heb toegevoegd, namelijk MaxZoomLevelProperty en MaxZoomLevel. Deze heb ik alvast toegevoegd omdat we deze waardes in XAML toe kunnen wijzen en later kunnen gebruiken. Open nu nogmaals je MainPage.xaml en vervang Image nu met het net toegevoegde element. Dit zal er ongeveer zo uit komen te zien:

Je kunt zien dat we meteen MaxZoomLevel kunnen toewijzen, wat erg handig is.

Nu hebben we een eigen UI-element geschreven, maar nu moeten we hier ook een Custom Renderer voor schrijven. Bij het lezen van deze term zullen er wellicht wat vraagtekens opkomen. Ik zal daarom eerst uitleggen wat een Renderer nou precies inhoudt.

Zoals je misschien al weet heeft Xamarin.Forms ondersteuning voor verschillende platformen en dien je de layout maar een enkele keer te schrijven. We hebben bijvoorbeeld net een Image object toegevoegd aan onze MainPage.xaml, maar dit object is op Android niet hetzelfde als op iOS. Zo gebruikt Android een ImageView en iOS een UIImageView om een afbeelding te laten zien aan de gebruiker.

Daarom maakt Xamarin gebruik van Renderers. Een Renderer is niets anders dan de vertaler van onze XAML layout en views naar de onderliggende native views. Renderers zijn daarom ook platform specifiek geschreven.

Je raadt het misschien al. Voor een Image heeft Xamarin een ImageRenderer. Omdat we het gedrag van de afbeelding willen aanpassen moeten we daarom in zowel het Android project als het iOS project onze eigen renderer toe te voegen. Voeg daarom aan beide projecten (iOS en Android) een nieuwe klasse toe. Deze noemen we PanZoomImageRenderer.cs.

Vervolgens dienen we hier code in te gaan schrijven. Niet alle code zal in deze blog worden gezet. Het is daarom handig om de code erbij te pakken die op onze Github staat:

https://github.com/Suneco/Xamarin.PanAndZoom/blob/develop/PanAndZoom/PanAndZoom.Android/PanZoomImageRenderer.cs
https://github.com/Suneco/Xamarin.PanAndZoom/blob/develop/PanAndZoom/PanAndZoom.iOS/PanZoomImageRenderer.cs

Wat opvalt is dat beide klassen een assembly attribuut hebben:

Dit vertelt de compiler dat PanZoomImageRenderer de renderer is voor onze eigen toegevoegde PanZoomView. Ook zie je dat beide renderers extenden van Xamarin’s ImageRenderer:

Een van de belangrijkste methodes binnen deze renderers is de volgende:

Binnen deze methode ontvangen we het aangemaakte UI-element vanuit XAML.  Aangezien we de ImageRenderer extenden, moeten we de Image eerst te casten naar een PanZoomView. Vervolgens kunnen we de property MaxZoomLevel uit lezen die we eerder hebben toegevoegd. Deze waarde slaan we op en gebruiken we binnen de logica van onze custom renderer.

Wanneer je de verdere code bekijkt van beide renderers kun je zien dat we een aantal platform specifieke elementen gebruiken voor het herkennen van zogeheten Gestures. Tevens zorgt onze geschreven code ervoor dat de afbeelding niet uit het scherm zal verdwijnen en dat de waarde MaxZoomLevel gerespecteerd wordt.

Conclusie

Voorbeeld van de app met Interactieve afbeeldingEn dat was alles! Zoals je kan lezen is het best makkelijk om eigen UI-elementen toe te voegen en uit te breiden voor verschillende platformen. Persoonlijk maakt dit voor mij het ontwikkelen van apps ook alleen maar leuker. Je krijgt op deze manier alsnog te maken met de native elementen van de platformen waar je voor aan het bouwen bent. Een nadeel is wel dat je ontzettend goed moet opletten dat je zelf geschreven implementatie exact hetzelfde werkt op elk platform.

Dit gehele project is te vinden op: https://github.com/Suneco/Xamarin.PanAndZoom

Meer achtergrond nodig? Neem contact met ons op

Deel deze pagina