Leer hoe u effectief schermoriƫntatiewijzigingen in uw applicaties kunt beheren, voor een naadloze gebruikerservaring op alle apparaten en platforms.
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.