Ekraani orientatsiooni valdamine: põhjalik juhend seadme pööramise käsitlemiseks

Tänapäeva mitme seadmega maailmas on ekraani orientatsiooni sujuv käsitlemine positiivse kasutajakogemuse pakkumisel ülioluline. Olgu tegemist nutitelefoni, tahvelarvuti või isegi kokkupandava seadmega, kasutajad ootavad, et rakendused kohanduksid sujuvalt, kui nad oma seadet pööravad. See juhend pakub põhjalikku ülevaadet seadme pööramise käsitlemisest, hõlmates erinevaid platvorme ja tehnikaid, et tagada teie rakenduste reageerimisvõime ja kasutajasõbralikkus.

Ekraani orientatsiooni mõistmine

Ekraani orientatsioon viitab suunale, milles sisu kuvatakse seadme ekraanil. Kaks peamist orientatsiooni on:

• Püstpaigutus (Portrait): Ekraan on kõrgem kui laiem. See on nutitelefonide tavapärane orientatsioon.
• Rõhtpaigutus (Landscape): Ekraan on laiem kui kõrgem. Seda eelistatakse sageli videote vaatamiseks või mängude mängimiseks.

Mõned seadmed ja rakendused toetavad ka:

• Pööratud püstpaigutus (Reverse Portrait): Püstpaigutus, kus seade on pööratud 180 kraadi.
• Pööratud rõhtpaigutus (Reverse Landscape): Rõhtpaigutus, kus seade on pööratud 180 kraadi.

Miks käsitleda ekraani orientatsiooni muutusi?

Ekraani orientatsiooni muutuste käsitlemata jätmine võib põhjustada mitmesuguseid probleeme, sealhulgas:

• Küljenduse probleemid: Elemendid võivad olla valesti joondatud, kärbitud või üksteist katta.
• Andmekadu: Mõnel juhul võib Activity või rakenduse olek ekraani pööramisel kaduma minna.
• Halb kasutajakogemus: Ebamugav või katkine kogemus võib kasutajaid frustreerida ja kahjustada teie rakenduse mainet.
• Jõudlusprobleemid: Sage uuesti renderdamine ja küljenduse arvutused võivad mõjutada jõudlust, eriti vanemates seadmetes.

Ekraani orientatsiooni käsitlemine erinevatel platvormidel

Ekraani orientatsiooni käsitlemise spetsiifilised tehnikad sõltuvad platvormist, millele arendate. Vaatame mõningaid populaarsemaid platvorme:

1. Android

Android pakub mitmeid mehhanisme ekraani orientatsiooni muutuste käsitlemiseks. Kõige levinumad lähenemisviisid on järgmised:

a. Konfiguratsioonimuudatused

Vaikimisi loob Android Activity uuesti, kui ekraani orientatsioon muutub. See tähendab, et meetod `onCreate()` kutsutakse uuesti välja ja kogu paigutus laaditakse uuesti. Kuigi see võib olla kasulik kasutajaliidese täielikuks ümberkorraldamiseks vastavalt orientatsioonile, võib see olla ka ebaefektiivne, kui peate paigutust vaid veidi kohandama.

Selleks, et vältida Activity uuesti loomist, saate deklareerida `AndroidManifest.xml` failis, et teie Activity käsitleb `orientation` konfiguratsioonimuudatust ise:

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

Lisades `orientation` ja `screenSize` (oluline API tasemel 13 ja kõrgemal), annate süsteemile teada, et teie Activity tegeleb orientatsioonimuutustega ise. Kui ekraan pöörleb, kutsutakse välja meetod `onConfigurationChanged()`.

@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();
 }
}

Meetodi `onConfigurationChanged()` sees saate kasutajaliidest uue orientatsiooni põhjal värskendada. See lähenemine on tõhusam kui Activity uuesti loomine, sest see väldib tarbetut ressursside laadimist ja paigutuse inflatsiooni.

b. Activity oleku salvestamine ja taastamine

Isegi kui tegelete konfiguratsioonimuudatusega ise, peate võib-olla ikkagi salvestama ja taastama Activity oleku. Näiteks kui teie Activitys on tekstiväli, soovite säilitada teksti, mille kasutaja on ekraani pööramisel sisestanud.

