Ekran Orientatsiyasini O'zlashtirish: Qurilma Aylanishini Boshqarish Bo'yicha To'liq Qo'llanma

Bugungi ko'p qurilmali dunyoda ekran orientatsiyasini to'g'ri boshqarish ijobiy foydalanuvchi tajribasini ta'minlash uchun juda muhimdir. Smartfon, planshet yoki hatto buklanadigan qurilma bo'ladimi, foydalanuvchilar o'z qurilmalarini aylantirganda ilovalarning muammosiz moslashishini kutishadi. Ushbu qo'llanma qurilma aylanishini boshqarish bo'yicha keng qamrovli ma'lumot beradi, turli platformalar va texnikalarni qamrab olib, ilovalaringizning moslashuvchan va foydalanuvchilar uchun qulay bo'lishini ta'minlaydi.

Ekran Orientatsiyasini Tushunish

Ekran orientatsiyasi kontentning qurilma ekranida qaysi yo'nalishda ko'rsatilishini anglatadi. Ikkita asosiy orientatsiya mavjud:

• Portret: Ekran enidan balandroq. Bu smartfonlar uchun odatiy orientatsiya.
• Landshaft: Ekran balandligidan kengroq. Bu ko'pincha video ko'rish yoki o'yin o'ynash uchun afzal ko'riladi.

Ba'zi qurilmalar va ilovalar quyidagilarni ham qo'llab-quvvatlaydi:

• Teskari Portret: Qurilma 180 darajaga aylantirilgan portret orientatsiyasi.
• Teskari Landshaft: Qurilma 180 darajaga aylantirilgan landshaft orientatsiyasi.

Nima Uchun Ekran Orientatsiyasi O'zgarishlarini Boshqarish Kerak?

Ekran orientatsiyasi o'zgarishlarini boshqara olmaslik turli muammolarga olib kelishi mumkin, jumladan:

• Maket muammolari: Elementlar noto'g'ri joylashishi, qirqilishi yoki bir-birining ustiga chiqib qolishi mumkin.
• Ma'lumotlar yo'qolishi: Ba'zi hollarda, activity yoki ilova holati yo'qolishi mumkin.
• Yomon foydalanuvchi tajribasi: Keskin yoki buzilgan tajriba foydalanuvchilarni hafsalasini pir qilishi va ilovangiz obro'siga putur yetkazishi mumkin.
• Ishlash samaradorligi muammolari: Tez-tez qayta renderlash va maketni hisoblash, ayniqsa eski qurilmalarda, ishlash samaradorligiga ta'sir qilishi mumkin.

Turli Platformalarda Ekran Orientatsiyasini Boshqarish

Ekran orientatsiyasini boshqarishning o'ziga xos usullari siz ishlayotgan platformaga bog'liq. Keling, eng mashhur platformalardan ba'zilarini ko'rib chiqaylik:

1. Android

Android ekran orientatsiyasi o'zgarishlarini boshqarish uchun bir nechta mexanizmlarni taqdim etadi. Eng keng tarqalgan yondashuvlar quyidagilarni o'z ichiga oladi:

a. Konfiguratsiya o'zgarishlari

Standart holatda, Android ekran orientatsiyasi o'zgarganda Activity'ni qayta yaratadi. Bu `onCreate()` metodi yana chaqirilishini va butun maketning qayta yuklanishini anglatadi. Bu orientatsiyaga qarab UI'ni to'liq qayta qurish uchun foydali bo'lishi mumkin bo'lsa-da, agar sizga shunchaki maketni biroz o'zgartirish kerak bo'lsa, bu samarasiz bo'lishi mumkin.

Activity'ning qayta yaratilishini oldini olish uchun, `AndroidManifest.xml` faylida o'z Activity'ngiz `orientation` konfiguratsiya o'zgarishini boshqarishini e'lon qilishingiz mumkin:

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

`orientation` va `screenSize` (API darajasi 13 va undan yuqorilar uchun muhim) qo'shish orqali siz tizimga o'z Activity'ngiz orientatsiya o'zgarishlarini o'zi boshqarishini aytasiz. Ekran aylantirilganda, `onConfigurationChanged()` metodi chaqiriladi.

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

 // Ekran orientatsiyasini tekshirish
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landshaft", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portret", Toast.LENGTH_SHORT).show();
 }
}

