Ekrano Orientacijos Įvaldymas: Išsamus Vadovas, Kaip Valdyti Įrenginio Pasukimą

Šiuolaikiniame daugybės įrenginių pasaulyje sklandus ekrano orientacijos valdymas yra labai svarbus norint užtikrinti teigiamą vartotojo patirtį. Nesvarbu, ar tai išmanusis telefonas, planšetinis kompiuteris, ar net sulankstomas įrenginys, vartotojai tikisi, kad programėlės sklandžiai prisitaikys, kai jie pasuks savo įrenginį. Šis vadovas pateikia išsamią įrenginio pasukimo valdymo apžvalgą, apimančią įvairias platformas ir metodus, siekiant užtikrinti, kad jūsų programėlės būtų adaptyvios ir patogios vartotojui.

Ekrano Orientacijos Supratimas

Ekrano orientacija nurodo kryptį, kuria turinys rodomas įrenginio ekrane. Dvi pagrindinės orientacijos yra:

• Stačias (Portrait): Ekranas yra aukštesnis nei platesnis. Tai tipinė išmaniųjų telefonų orientacija.
• Gulsčias (Landscape): Ekranas yra platesnis nei aukštesnis. Dažnai teikiama pirmenybė žiūrint vaizdo įrašus ar žaidžiant žaidimus.

Kai kurie įrenginiai ir programėlės taip pat palaiko:

• Apverstas stačias (Reverse Portrait): Stačia orientacija, kai įrenginys pasuktas 180 laipsnių.
• Apverstas gulsčias (Reverse Landscape): Gulsčia orientacija, kai įrenginys pasuktas 180 laipsnių.

Kodėl Reikia Valdyti Ekrano Orientacijos Pokyčius?

Netinkamas ekrano orientacijos pokyčių valdymas gali sukelti įvairių problemų, įskaitant:

• Išdėstymo problemos: Elementai gali būti neteisingai išlygiuoti, apkarpyti arba persidengti.
• Duomenų praradimas: Kai kuriais atvejais, pasukus ekraną, gali būti prarasta veiklos ar programėlės būsena.
• Prasta vartotojo patirtis: Staigus ar neveikiantis vaizdas gali erzinti vartotojus ir pakenkti jūsų programėlės reputacijai.
• Našumo problemos: Dažnas perpiešimas ir išdėstymo skaičiavimai gali paveikti našumą, ypač senesniuose įrenginiuose.

Ekrano Orientacijos Valdymas Skirtingose Platformose

Konkretūs ekrano orientacijos valdymo metodai priklauso nuo platformos, kuriai kuriate. Panagrinėkime keletą populiariausių platformų:

1. Android

„Android“ suteikia kelis mechanizmus ekrano orientacijos pokyčiams valdyti. Dažniausiai naudojami metodai apima:

a. Konfigūracijos Pakeitimai

Pagal numatytuosius nustatymus „Android“ perkrauna „Activity“, kai pasikeičia ekrano orientacija. Tai reiškia, kad vėl iškviečiamas onCreate() metodas, ir visas išdėstymas yra perpiešiamas. Nors tai gali būti naudinga visiškai pertvarkant vartotojo sąsają pagal orientaciją, tai taip pat gali būti neefektyvu, jei reikia tik šiek tiek pakoreguoti išdėstymą.

Norėdami išvengti „Activity“ perkūrimo, galite nurodyti, kad jūsų „Activity“ pati tvarko orientation konfigūracijos pakeitimą AndroidManifest.xml faile:

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

Pridėdami orientation ir screenSize (svarbu API 13 ir aukštesniam lygiui), jūs pranešate sistemai, kad jūsų „Activity“ pati valdys orientacijos pokyčius. Kai ekranas pasisuks, bus iškviestas onConfigurationChanged() metodas.

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

onConfigurationChanged() viduje galite atnaujinti vartotojo sąsają pagal naują orientaciją. Šis metodas yra efektyvesnis nei „Activity“ perkūrimas, nes išvengiama nereikalingo resursų įkėlimo ir išdėstymo perpiešimo.

b. „Activity“ Būsenos Išsaugojimas ir Atkūrimas

Net jei patys tvarkote konfigūracijos pakeitimus, jums vis tiek gali tekti išsaugoti ir atkurti „Activity“ būseną. Pavyzdžiui, jei jūsų „Activity“ turi teksto laukelį, norėsite išsaugoti vartotojo įvestą tekstą, kai ekranas pasisuks.

Galite naudoti onSaveInstanceState() metodą „Activity“ būsenai išsaugoti ir onRestoreInstanceState() metodą jai atkurti.

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

