Responsive Design — asoslar, interfeyslarni ekranlarga moslashtirish

Responsive Design nima?

Responsive Design — interfeyslarni qurish usuli bo'lib, unda layout ekran o'lchamiga, yo'nalishiga va mavjud bo'shliqqa reaksiya beradi, elementlarning joylashuvini funksionallikni yo'qotmasdan qayta tashkil qiladi. Bu atama 2010 yilda Ethan Marcotte tomonidan veb-dizayn uchun taklif qilingan, ammo tamoyillar mahalliy mobil ilovalarga to'liq qo'llaniladi.

Mobil ishlanmada responsive design bir xil ilova barcha qurilmalarda to'g'ri ko'rsatilishini anglatadi: iPhone SE (375 pt) dan iPad Pro (1024 pt portretda) gacha va Android smartfonidan (360 dp) planshetgacha (800 dp). Asosiy elementlar: moslashuvchan tarmoq (flexible grid), adaptiv tasvirlar va media so'rovlari framework darajasida (size classes, qualifiers).

Apple Developer Documentation ga ko'ra, ilova universal bo'lishi kerak — iPad uchun alohida yig'ishsiz barcha qurilmalarda ishlashi kerak. Google Play Jetpack WindowManager va canonical layouts orqali adaptive layouts dan foydalanishni tavsiya qiladi. Planshetlarga moslashtirilmaganlik salbiy sharhlarning tez-tez uchraydigan sababidir.

Responsive vs Adaptive Design

Responsive va adaptive atamalari ko'pincha chalkashtiriladi, garchi ular turli yondashuvlarni tavsiflasa ham. Responsive design ekran kengligiga uzluksiz moslashadigan moslashuvchan tarmoqdan foydalanadi. Adaptive design oldindan belgilangan breakpoints uchun qat'iy layoutlardan foydalanadi — ilova ular orasida sakrab o'tadi.

Amalda mobil ilovalar ikkala yondashuvning kombinatsiyasidan foydalanadi. Asosiy tarmoq responsive quriladi (Auto Layout constraint bog'liqliklari bilan) va breakpoint ga erishilganda (masalan, kenglik > 600 pt) layout elementlarning boshqa kompozitsiyasi bilan adaptiv versiyaga o'tadi. iOS Auto Layout (responsive) ni Size Classes (adaptive) bilan birlashtiradi. Android ConstraintLayout (responsive) ni qualifier resurslari (adaptive) bilan birlashtiradi.

iOS Size Classes: Compact va Regular

Size Classes — iOS mexanizmi, ekranning mavjud maydonini ikki o'q bo'yicha tasniflaydi: gorizontal va vertikal. Har bir o'q Compact (C) yoki Regular (R) bo'lishi mumkin. Kombinatsiya layout moslashuvi uchun to'rt variant beradi: CR (oddiy iPhone portret), RR (iPad portret/landshaft), RC (iPhone landshaft Plus/Pro Max da), CC (iPad Split View).

// Swift-da Size Classes aniqlash
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — master-detail ko'rsatish
        case (.compact, .regular):
            showStackedView() // iPhone portret — stack layout
        case (.compact, .compact):
            showCompactView() // iPhone SE landshaft — minimallashtirilgan
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // UISplitViewController yoki HStack dan foydalanamiz
    }

    private func showStackedView() {
        // iPhone uchun vertikal stack
    }

    private func showCompactView() {
        // Ikkilamchi elementlarni yashiramiz, asosiylarini ko'rsatamiz
    }
}

Interface Builder da Size Classes „wAny hAny” paneli orqali sozlanadi — dasturchi ma'lum kombinatsiyani tanlaydi (wRegular hRegular, wCompact hRegular) va constraint variatsiyalarini qo'shadi. SwiftUI reaktiv moslashish uchun @Environment(\.horizontalSizeClass) va @Environment(\.verticalSizeClass) dan foydalanadi — yo'nalish yoki oyna o'lchami o'zgarganda SwiftUI avtomatik ravishda view ni qayta chizadi.