Activity oleku salvestamiseks saate kasutada meetodit `onSaveInstanceState()` ja selle taastamiseks meetodit `onRestoreInstanceState()`.

@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);
}

Alternatiivina saate kasutada ViewModels koos SavedStateHandle'iga kasutajaliidesega seotud andmete haldamiseks ja säilitamiseks konfiguratsioonimuudatuste ajal, mis on kaasaegsem ja soovitatav lähenemine.

c. Alternatiivsed paigutused

Android võimaldab teil pakkuda erinevaid paigutusfaile erinevate ekraani orientatsioonide jaoks. Saate luua eraldi paigutusfailid kataloogides `res/layout-land/` ja `res/layout-port/`. Kui ekraan pöörleb, laadib Android automaatselt sobiva paigutusfaili.

See lähenemine on kasulik, kui kasutajaliides peab rõht- ja püstpaigutuses oluliselt erinema. Näiteks võite soovida kuvada rõhtpaigutuses kahepaanilise paigutuse ja püstpaigutuses ühepaanilise paigutuse.

d. ConstraintLayout'i kasutamine

ConstraintLayout on võimas paigutushaldur, mis võimaldab luua paindlikke ja kohanduvaid paigutusi. ConstraintLayout'i abil saate määratleda piiranguid, mis täpsustavad, kuidas vaated peaksid olema paigutatud üksteise ja vanempaigutuse suhtes. See muudab erinevatele ekraanisuurustele ja -orientatsioonidele kohanduvate paigutuste loomise lihtsamaks.

2. iOS

Ka iOS pakub mehhanisme ekraani orientatsiooni muutuste käsitlemiseks. Siin on mõned levinud lähenemisviisid:

a. Auto Layout

Auto Layout on piirangutel põhinev paigutussüsteem, mis võimaldab teil määratleda reegleid, kuidas vaateid tuleks paigutada ja suurustada. Auto Layout'i piirangud tagavad, et teie kasutajaliides kohandub erinevate ekraanisuuruste ja -orientatsioonidega.

Auto Layout'i kasutamisel määratlete tavaliselt piirangud, mis määravad vaadete vahelised seosed. Näiteks võite piirata nupu nii, et see oleks oma vanemvaates horisontaalselt ja vertikaalselt keskel. Kui ekraan pöörleb, arvutab Auto Layout'i mootor automaatselt vaadete asukohad ja suurused ümber, et piirangutele vastata.

b. Suurusklassid (Size Classes)

Suurusklassid on viis ekraanisuuruste ja -orientatsioonide kategoriseerimiseks. iOS määratleb kaks suurusklassi: `Compact` ja `Regular`. Seadmel võivad olla erinevad suurusklassid laiuse ja kõrguse jaoks. Näiteks iPhone'i püstpaigutuses on `Compact` laiuse ja `Regular` kõrguse suurusklass. Rõhtpaigutuses on sellel sageli `Compact` kõrgus ja `Compact` või `Regular` laius, sõltuvalt mudelist.

Saate kasutada suurusklasse oma kasutajaliidese kohandamiseks vastavalt ekraani suurusele ja orientatsioonile. Näiteks võite soovida kuvada erinevate suurusklasside jaoks erinevaid vaateid või kasutada erinevaid fonte.

Saate konfigureerida erinevaid piiranguid ja isegi paigaldada/eemaldada vaateid suurusklasside põhjal otse Interface Builderis või programmiliselt.

c. View Controlleri pööramise meetodid

iOS pakub UIViewControlleri klassis mitmeid meetodeid, mis kutsutakse välja seadme pööramisel:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Kutsutakse välja enne, kui vaatekontrolleri vaate suurust ülemineku jaoks muudetakse.
• viewWillLayoutSubviews(): Kutsutakse välja vahetult enne, kui vaatekontrolleri vaade paigutab oma alamvaated.
• viewDidLayoutSubviews(): Kutsutakse välja vahetult pärast seda, kui vaatekontrolleri vaade on paigutanud oma alamvaated.

Saate need meetodid üle kirjutada, et teha kohandatud paigutuse muudatusi, kui ekraan pöörleb.

d. Notification Center

Saate kuulata orientatsioonimuutuse teateid, kasutades Notification Centerit:

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. Veebiarendus (HTML, CSS, JavaScript)

