Schermoriëntatie Meesteren: Een Uitgebreide Gids voor het Behandelen van Apparaatrotatie

In de hedendaagse wereld met meerdere apparaten is het correct omgaan met schermoriëntatie cruciaal voor een positieve gebruikerservaring. Of het nu een smartphone, tablet of zelfs een opvouwbaar apparaat is, gebruikers verwachten dat applicaties zich naadloos aanpassen wanneer ze hun apparaat draaien. Deze gids biedt een uitgebreid overzicht van het omgaan met apparaatrotatie, waarbij verschillende platforms en technieken worden behandeld om ervoor te zorgen dat uw applicaties responsief en gebruiksvriendelijk zijn.

Schermoriëntatie Begrijpen

Schermoriëntatie verwijst naar de richting waarin de inhoud op het scherm van een apparaat wordt weergegeven. De twee primaire oriëntaties zijn:

• Portret: Het scherm is hoger dan het breed is. Dit is de typische oriëntatie voor smartphones.
• Landschap: Het scherm is breder dan het hoog is. Dit wordt vaak verkozen voor het bekijken van video's of het spelen van games.

Sommige apparaten en applicaties ondersteunen ook:

• Omgekeerd Portret: Portretoriëntatie met het apparaat 180 graden gedraaid.
• Omgekeerd Landschap: Landschaporiëntatie met het apparaat 180 graden gedraaid.

Waarom Schermoriëntatiewijzigingen Behandelen?

Het niet correct behandelen van schermoriëntatiewijzigingen kan leiden tot diverse problemen, waaronder:

• Lay-outproblemen: Elementen kunnen verkeerd uitgelijnd, afgekapt of over elkaar heen geplaatst worden.
• Gegevensverlies: In sommige gevallen kan de status van een activiteit of applicatie verloren gaan wanneer het scherm draait.
• Slechte gebruikerservaring: Een schokkerige of gebroken ervaring kan gebruikers frustreren en de reputatie van uw applicatie schaden.
• Prestatieproblemen: Frequente her-rendering en lay-outberekeningen kunnen de prestaties beïnvloeden, vooral op oudere apparaten.

Schermoriëntatie Behandelen op Verschillende Platforms

De specifieke technieken voor het behandelen van schermoriëntatie variëren afhankelijk van het platform waarvoor u ontwikkelt. Laten we enkele van de meest populaire platforms bekijken:

1. Android

Android biedt verschillende mechanismen voor het omgaan met schermoriëntatiewijzigingen. De meest voorkomende benaderingen zijn:

a. Configuratieveranderingen

Standaard maakt Android de Activity opnieuw aan wanneer de schermoriëntatie verandert. Dit betekent dat de `onCreate()`-methode opnieuw wordt aangeroepen en de volledige lay-out opnieuw wordt geladen. Hoewel dit handig kan zijn om de UI volledig te herstructureren op basis van de oriëntatie, kan het ook inefficiënt zijn als u de lay-out slechts licht hoeft aan te passen.

Om te voorkomen dat de Activity opnieuw wordt aangemaakt, kunt u in het `AndroidManifest.xml`-bestand aangeven dat uw Activity de `orientation` configuratieverandering zelf afhandelt:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Door `orientation` en `screenSize` (belangrijk voor API-niveau 13 en hoger) toe te voegen, vertelt u het systeem dat uw Activity oriëntatiewijzigingen zelf zal afhandelen. Wanneer het scherm draait, wordt de methode `onConfigurationChanged()` aangeroepen.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

Binnen `onConfigurationChanged()` kunt u de UI bijwerken op basis van de nieuwe oriëntatie. Deze aanpak is efficiënter dan het opnieuw aanmaken van de Activity omdat het onnodig laden van bronnen en het opblazen van de lay-out vermijdt.

b. Status van de Activity Opslaan en Herstellen

Zelfs als u de configuratieverandering zelf afhandelt, moet u mogelijk nog steeds de status van de Activity opslaan en herstellen. Als uw Activity bijvoorbeeld een tekstveld heeft, wilt u de tekst die de gebruiker heeft ingevoerd behouden wanneer het scherm draait.

