Het ontwikkelen van een mobiele applicatie (app) is veel werk. Voor ieder gekozen platform, bijvoorbeeld iOS of Android, is het noodzakelijk om een aparte app te bouwen. Dit is veranderd met de komst van Xamarin Forms, de app backend en User Interface (UI) worden in één keer ontwikkeld. De gebruikte UI-elementen worden gerendered naar iOS of Android specifieke elementen. Door de komst van Xamarin Forms komt er echter wel een nieuw probleem naar voren. Doordat de UI-elementen worden gerendered naar elementen die de guidelines voor het platform waar de app op draait volgt, ontstaat er een verschil tussen de ‘look and feel‘ van een Android en iOS applicatie. Dit verschil is goed te zien in afbeelding 1 en 2. Afbeelding 1 toont de iOS versie van de GAP-APP (een app die door Delta-N ontwikkeld is) en afbeelding 2 de Android variant. Zoals te zien is in de afbeeldingen zijn bijvoorbeeld de input velden verschillend weergegeven per platform. Net als de knoppen onderin het scherm. Dit komt doordat ieder platform zijn eigen style guide heeft. Maar wat als we de Android style guide willen toepassen op iOS?
     
Afbeelding 1 en 2: iOS Gap-App en Android Gap-App
Een User Interface voor elk platform
Om dezelfde UI te creëren is het reeds mogelijk om in Xamarin Forms voor ieder gebruikte UI-element een ‘custom render’ te maken. Dit houdt in dat voor bijvoorbeeld de invoervelden een generiek component gemaakt wordt voor het Android en iOS platform. Hiervoor is een specifieke implementatie voor beide platformen vereist om de invoervelden hetzelfde eruit te laten zien.
Het nadeel hiervan is het extra handmatige werk dat vereist is.
Om het extra werk te verminderen en dezelfde UI te krijgen voor zowel iOS als Android, is Xamarin Forms Shell ontwikkeld (op dit moment nog in preview). Zoals de naam al enigszins weggeeft is dit een design over de standaard UI-elementen heen. Bij het ontwikkelen van een Xamarin Forms app kan er gebruik gemaakt worden van Xamarin Forms Shell om de UI op zowel iOS en Android er hetzelfde uit te laten zien. De ontwikkelaar heeft de keuze om de ‘Material Shell’ (Android), ‘UIKit Shell’ (iOS) of de ‘UWP Shell’ (Windows) te kiezen. De UWP Shell zal in een later stadium gereed zijn voor gebruik. Een app zal bijvoorbeeld na het selecteren van ‘Material Shell’ er hetzelfde uitzien op iOS als op Android, in dit geval zal de ‘look and feel’ van Android overgezet worden naar het iOS platform.
Aan de slag met Shell
Het gebruik van Xamarin Forms Shell is erg simpel. Net als bij een Xamarin Forms project worden de pagina’s gemaakt volgens standaardtaal XAML. In afbeelding 3 is een standaard ‘ContentPage’ te zien, dit is een witte pagina met de tekst ‘Hello Shell’ en een ‘Button’.
Afbeelding 3: Voorbeeldpagina zonder Shell
De pagina is gerendered volgens de iOS standaarden, dit is echter niet het gewenste resultaat. Voor dit voorbeeld willen we dat de iOS app er hetzelfde zal uitzien als op Android.
Om de consistentie tussen beide varianten te kunnen waarmaken moeten we de ‘ContentPage’ gaan verpakken met een stukje ‘Shell’ code.
Afbeelding 4: Voorbeeld pagina met Shell
In afbeelding 4 is de ‘MainPage’, de pagina met het ‘Label’ en de ‘Button’ verpakt als een standaard Shell pagina. De pagina wordt gerendered via Shell, maar de uitkomst van de pagina is nog niet zoals verwacht. Het is hetzelfde als de standaard iOS UI in plaats van de gewenste Android UI.
Afbeelding 5: Voorbeeld pagina met MaterialShell
Hiervoor moeten we het ‘<Shell>’ element vervangen door ‘<MaterialShell>’. In afbeelding 5 is het Shell element vervangen, waardoor de UI met de ‘Label’ en de ‘Button’ is veranderd naar een Android UI.
Mogelijkheden van Xamarin Forms Shell
Momenteel is Shell nog in preview. Dit houdt in dat het eindproduct nog niet geheel af is voor het gebruik in productieapplicaties. De ontwikkelaars van Xamarin Forms hebben deze nieuwe functionaliteit beschikbaar gemaakt, zodat ontwikkelaars de tijd hebben om de nieuwe techniek onder de knie te krijgen. Echter houdt het niet op bij alleen het consistent maken van de UI tussen de verschillende platformen. Bij de ontwikkeling van Xamarin Forms Shell wordt ook de nadruk gelegd op een nieuwe manier van navigeren binnen een applicatie. Bij dit navigeren worden de standaard navigatie elementen zoals een master detail page vervangen door het gebruik van een Shell pagina met verschillende data-templates. Door de nadruk te leggen op het gebruik van data-templates bij het navigeren door de applicatie is de verwachtte uitkomst een lager geheugengebruik en een hogere snelheid van de applicatie.
Beschikbaarheid van Xamarin Forms Shell
Naar verwachting zal Xamarin Forms Shell aan het einde van 2018 beschikbaar komen als publieke pre-release in de standaard Xamarin Forms NuGet package. Als je nu al gebruik wilt maken van de beschikbare preview, dan kun je een oefenproject vinden via de volgende link Xamarin Forms Shell.
Om meer te weten te komen over de interne werking en/of de voortgang van het Xamarin Forms Shell neem dan een kijkje op de volgende GitHub pagina, Shell voortgang.
– Mitchel Hulst, Software Developer