Veebiarenduses saate ekraani orientatsiooni muutuste käsitlemiseks kasutada CSS-i meediapäringuid ja JavaScripti.

a. CSS-i meediapäringud

Meediapäringud võimaldavad teil rakendada erinevaid stiile vastavalt ekraani suurusele, orientatsioonile ja muudele omadustele. Saate kasutada `orientation` meediafunktsiooni, et sihtida konkreetseid orientatsioone.

/* Püstpaigutus */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Rõhtpaigutus */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Saate kasutada meediapäringuid paigutuse, fontide ja muude stiilide kohandamiseks vastavalt orientatsioonile.

b. JavaScript

Saate kasutada JavaScripti ekraani orientatsiooni muutuste tuvastamiseks ja kohandatud toimingute tegemiseks. `screen.orientation` API annab teavet praeguse orientatsiooni kohta.

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);

Alternatiivina saate kasutada `matchMedia` API-d koos meediapäringutega:

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

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

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScripti saab kasutada paigutuse dünaamiliseks kohandamiseks, erinevate ressursside laadimiseks või muude toimingute tegemiseks vastavalt orientatsioonile.

c. Kohanduva disaini raamistikud

Raamistikud nagu Bootstrap, Foundation ja Materialize CSS pakuvad sisseehitatud tuge kohanduvale disainile, mis teeb erinevatele ekraanisuurustele ja -orientatsioonidele kohanduvate paigutuste loomise lihtsamaks. Need raamistikud kasutavad tavaliselt ruudustikusüsteemi ja meediapäringuid, et luua paindlikke ja reageerimisvõimelisi kasutajaliideseid.

Parimad tavad ekraani orientatsiooni käsitlemiseks

Siin on mõned parimad tavad, mida ekraani orientatsiooni muutuste käsitlemisel silmas pidada:

• Vältige tarbetut Activity/ViewControlleri uuesti loomist: Võimalusel käsitlege konfiguratsioonimuudatust ise, et vältida Activity või ViewControlleri uuesti loomisega kaasnevat lisakoormust.
• Salvestage ja taastage olek: Andmekao vältimiseks salvestage ja taastage alati Activity/ViewControlleri olek. Kasutage ViewModels'e robustsemaks olekuhalduseks.
• Kasutage Auto Layout'i või ConstraintLayout'i: Need paigutussüsteemid muudavad paindlike ja kohanduvate paigutuste loomise lihtsamaks.
• Testige mitmel seadmel: Testige oma rakendust erinevate ekraanisuuruste ja -orientatsioonidega seadmetel, et tagada selle korrektne toimimine.
• Arvestage ligipääsetavusega: Veenduge, et teie rakendus jääb puuetega kasutajatele ligipääsetavaks ka siis, kui ekraan pöörleb.
• Pakkuge selgeid visuaalseid vihjeid: Kui kasutajaliides muutub ekraani pööramisel oluliselt, pakkuge selgeid visuaalseid vihjeid, et aidata kasutajatel muutusi mõista.
• Vältige kindla orientatsiooni sundimist (kui see pole vajalik): Lubage kasutajatel oma seadet võimaluse korral eelistatud orientatsioonis kasutada. Orientatsiooni sundimine võib olla frustreeriv ja ebamugav. Lukustage orientatsioon ainult siis, kui see on rakenduse funktsionaalsuse jaoks ülioluline (nt mäng, mis nõuab rõhtpaigutust). Kui te orientatsiooni lukustate, selgitage kasutajale selgelt selle põhjust.
• Optimeerige jõudlust: Minimeerige töö mahtu, mis tuleb ekraani pööramisel teha, et vältida jõudlusprobleeme.
• Kasutage suhtelisi ühikuid: Oma paigutuses suuruste ja asukohtade määratlemisel kasutage absoluutsete ühikute (nt pikslid) asemel suhtelisi ühikuid (nt protsendid, `dp`, `sp`), et tagada teie kasutajaliidese korrektne skaleerumine erinevatel ekraanisuurustel.
• Kasutage olemasolevaid teeke ja raamistikke: Kasutage ära olemasolevaid teeke ja raamistikke, mis pakuvad tuge kohanduvale disainile ja ekraani orientatsiooni käsitlemisele.

Orientatsiooni lukustamine ja kasutajakogemus