U kunt de methode `onSaveInstanceState()` gebruiken om de status van de Activity op te slaan en de methode `onRestoreInstanceState()` om deze te herstellen.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Als alternatief kunt u ViewModels met SavedStateHandle gebruiken voor het beheren en bewaren van UI-gerelateerde gegevens over configuratieveranderingen heen, een modernere en aanbevolen aanpak.

c. Alternatieve Lay-outs

Android stelt u in staat om verschillende lay-outbestanden te voorzien voor verschillende schermoriëntaties. U kunt afzonderlijke lay-outbestanden aanmaken in de mappen `res/layout-land/` en `res/layout-port/`. Wanneer het scherm draait, zal Android automatisch het juiste lay-outbestand laden.

Deze aanpak is handig wanneer de UI aanzienlijk moet verschillen in landschap- en portretoriëntaties. U zou bijvoorbeeld een lay-out met twee panelen in landschap en een lay-out met één paneel in portret willen weergeven.

d. ConstraintLayout Gebruiken

ConstraintLayout is een krachtige lay-outmanager waarmee u flexibele en adaptieve lay-outs kunt creëren. Met ConstraintLayout kunt u beperkingen (constraints) definiëren die specificeren hoe views gepositioneerd moeten worden ten opzichte van elkaar en van de bovenliggende lay-out. Dit maakt het gemakkelijker om lay-outs te maken die zich aanpassen aan verschillende schermgroottes en oriëntaties.

2. iOS

iOS biedt ook mechanismen voor het omgaan met schermoriëntatiewijzigingen. Hier zijn enkele veelvoorkomende benaderingen:

a. Auto Layout

Auto Layout is een op beperkingen (constraints) gebaseerd lay-outsysteem waarmee u regels kunt definiëren voor hoe views moeten worden gepositioneerd en gedimensioneerd. Auto Layout-constraints zorgen ervoor dat uw UI zich aanpast aan verschillende schermgroottes en -oriëntaties.

Wanneer u Auto Layout gebruikt, definieert u doorgaans beperkingen die de relaties tussen views specificeren. U kunt bijvoorbeeld een knop beperken om horizontaal en verticaal gecentreerd te zijn binnen de bovenliggende view. Wanneer het scherm draait, herberekent de Auto Layout-engine automatisch de posities en groottes van de views om aan de beperkingen te voldoen.

b. Size Classes

Size classes zijn een manier om schermgroottes en -oriëntaties te categoriseren. iOS definieert twee size classes: `Compact` en `Regular`. Een apparaat kan verschillende size classes hebben voor zijn breedte en hoogte. Een iPhone in portretoriëntatie heeft bijvoorbeeld een `Compact` breedte size class en een `Regular` hoogte size class. In landschap heeft het vaak een `Compact` hoogte en een `Compact` of `Regular` breedte, afhankelijk van het model.

U kunt size classes gebruiken om uw UI aan te passen op basis van de schermgrootte en -oriëntatie. U kunt bijvoorbeeld een andere set views weergeven of andere lettertypen gebruiken voor verschillende size classes.

U kunt verschillende beperkingen configureren en zelfs views installeren/verwijderen op basis van size classes, rechtstreeks in Interface Builder of programmatisch.

c. View Controller Rotatiemethoden

iOS biedt verschillende methoden in de UIViewController-klasse die worden aangeroepen wanneer het apparaat roteert:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Wordt aangeroepen voordat de view van de view controller wordt aangepast voor een overgang.
• viewWillLayoutSubviews(): Wordt aangeroepen net voordat de view van de view controller zijn subviews lay-out.
• viewDidLayoutSubviews(): Wordt aangeroepen net nadat de view van de view controller zijn subviews heeft gelay-out.

U kunt deze methoden overschrijven om aangepaste lay-outaanpassingen uit te voeren wanneer het scherm roteert.

d. Notification Center

U kunt luisteren naar meldingen van oriëntatiewijzigingen met behulp van het Notification Center:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Webontwikkeling (HTML, CSS, JavaScript)

Bij webontwikkeling kunt u CSS media queries en JavaScript gebruiken om schermoriëntatiewijzigingen af te handelen.