// SwiftUI-dagi Size Classes
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — yon panel bilan gorizontal layout
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — to'liq ekran vertikal stack
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — Android mexanizmi, qurilma xususiyatlariga qarab turli resurslarni (layout, values, drawables) yuklash uchun. Kvalifikatorlar ekran o'lchami (small, normal, large, xlarge), yo'nalish (port, land), minimal kenglik (swdp), mavjud kenglik (wdp) va balandlik (hdp) ni o'z ichiga oladi.

// Kotlin-da qurilma konfiguratsiyasini aniqlash
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

Turli ekranlar uchun resurs tuzilishi: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (planshet 7"), res/layout-sw720dp/activity_main.xml (planshet 10"). Android smallestWidth asosida to'g'ri layout ni avtomatik tanlaydi — yo'nalishdan qat'iy nazar ekranning dp dagi minimal kengligi. swdp kvalifikatori — eng barqaror moslashish usuli.

// Jetpack Compose — moslashtirish uchun WindowSizeClass
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager (androidx.window kutubxonasi) uch kenglik kategoriyasi bilan WindowSizeClass ni taqdim etadi: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Bu eski qualifier papkalariga zamonaviy alternativadir. Google tomonidan yig'iladigan qurilmalar va planshetlarga moslashish uchun tavsiya etiladi.

Adaptiv tarmoq va breakpoints

Adaptiv tarmoq responsive design ning asosidir. Ruxsat etilgan o'lchamlar o'rniga elementlar foiz nisbatlari, moslashuvchan cheklovlar va intrinsic content size dan foydalanadi. Breakpoints — ekran kengligining nuqtalari, ularga erishilganda layout holatlar o'rtasida o'tadi.

Google Material Design va Apple HIG tomonidan tavsiya etilgan breakpoints: 0–599 dp (telefon, bitta ustun), 600–839 dp (planshet, ikki ustun, navigation rail), 840+ dp (planshet, uch ustun, navigation drawer). Breakpoints soni 4 dan oshmasligi kerak — haddan tashqari ko'p o'tish nuqtalari qo'llab-quvvatlash va testlashni murakkablashtiradi.

Adaptiv dizaynning eng yaxshi amaliyotlari

Muvaffaqiyatli responsive design so'nggi o'n yillikda iOS va Android dasturchilari jamoasi tomonidan ishlab chiqilgan qoidalar to'plamiga rioya qilishni talab qiladi. Quyida Apple HIG, Google Material Design va ishlab chiqarish loyihalari tajribasiga asoslangan asosiy tavsiyalar keltirilgan.

• Eng kichik ekrandan boshlang — layout ni iPhone SE (375 pt) yoki Android compact (360 dp) uchun loyihalashtiring, so'ng katta ekranlar uchun kengaytmalar qo'shing. Bu muhim tarkibning hamma joyga sig'ishini kafolatlaydi
• Intrinsic content size dan foydalaning — UILabel, UIButton, ImageView tabiiy o'lchamga ega. Auto Layout va ConstraintLayout uni keraksiz cheklovlarsiz avtomatik joylashtirish uchun ishlatadi
• Kichik ekranlarda tarkibni yashirmang — yashirish o'rniga qayta guruhlang (reflow). Foydalanuvchi bir xil funksionallikka, faqat boshqa ketma-ketlikda kirish imkoniga ega bo'lishi kerak
• Barcha size classes larda test qiling — iOS simulyatori Size Classes larni qayta ishga tushirmasdan o'zgartirish imkonini beradi. Android Emulator turli qurilma profillarini taqdim etadi. Planshetlar va yig'iladigan qurilmalarda majburiy test qiling
• Material 3 Adaptive Layout — Google ro'yxat/tafsilotlar, asboblar panellari va navigatsiya uchun tayyor canonical layouts ni taqdim etadi. O'z na'munalaringizni ixtiro qilish o'rniga ulardan foydalaning

Adaptiv dizaynning asosiy tamoyili: tarkib layout ni belgilaydi, aksincha emas. Agar iPad da iPhone dagi kabi kartalar to'plami, faqat eniga cho'zilgan holda ko'rsatilsa — bu responsive design emas. Responsive design kompozitsiyani qayta o'ylaydi: iPhone da — vertikal scroll, iPad da — yon panel bilan master-detail.