Alternatyviai, galite naudoti „ViewModels“ su „SavedStateHandle“, kad valdytumėte ir išsaugotumėte su vartotojo sąsaja susijusius duomenis per konfigūracijos pakeitimus – tai modernesnis ir rekomenduojamas metodas.

c. Alternatyvūs Išdėstymai

„Android“ leidžia pateikti skirtingus išdėstymo failus skirtingoms ekrano orientacijoms. Galite sukurti atskirus išdėstymo failus res/layout-land/ ir res/layout-port/ kataloguose. Kai ekranas pasisuks, „Android“ automatiškai įkels atitinkamą išdėstymo failą.

Šis metodas yra naudingas, kai vartotojo sąsaja turi gerokai skirtis gulsčioje ir stačioje orientacijoje. Pavyzdžiui, galbūt norėsite rodyti dviejų skilčių išdėstymą gulsčioje orientacijoje ir vienos skilties išdėstymą stačioje.

d. „ConstraintLayout“ Naudojimas

„ConstraintLayout“ yra galingas išdėstymo valdytojas, leidžiantis kurti lanksčius ir prisitaikančius išdėstymus. Su „ConstraintLayout“ galite apibrėžti apribojimus, kurie nurodo, kaip vaizdai turėtų būti pozicionuojami vienas kito ir pagrindinio išdėstymo atžvilgiu. Tai palengvina išdėstymų, prisitaikančių prie skirtingų ekrano dydžių ir orientacijų, kūrimą.

2. iOS

„iOS“ taip pat suteikia mechanizmus ekrano orientacijos pokyčiams valdyti. Štai keletas įprastų metodų:

a. „Auto Layout“

„Auto Layout“ yra apribojimais pagrįsta išdėstymo sistema, leidžianti apibrėžti taisykles, kaip vaizdai turėtų būti pozicionuojami ir keičiamas jų dydis. „Auto Layout“ apribojimai užtikrina, kad jūsų vartotojo sąsaja prisitaikytų prie skirtingų ekrano dydžių ir orientacijų.

Naudodami „Auto Layout“, paprastai apibrėžiate apribojimus, kurie nurodo ryšius tarp vaizdų. Pavyzdžiui, galite apriboti mygtuką, kad jis būtų centruotas horizontaliai ir vertikaliai savo tėviniame vaizde. Kai ekranas pasisuks, „Auto Layout“ variklis automatiškai perskaičiuoja vaizdų pozicijas ir dydžius, kad atitiktų apribojimus.

b. Dydžių Klasės (Size Classes)

Dydžių klasės yra būdas kategorizuoti ekrano dydžius ir orientacijas. „iOS“ apibrėžia dvi dydžių klases: Compact ir Regular. Įrenginys gali turėti skirtingas dydžių klases savo pločiui ir aukščiui. Pavyzdžiui, „iPhone“ stačioje orientacijoje turi Compact pločio ir Regular aukščio dydžių klases. Gulsčioje orientacijoje jis dažnai turi Compact aukščio ir Compact arba Regular pločio, priklausomai nuo modelio.

Galite naudoti dydžių klases, kad pritaikytumėte savo vartotojo sąsają pagal ekrano dydį ir orientaciją. Pavyzdžiui, galbūt norėsite rodyti skirtingą vaizdų rinkinį arba naudoti skirtingus šriftus skirtingoms dydžių klasėms.

Galite konfigūruoti skirtingus apribojimus ir netgi įdiegti/pašalinti vaizdus, atsižvelgiant į dydžių klases, tiesiogiai „Interface Builder“ arba programiškai.

c. „View Controller“ Pasukimo Metodai

„iOS“ suteikia kelis metodus UIViewController klasėje, kurie iškviečiami, kai įrenginys pasisuka:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Iškviečiamas prieš keičiant valdiklio vaizdo dydį perėjimui.
• viewWillLayoutSubviews(): Iškviečiamas prieš pat valdiklio vaizdui išdėstant savo pavaldžius vaizdus.
• viewDidLayoutSubviews(): Iškviečiamas iškart po to, kai valdiklio vaizdas išdėsto savo pavaldžius vaizdus.

Galite perrašyti šiuos metodus, kad atliktumėte pasirinktinius išdėstymo pakeitimus, kai ekranas pasisuka.

d. „Notification Center“

Galite klausytis orientacijos pakeitimo pranešimų naudodami „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. Interneto Svetainių Kūrimas (HTML, CSS, JavaScript)

Interneto svetainių kūrime galite naudoti CSS medijos užklausas ir „JavaScript“ ekrano orientacijos pokyčiams valdyti.