`onConfigurationChanged()` ichida siz UI'ni yangi orientatsiyaga qarab yangilashingiz mumkin. Bu yondashuv Activity'ni qayta yaratishdan ko'ra samaraliroq, chunki u keraksiz resurslarni yuklash va maketni chizishdan saqlaydi.

b. Activity Holatini Saqlash va Tiklash

Agar siz konfiguratsiya o'zgarishini o'zingiz boshqarsangiz ham, sizga Activity holatini saqlash va tiklash kerak bo'lishi mumkin. Masalan, agar sizning Activity'ngizda matn maydoni bo'lsa, ekran aylantirilganda foydalanuvchi kiritgan matnni saqlab qolishni xohlaysiz.

Activity holatini saqlash uchun `onSaveInstanceState()` metodidan va uni tiklash uchun `onRestoreInstanceState()` metodidan foydalanishingiz mumkin.

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

Shu bilan bir qatorda, konfiguratsiya o'zgarishlari davomida UI bilan bog'liq ma'lumotlarni boshqarish va saqlash uchun SavedStateHandle bilan ViewModels'dan foydalanishingiz mumkin, bu zamonaviyroq va tavsiya etilgan yondashuvdir.

c. Muqobil Maketlar

Android turli ekran orientatsiyalari uchun turli xil maket fayllarini taqdim etishga imkon beradi. Siz `res/layout-land/` va `res/layout-port/` kataloglarida alohida maket fayllarini yaratishingiz mumkin. Ekran aylantirilganda, Android avtomatik ravishda tegishli maket faylini yuklaydi.

Bu yondashuv UI landshaft va portret orientatsiyalarida sezilarli darajada farq qilishi kerak bo'lganda foydalidir. Masalan, siz landshaft rejimida ikki panelli maketni va portret rejimida bir panelli maketni ko'rsatishni xohlashingiz mumkin.

d. ConstraintLayout'dan Foydalanish

ConstraintLayout - bu moslashuvchan va adaptiv maketlar yaratishga imkon beruvchi kuchli maket menejeri. ConstraintLayout yordamida siz ko'rinishlarning bir-biriga va ota-maketga nisbatan qanday joylashishini belgilaydigan cheklovlarni aniqlashingiz mumkin. Bu turli ekran o'lchamlari va orientatsiyalariga moslashadigan maketlar yaratishni osonlashtiradi.

2. iOS

iOS ham ekran orientatsiyasi o'zgarishlarini boshqarish uchun mexanizmlarni taqdim etadi. Mana ba'zi keng tarqalgan yondashuvlar:

a. Auto Layout

Auto Layout - bu ko'rinishlarning qanday joylashishi va o'lchamlanishi kerakligi qoidalarini belgilashga imkon beruvchi cheklovlarga asoslangan maket tizimi. Auto Layout cheklovlari sizning UI'ngiz turli ekran o'lchamlari va orientatsiyalariga moslashishini ta'minlaydi.

Auto Layout'dan foydalanganda, siz odatda ko'rinishlar orasidagi munosabatlarni belgilaydigan cheklovlarni aniqlaysiz. Masalan, siz tugmani ota ko'rinishi ichida gorizontal va vertikal ravishda markazlashtirish uchun cheklashingiz mumkin. Ekran aylantirilganda, Auto Layout mexanizmi cheklovlarni qondirish uchun ko'rinishlarning pozitsiyalari va o'lchamlarini avtomatik ravishda qayta hisoblaydi.

b. O'lcham Sinf (Size Classes)lari

O'lcham sinflari (Size classes) ekran o'lchamlari va orientatsiyalarini tasniflash usulidir. iOS ikkita o'lcham sinfini belgilaydi: `Compact` va `Regular`. Qurilmaning eni va bo'yi uchun turli xil o'lcham sinflari bo'lishi mumkin. Masalan, portret orientatsiyasidagi iPhone'ning eni `Compact` va bo'yi `Regular` o'lcham sinfiga ega. Landshaft rejimida esa, modeliga qarab, odatda bo'yi `Compact` va eni `Compact` yoki `Regular` bo'ladi.