a. CSS Media Queries

Media queries stellen u in staat om verschillende stijlen toe te passen op basis van de schermgrootte, oriëntatie en andere kenmerken. U kunt de `orientation` media feature gebruiken om specifieke oriëntaties te targeten.

/* Portretoriëntatie */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Landschaporiëntatie */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

U kunt media queries gebruiken om de lay-out, lettertypen en andere stijlen aan te passen op basis van de oriëntatie.

b. JavaScript

U kunt JavaScript gebruiken om schermoriëntatiewijzigingen te detecteren en aangepaste acties uit te voeren. De `screen.orientation` API biedt informatie over de huidige oriëntatie.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Als alternatief kunt u de `matchMedia` API met media queries gebruiken:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript kan worden gebruikt om de lay-out dynamisch aan te passen, verschillende bronnen te laden of andere acties uit te voeren op basis van de oriëntatie.

c. Responsive Design Frameworks

Frameworks zoals Bootstrap, Foundation en Materialize CSS bieden ingebouwde ondersteuning voor responsive design, wat het gemakkelijker maakt om lay-outs te creëren die zich aanpassen aan verschillende schermgroottes en -oriëntaties. Deze frameworks gebruiken doorgaans een rastersysteem en media queries om flexibele en responsieve UI's te creëren.

Best Practices voor het Behandelen van Schermoriëntatie

Hier zijn enkele best practices om in gedachten te houden bij het behandelen van schermoriëntatiewijzigingen:

• Vermijd onnodige hercreatie van Activity/ViewController: Handel indien mogelijk de configuratieverandering zelf af om de overhead van het opnieuw aanmaken van de Activity of ViewController te vermijden.
• Sla de status op en herstel deze: Sla altijd de status van de Activity/ViewController op en herstel deze om gegevensverlies te voorkomen. Gebruik ViewModels voor robuuster statusbeheer.
• Gebruik Auto Layout of ConstraintLayout: Deze lay-outsystemen maken het gemakkelijker om flexibele en adaptieve lay-outs te creëren.
• Test op meerdere apparaten: Test uw applicatie op een verscheidenheid aan apparaten met verschillende schermgroottes en -oriëntaties om ervoor te zorgen dat deze correct werkt.
• Houd rekening met toegankelijkheid: Zorg ervoor dat uw applicatie toegankelijk blijft voor gebruikers met een handicap wanneer het scherm draait.
• Bied duidelijke visuele aanwijzingen: Als de UI aanzienlijk verandert wanneer het scherm draait, geef dan duidelijke visuele aanwijzingen om gebruikers te helpen de veranderingen te begrijpen.
• Vermijd het forceren van een specifieke oriëntatie (tenzij noodzakelijk): Sta gebruikers toe hun apparaat in hun voorkeursoriëntatie te gebruiken waar mogelijk. Het forceren van een oriëntatie kan frustrerend en onhandig zijn. Vergrendel de oriëntatie alleen als dit cruciaal is voor de functionaliteit van de applicatie (bijv. een spel dat landschapmodus vereist). Als u de oriëntatie vergrendelt, communiceer dan duidelijk de reden aan de gebruiker.
• Optimaliseer voor prestaties: Minimaliseer de hoeveelheid werk die moet worden gedaan wanneer het scherm draait om prestatieproblemen te voorkomen.
• Gebruik relatieve eenheden: Gebruik bij het definiëren van groottes en posities in uw lay-out relatieve eenheden (bijv. percentages, `dp`, `sp`) in plaats van absolute eenheden (bijv. pixels) om ervoor te zorgen dat uw UI correct schaalt op verschillende schermgroottes.
• Maak gebruik van bestaande bibliotheken en frameworks: Profiteer van bestaande bibliotheken en frameworks die ondersteuning bieden voor responsive design en het afhandelen van schermoriëntatie.

Oriëntatie Vergrendelen en Gebruikerservaring

Hoewel het over het algemeen het beste is om gebruikers hun apparaten vrij te laten draaien, zijn er situaties waarin u de schermoriëntatie misschien wilt vergrendelen. Een videospeler op volledig scherm kan bijvoorbeeld de oriëntatie vergrendelen naar landschapmodus voor optimaal kijkplezier.