a. CSS Medijos Užklausos (Media Queries)

Medijos užklausos leidžia taikyti skirtingus stilius, atsižvelgiant į ekrano dydį, orientaciją ir kitas charakteristikas. Galite naudoti orientation medijos ypatybę, kad pritaikytumėte stilius konkrečioms orientacijoms.

/* Stačia orientacija */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Gulsčia orientacija */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Galite naudoti medijos užklausas, kad koreguotumėte išdėstymą, šriftus ir kitus stilius pagal orientaciją.

b. JavaScript

Galite naudoti „JavaScript“, kad aptiktumėte ekrano orientacijos pokyčius ir atliktumėte pasirinktinius veiksmus. screen.orientation API suteikia informaciją apie dabartinę orientaciją.

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

Alternatyviai, galite naudoti matchMedia API su medijos užklausomis:

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

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

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

„JavaScript“ gali būti naudojamas dinamiškai koreguoti išdėstymą, įkelti skirtingus resursus ar atlikti kitus veiksmus, atsižvelgiant į orientaciją.

c. Adaptyvaus Dizaino Karkasai (Frameworks)

Karkasai, tokie kaip „Bootstrap“, „Foundation“ ir „Materialize CSS“, suteikia integruotą palaikymą adaptyviam dizainui, palengvindami išdėstymų, prisitaikančių prie skirtingų ekrano dydžių ir orientacijų, kūrimą. Šie karkasai paprastai naudoja tinklelio sistemą ir medijos užklausas lanksčioms ir adaptyvioms vartotojo sąsajoms kurti.

Geriausios Ekrano Orientacijos Valdymo Praktikos

Štai keletas geriausių praktikų, kurių reikėtų nepamiršti valdant ekrano orientacijos pokyčius:

• Venkite nereikalingo „Activity“/„ViewController“ perkūrimo: Jei įmanoma, patys tvarkykite konfigūracijos pakeitimus, kad išvengtumėte „Activity“ ar „ViewController“ perkūrimo pridėtinių išlaidų.
• Išsaugokite ir atkurkite būseną: Visada išsaugokite ir atkurkite „Activity“/„ViewController“ būseną, kad išvengtumėte duomenų praradimo. Naudokite „ViewModels“ patikimesniam būsenos valdymui.
• Naudokite „Auto Layout“ arba „ConstraintLayout“: Šios išdėstymo sistemos palengvina lanksčių ir prisitaikančių išdėstymų kūrimą.
• Testuokite su keliais įrenginiais: Išbandykite savo programėlę su įvairiais įrenginiais, turinčiais skirtingus ekrano dydžius ir orientacijas, kad įsitikintumėte, jog ji veikia teisingai.
• Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų programėlė liktų prieinama vartotojams su negalia, kai ekranas yra pasukamas.
• Pateikite aiškias vizualines užuominas: Jei pasukus ekraną vartotojo sąsaja gerokai pasikeičia, pateikite aiškias vizualines užuominas, kurios padėtų vartotojams suprasti pokyčius.
• Venkite priverstinės orientacijos (nebent tai būtina): Leiskite vartotojams naudoti savo įrenginį pageidaujamoje orientacijoje, kai tik įmanoma. Priverstinė orientacija gali erzinti ir būti nepatogi. Fiksuokite orientaciją tik tada, jei tai yra būtina programėlės funkcionalumui (pvz., žaidimas, kuriam reikalingas gulsčias režimas). Jei fiksuojate orientaciją, aiškiai paaiškinkite vartotojui priežastį.
• Optimizuokite našumą: Sumažinkite darbo, kurį reikia atlikti pasukus ekraną, kiekį, kad išvengtumėte našumo problemų.
• Naudokite santykinius vienetus: Apibrėždami dydžius ir pozicijas savo išdėstyme, naudokite santykinius vienetus (pvz., procentus, dp, sp) vietoj absoliučių vienetų (pvz., pikselių), kad užtikrintumėte, jog jūsų sąsaja tinkamai mastelizuojasi skirtingų dydžių ekranuose.
• Pasinaudokite esamomis bibliotekomis ir karkasais: Pasinaudokite esamomis bibliotekomis ir karkasais, kurie palaiko adaptyvų dizainą ir ekrano orientacijos valdymą.

Orientacijos Fiksavimas ir Vartotojo Patirtis

Nors paprastai geriausia leisti vartotojams laisvai sukioti savo įrenginius, yra situacijų, kai galbūt norėsite užfiksuoti ekrano orientaciją. Pavyzdžiui, viso ekrano vaizdo grotuvas gali užfiksuoti orientaciją į gulsčią režimą optimaliam žiūrėjimui.