Siz ekran o'lchami va orientatsiyasiga qarab o'z UI'ngizni sozlash uchun o'lcham sinflaridan foydalanishingiz mumkin. Masalan, siz turli o'lcham sinflari uchun turli xil ko'rinishlar to'plamini ko'rsatishni yoki turli shriftlardan foydalanishni xohlashingiz mumkin.

Siz to'g'ridan-to'g'ri Interface Builder'da yoki dasturiy ravishda o'lcham sinflariga asoslangan holda turli cheklovlarni sozlashingiz va hatto ko'rinishlarni o'rnatishingiz/o'chirishingiz mumkin.

c. View Controller Aylanish Metodlari

iOS UIViewController sinfida qurilma aylantirilganda chaqiriladigan bir nechta metodlarni taqdim etadi:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): View controller'ning ko'rinishi o'tish uchun o'lchami o'zgartirilishidan oldin chaqiriladi.
• viewWillLayoutSubviews(): View controller'ning ko'rinishi o'zining quyi ko'rinishlarini joylashtirishidan oldin chaqiriladi.
• viewDidLayoutSubviews(): View controller'ning ko'rinishi o'zining quyi ko'rinishlarini joylashtirganidan so'ng chaqiriladi.

Ekran aylantirilganda maxsus maket sozlamalarini bajarish uchun siz ushbu metodlarni qayta yozishingiz mumkin.

d. Bildirishnomalar Markazi (Notification Center)

Siz Notification Center yordamida orientatsiya o'zgarishi haqidagi bildirishnomalarni tinglashingiz mumkin:

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

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

3. Veb-dasturlash (HTML, CSS, JavaScript)

Veb-dasturlashda siz ekran orientatsiyasi o'zgarishlarini boshqarish uchun CSS media so'rovlari va JavaScript'dan foydalanishingiz mumkin.

a. CSS Media So'rovlari

Media so'rovlari ekran o'lchami, orientatsiyasi va boshqa xususiyatlariga qarab turli xil uslublarni qo'llashga imkon beradi. Siz ma'lum orientatsiyalarni nishonga olish uchun `orientation` media xususiyatidan foydalanishingiz mumkin.

/* Portret orientatsiyasi */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Landshaft orientatsiyasi */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Siz orientatsiyaga qarab maket, shriftlar va boshqa uslublarni sozlash uchun media so'rovlaridan foydalanishingiz mumkin.

b. JavaScript