Kuigi üldiselt on parim lubada kasutajatel oma seadmeid vabalt pöörata, on olukordi, kus võiksite ekraani orientatsiooni lukustada. Näiteks võib täisekraan-videopleier lukustada orientatsiooni rõhtpaigutusele optimaalseks vaatamiseks.

Siiski on oluline kasutada orientatsiooni lukustamist säästlikult ja pakkuda kasutajale selget põhjust. Orientatsiooni sundimine võib olla frustreeriv ja muuta teie rakenduse vähem ligipääsetavaks.

Kuidas ekraani orientatsiooni lukustada

Android

Androidis saate ekraani orientatsiooni lukustada, määrates `screenOrientation` atribuudi `AndroidManifest.xml` failis:

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

Saate orientatsiooni lukustada ka programmiliselt:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

iOS-is saate toetatud orientatsioonid määrata `Info.plist` failis. Saate ka oma vaatekontrolleris üle kirjutada meetodi `supportedInterfaceOrientations`:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globaalsed kaalutlused

Globaalsele sihtrühmale disainides pidage ekraani orientatsiooni osas silmas järgmist:

• Paremal-vasakule (RTL) paigutused: Mõelge, kuidas teie kasutajaliides kohandub RTL-keeltega. Mõned keeled, näiteks araabia ja heebrea, kirjutatakse paremalt vasakule. Veenduge, et teie paigutus peegeldub RTL-režiimis õigesti. Auto Layout ja ConstraintLayout pakuvad sageli sisseehitatud tuge RTL-paigutustele.
• Kultuurilised eelistused: Olge teadlik seadme kasutamisega seotud kultuurilistest eelistustest. Kuigi enamik kasutajaid on harjunud nii püst- kui ka rõhtpaigutusega, võivad mõnedel kultuuridel olla peened eelistused. Testimine erinevatest piirkondadest pärit kasutajatega võib anda väärtuslikku teavet.
• Ligipääsetavus erinevatele kasutajatele: Seadke alati esikohale ligipääsetavus. Veenduge, et teie rakendus on puuetega inimestele kasutatav, olenemata ekraani orientatsioonist. See hõlmab alternatiivteksti pakkumist piltidele, piisava värvikontrasti tagamist ja abitehnoloogiate toetamist.

Ekraani orientatsiooni käsitlemise testimine

Põhjalik testimine on hädavajalik, et tagada teie rakenduse korrektne toimetulek ekraani orientatsiooni muutustega. Siin on mõned näpunäited testimiseks:

• Kasutage emulaatoreid ja reaalseid seadmeid: Testige oma rakendust nii emulaatoritel kui ka reaalsetel seadmetel, et katta laiem valik ekraanisuurusi ja riistvarakonfiguratsioone.
• Testige erinevates orientatsioonides: Testige oma rakendust nii püst- kui ka rõhtpaigutuses, samuti pööratud püst- ja pööratud rõhtpaigutuses, kui neid toetatakse.
• Testige erinevate ekraanisuurustega: Testige oma rakendust erinevate ekraanisuurustega seadmetel, et tagada kasutajaliidese korrektne skaleerumine.
• Testige erinevate fondisuurustega: Testige oma rakendust erinevate fondisuurustega, et tagada teksti loetavus.
• Testige sisselülitatud ligipääsetavusfunktsioonidega: Testige oma rakendust sisselülitatud ligipääsetavusfunktsioonidega, näiteks ekraanilugejatega, et tagada selle ligipääsetavus puuetega kasutajatele.
• Automatiseeritud testimine: Rakendage automatiseeritud kasutajaliidese teste, mis katavad ekraani orientatsiooni muutusi. See aitab leida regressioone ja tagada järjepideva käitumise erinevates versioonides.

Kokkuvõte

Ekraani orientatsiooni tõhus käsitlemine on mobiili- ja veebiarenduse kriitiline aspekt. Mõistes erinevaid tehnikaid, mis on igal platvormil saadaval, ja järgides parimaid tavasid, saate luua rakendusi, mis pakuvad sujuvat ja nauditavat kasutajakogemust, olenemata sellest, kuidas kasutaja oma seadet hoiab. Ärge unustage seada esikohale testimist ja arvestada oma disainivalikute globaalsete mõjudega, et tagada teie rakenduse ligipääsetavus ja kasutajasõbralikkus mitmekesisele sihtrühmale.