Tačiau svarbu orientacijos fiksavimą naudoti saikingai ir pateikti vartotojui aiškią priežastį. Priverstinė orientacija gali erzinti ir padaryti jūsų programėlę mažiau prieinamą.

Kaip Fiksuoti Ekrano Orientaciją

Android

Galite užfiksuoti ekrano orientaciją „Android“ sistemoje nustatydami screenOrientation atributą AndroidManifest.xml faile:

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

Taip pat galite fiksuoti orientaciją programiškai:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

„iOS“ sistemoje galite nurodyti palaikomas orientacijas Info.plist faile. Taip pat galite perrašyti supportedInterfaceOrientations metodą savo valdiklyje:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globalūs Aspektai

Kurdami globaliai auditorijai, atsižvelkite į šiuos dalykus, susijusius su ekrano orientacija:

• Išdėstymai iš dešinės į kairę (RTL): Apsvarstykite, kaip jūsų vartotojo sąsaja prisitaikys prie RTL kalbų. Kai kurios kalbos, pavyzdžiui, arabų ir hebrajų, rašomos iš dešinės į kairę. Užtikrinkite, kad jūsų išdėstymas teisingai atsispindėtų RTL režimu. „Auto Layout“ ir „ConstraintLayout“ dažnai suteikia integruotą palaikymą RTL išdėstymams.
• Kultūrinės preferencijos: Būkite atidūs kultūrinėms preferencijoms, susijusioms su įrenginių naudojimu. Nors dauguma vartotojų yra pripratę prie tiek stačio, tiek gulsčio režimo, kai kuriose kultūrose gali būti subtilių preferencijų. Testavimas su vartotojais iš skirtingų regionų gali suteikti vertingų įžvalgų.
• Prieinamumas įvairiems vartotojams: Visada teikite pirmenybę prieinamumui. Užtikrinkite, kad jūsų programėlė būtų naudojama žmonėms su negalia, nepriklausomai nuo ekrano orientacijos. Tai apima alternatyvaus teksto pateikimą paveikslėliams, pakankamo spalvų kontrasto užtikrinimą ir pagalbinių technologijų palaikymą.

Ekrano Orientacijos Valdymo Testavimas

Kruopštus testavimas yra būtinas norint užtikrinti, kad jūsų programėlė teisingai valdo ekrano orientacijos pokyčius. Štai keletas patarimų testavimui:

• Naudokite emuliatorius ir realius įrenginius: Testuokite savo programėlę tiek emuliatoriuose, tiek realiuose įrenginiuose, kad apimtumėte platesnį ekrano dydžių ir aparatinės įrangos konfigūracijų spektrą.
• Testuokite skirtingose orientacijose: Testuokite savo programėlę tiek stačioje, tiek gulsčioje orientacijoje, taip pat apverstoje stačioje ir apverstoje gulsčioje, jei jos palaikomos.
• Testuokite su skirtingais ekrano dydžiais: Testuokite savo programėlę įrenginiuose su skirtingais ekrano dydžiais, kad įsitikintumėte, jog vartotojo sąsaja tinkamai mastelizuojasi.
• Testuokite su skirtingais šrifto dydžiais: Testuokite savo programėlę su skirtingais šrifto dydžiais, kad įsitikintumėte, jog tekstas lieka įskaitomas.
• Testuokite su įjungtomis prieinamumo funkcijomis: Testuokite savo programėlę su įjungtomis prieinamumo funkcijomis, tokiomis kaip ekrano skaitytuvai, kad įsitikintumėte, jog ji lieka prieinama vartotojams su negalia.
• Automatizuotas testavimas: Įdiekite automatizuotus vartotojo sąsajos testus, kurie apima ekrano orientacijos pakeitimus. Tai gali padėti aptikti regresijas ir užtikrinti nuoseklų elgesį per skirtingus leidimus.

Išvada

Efektyvus ekrano orientacijos valdymas yra kritiškai svarbus mobiliųjų programėlių ir interneto svetainių kūrimo aspektas. Suprasdami skirtingus kiekvienoje platformoje prieinamus metodus ir laikydamiesi geriausių praktikų, galite sukurti programėles, kurios suteikia sklandžią ir malonią vartotojo patirtį, nepriklausomai nuo to, kaip vartotojas laiko savo įrenginį. Nepamirškite teikti pirmenybės testavimui ir atsižvelgti į globalias savo dizaino sprendimų pasekmes, kad užtikrintumėte, jog jūsų programėlė yra prieinama ir patogi įvairialypei auditorijai.