Siz ekran orientatsiyasi o'zgarishlarini aniqlash va maxsus amallarni bajarish uchun JavaScript'dan foydalanishingiz mumkin. `screen.orientation` API joriy orientatsiya haqida ma'lumot beradi.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landshaft");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portret");
 } else {
 console.log("Noma'lum orientatsiya");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Shu bilan bir qatorda, siz media so'rovlari bilan `matchMedia` API'dan foydalanishingiz mumkin:

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

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landshaft");
 } else {
 console.log("Portret");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript orientatsiyaga qarab maketni dinamik ravishda sozlash, turli resurslarni yuklash yoki boshqa amallarni bajarish uchun ishlatilishi mumkin.

c. Moslashuvchan Dizayn Freyvorklari

Bootstrap, Foundation va Materialize CSS kabi freyvorklar moslashuvchan dizaynni qo'llab-quvvatlaydi, bu esa turli ekran o'lchamlari va orientatsiyalariga moslashadigan maketlar yaratishni osonlashtiradi. Bu freyvorklar odatda moslashuvchan va sezgir UI yaratish uchun setka tizimi va media so'rovlaridan foydalanadi.

Ekran Orientatsiyasini Boshqarish Bo'yicha Eng Yaxshi Amaliyotlar

Ekran orientatsiyasi o'zgarishlarini boshqarishda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Keraksiz Activity/ViewController qayta yaratilishidan saqlaning: Iloji bo'lsa, Activity yoki ViewController'ni qayta yaratish bilan bog'liq ortiqcha yuklardan saqlanish uchun konfiguratsiya o'zgarishini o'zingiz boshqaring.
• Holatni saqlang va tiklang: Ma'lumotlar yo'qolishining oldini olish uchun har doim Activity/ViewController holatini saqlang va tiklang. Holatni yanada mustahkam boshqarish uchun ViewModels'dan foydalaning.
• Auto Layout yoki ConstraintLayout'dan foydalaning: Bu maket tizimlari moslashuvchan va adaptiv maketlar yaratishni osonlashtiradi.
• Bir nechta qurilmalarda sinab ko'ring: Ilovangizning to'g'ri ishlashiga ishonch hosil qilish uchun uni turli ekran o'lchamlari va orientatsiyalariga ega bo'lgan turli xil qurilmalarda sinab ko'ring.
• Maxsus imkoniyatlarni hisobga oling: Ekran aylantirilganda ilovangiz nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lib qolishiga ishonch hosil qiling.
• Aniq vizual belgilarni taqdim eting: Agar ekran aylantirilganda UI sezilarli darajada o'zgarsa, foydalanuvchilarga o'zgarishlarni tushunishga yordam berish uchun aniq vizual belgilarni taqdim eting.
• Maxsus orientatsiyani majburlashdan saqlaning (agar zarur bo'lmasa): Foydalanuvchilarga o'z qurilmalaridan o'zlari afzal ko'rgan orientatsiyada foydalanishga imkon bering. Orientatsiyani majburlash asabiylashtiruvchi va noqulay bo'lishi mumkin. Orientatsiyani faqat ilova funksionalligi uchun juda muhim bo'lsa (masalan, landshaft rejimini talab qiladigan o'yin) qulflang. Agar orientatsiyani qulflasangiz, sababini foydalanuvchiga aniq tushuntiring.
• Ishlash samaradorligi uchun optimallashtiring: Ishlash muammolaridan saqlanish uchun ekran aylantirilganda bajarilishi kerak bo'lgan ish hajmini minimallashtiring.
• Nisbiy birliklardan foydalaning: Maketingizda o'lchamlar va pozitsiyalarni belgilashda, UI'ngiz turli ekran o'lchamlarida to'g'ri masshtablanishini ta'minlash uchun mutlaq birliklar (masalan, piksellar) o'rniga nisbiy birliklardan (masalan, foizlar, `dp`, `sp`) foydalaning.
• Mavjud kutubxonalar va freyvorklardan foydalaning: Moslashuvchan dizayn va ekran orientatsiyasini boshqarishni qo'llab-quvvatlaydigan mavjud kutubxonalar va freyvorklardan foydalaning.

Orientatsiyani Qulflash va Foydalanuvchi Tajribasi

Odatda foydalanuvchilarga o'z qurilmalarini erkin aylantirishga ruxsat berish eng yaxshi amaliyot bo'lsa-da, ekran orientatsiyasini qulflashni xohlaydigan holatlar mavjud. Masalan, to'liq ekranli video pleyer optimal ko'rish uchun orientatsiyani landshaft rejimiga qulflashi mumkin.

Biroq, orientatsiyani qulflashdan tejamkorlik bilan foydalanish va foydalanuvchiga aniq sababni ko'rsatish muhim. Orientatsiyani majburlash asabiylashtiruvchi bo'lishi va ilovangizni kamroq qulay qilishi mumkin.

Ekran Orientatsiyasini Qanday Qulflash Kerak

Android

Siz Android'da `AndroidManifest.xml` faylidagi `screenOrientation` atributini o'rnatish orqali ekran orientatsiyasini qulflashingiz mumkin:

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

Shuningdek, orientatsiyani dasturiy ravishda qulflashingiz mumkin:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

iOS'da siz `Info.plist` faylida qo'llab-quvvatlanadigan orientatsiyalarni belgilashingiz mumkin. Shuningdek, view controller'ingizda `supportedInterfaceOrientations` metodini qayta yozishingiz mumkin:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Global Jihatlar

Global auditoriya uchun loyihalashda, ekran orientatsiyasiga oid quyidagilarni yodda tuting:

• O'ngdan-chapga (RTL) Maketlar: UI'ngiz RTL tillariga qanday moslashishini o'ylab ko'ring. Arab va ibroniy kabi ba'zi tillar o'ngdan chapga yoziladi. Maketingiz RTL rejimida to'g'ri aks etishiga ishonch hosil qiling. Auto Layout va ConstraintLayout ko'pincha RTL maketlarini qo'llab-quvvatlaydi.
• Madaniy Afzalliklar: Qurilmadan foydalanish bilan bog'liq madaniy afzalliklarni yodda tuting. Aksariyat foydalanuvchilar portret va landshaft rejimlariga o'rganib qolgan bo'lsa-da, ba'zi madaniyatlarda nozik afzalliklar bo'lishi mumkin. Turli mintaqalardagi foydalanuvchilar bilan test o'tkazish qimmatli ma'lumotlar berishi mumkin.
• Turli Foydalanuvchilar uchun Maxsus Imkoniyatlar: Har doim maxsus imkoniyatlarga ustuvorlik bering. Ilovangiz ekran orientatsiyasidan qat'i nazar, nogironligi bo'lgan odamlar tomonidan foydalanish mumkinligiga ishonch hosil qiling. Bunga rasmlar uchun muqobil matn taqdim etish, yetarli rang kontrastini ta'minlash va yordamchi texnologiyalarni qo'llab-quvvatlash kiradi.

Ekran Orientatsiyasini Boshqarishni Sinovdan O'tkazish

Ilovangiz ekran orientatsiyasi o'zgarishlarini to'g'ri boshqarishiga ishonch hosil qilish uchun puxta sinovdan o'tkazish juda muhim. Sinov uchun ba'zi maslahatlar:

• Emulyatorlar va haqiqiy qurilmalardan foydalaning: Kengroq ekran o'lchamlari va apparat konfiguratsiyalarini qamrab olish uchun ilovangizni ham emulyatorlarda, ham haqiqiy qurilmalarda sinab ko'ring.
• Turli orientatsiyalarda sinab ko'ring: Agar qo'llab-quvvatlansa, ilovangizni portret va landshaft orientatsiyalarida, shuningdek, teskari portret va teskari landshaft rejimlarida sinab ko'ring.
• Turli ekran o'lchamlarida sinab ko'ring: UI to'g'ri masshtablanishiga ishonch hosil qilish uchun ilovangizni turli ekran o'lchamlariga ega qurilmalarda sinab ko'ring.
• Turli shrift o'lchamlarida sinab ko'ring: Matn o'qilishi mumkinligiga ishonch hosil qilish uchun ilovangizni turli shrift o'lchamlarida sinab ko'ring.
• Maxsus imkoniyatlar yoqilgan holda sinab ko'ring: Ilovangiz nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lib qolishiga ishonch hosil qilish uchun ekran o'quvchilari kabi maxsus imkoniyatlar yoqilgan holda sinab ko'ring.
• Avtomatlashtirilgan Sinov: Ekran orientatsiyasi o'zgarishlarini qamrab oladigan avtomatlashtirilgan UI testlarini joriy qiling. Bu regressiyalarni aniqlashga va relizlar bo'ylab izchil xatti-harakatni ta'minlashga yordam beradi.

Xulosa

Ekran orientatsiyasini samarali boshqarish mobil va veb-dasturlashning muhim jihatidir. Har bir platformada mavjud bo'lgan turli usullarni tushunib, eng yaxshi amaliyotlarga rioya qilish orqali siz foydalanuvchi qurilmasini qanday ushlashidan qat'i nazar, uzluksiz va yoqimli foydalanuvchi tajribasini ta'minlaydigan ilovalar yaratishingiz mumkin. Ilovangiz turli auditoriyalar uchun qulay va foydalanuvchiga do'stona bo'lishini ta'minlash uchun sinovdan o'tkazishga ustuvorlik berishni va dizayn tanlovlaringizning global oqibatlarini hisobga olishni unutmang.