Het is echter belangrijk om oriëntatievergrendeling spaarzaam te gebruiken en een duidelijke reden aan de gebruiker te geven. Het forceren van een oriëntatie kan frustrerend zijn en uw applicatie minder toegankelijk maken.

Hoe Schermoriëntatie te Vergrendelen

Android

U kunt de schermoriëntatie in Android vergrendelen door het `screenOrientation`-attribuut in het `AndroidManifest.xml`-bestand in te stellen:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

U kunt de oriëntatie ook programmatisch vergrendelen:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

In iOS kunt u de ondersteunde oriëntaties specificeren in het `Info.plist`-bestand. U kunt ook de methode `supportedInterfaceOrientations` in uw view controller overschrijven:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globale Overwegingen

Houd bij het ontwerpen voor een wereldwijd publiek rekening met het volgende met betrekking tot schermoriëntatie:

• Rechts-naar-Links (RTL) Lay-outs: Overweeg hoe uw UI zich zal aanpassen aan RTL-talen. Sommige talen, zoals Arabisch en Hebreeuws, worden van rechts naar links geschreven. Zorg ervoor dat uw lay-out correct wordt gespiegeld in de RTL-modus. Auto Layout en ConstraintLayout bieden vaak ingebouwde ondersteuning voor RTL-lay-outs.
• Culturele Voorkeuren: Wees u bewust van culturele voorkeuren met betrekking tot apparaatgebruik. Hoewel de meeste gebruikers gewend zijn aan zowel portret- als landschapmodi, kunnen sommige culturen subtiele voorkeuren hebben. Testen met gebruikers uit verschillende regio's kan waardevolle inzichten opleveren.
• Toegankelijkheid voor Diverse Gebruikers: Geef altijd prioriteit aan toegankelijkheid. Zorg ervoor dat uw applicatie bruikbaar is voor mensen met een handicap, ongeacht de schermoriëntatie. Dit omvat het bieden van alternatieve tekst voor afbeeldingen, het zorgen voor voldoende kleurcontrast en het ondersteunen van ondersteunende technologieën.

Testen van Schermoriëntatiebehandeling

Grondig testen is essentieel om ervoor te zorgen dat uw applicatie schermoriëntatiewijzigingen correct afhandelt. Hier zijn enkele tips voor het testen:

• Gebruik emulators en echte apparaten: Test uw applicatie op zowel emulators als echte apparaten om een breder scala aan schermgroottes en hardwareconfiguraties te dekken.
• Test in verschillende oriëntaties: Test uw applicatie in zowel portret- als landschaporiëntaties, evenals omgekeerd portret en omgekeerd landschap indien ondersteund.
• Test met verschillende schermgroottes: Test uw applicatie op apparaten met verschillende schermgroottes om ervoor te zorgen dat de UI correct schaalt.
• Test met verschillende lettergroottes: Test uw applicatie met verschillende lettergroottes om ervoor te zorgen dat de tekst leesbaar blijft.
• Test met ingeschakelde toegankelijkheidsfuncties: Test uw applicatie met ingeschakelde toegankelijkheidsfuncties zoals schermlezers om ervoor te zorgen dat deze toegankelijk blijft voor gebruikers met een handicap.
• Geautomatiseerd Testen: Implementeer geautomatiseerde UI-tests die schermoriëntatiewijzigingen dekken. Dit kan helpen regressies op te sporen en consistent gedrag over releases heen te garanderen.

Conclusie

Het effectief omgaan met schermoriëntatie is een cruciaal aspect van mobiele en webontwikkeling. Door de verschillende technieken die op elk platform beschikbaar zijn te begrijpen en best practices te volgen, kunt u applicaties creëren die een naadloze en plezierige gebruikerservaring bieden, ongeacht hoe de gebruiker zijn apparaat vasthoudt. Vergeet niet om prioriteit te geven aan testen en de wereldwijde implicaties van uw ontwerpkeuzes te overwegen om ervoor te zorgen dat uw applicatie toegankelijk en gebruiksvriendelijk is voor een divers publiek.