Responsive Design — əsaslar, interfeyslərin ekranlara uyğunlaşdırılması

Responsive Design nədir?

Responsive Design — interfeyslərin qurulması metodu, burada layout ekran ölçüsünə, oriyentasiyaya və mövcud boşluğa reaksiya verərək elementlərin yerini funksionallığı itirmədən yenidən təşkil edir. Termin 2010-cu ildə Ethan Marcotte tərəfindən veb dizayn üçün təklif edilmişdir, lakin prinsiplər yerli mobil tətbiqlərə tamamilə tətbiq olunur.

Mobil inkişafda responsive design o deməkdir ki, eyni tətbiq bütün cihazlarda düzgün göstərilir: iPhone SE-dən (375 pt) iPad Pro-ya qədər (1024 pt portretdə) və Android smartfonundan (360 dp) planşetə qədər (800 dp). əsas elementlər: çevik şəbəkə (flexible grid), adaptiv şəkillər və media sorğuları framework səviyyəsində (size classes, qualifiers).

Apple Developer Documentation-a görə, tətbiq universal olmalıdır — iPad üçün ayrıca qurma olmadan bütün cihazlarda işləməlidir. Google Play Jetpack WindowManager və canonical layouts vasitəsilə adaptive layouts-un istifadəsini tövsiyə edir. Planşetlərə uyğarlaşmanın olmaması mənfi rəylərin tez-tez səbəbidir.

Responsive vs Adaptive Design

Responsive və adaptive terminləri tez-tez qarışdırılır, baxmayaraq ki, onlar fərqli yanaşmaları təsvir edir. Responsive design ekranın eninə fasiləsiz uyğarlaşan çevik şəbəkədən istifadə edir. Adaptive design əvvəlcədən müəyyən edilmiş breakpoints üçün sabit layoutlardan istifadə edir — tətbiq onlar arasında sıçrayaraq keçid edir.

Praktikada mobil tətbiqlər hər iki yanaşmanın kombinasiyasından istifadə edir. Əsas şəbəkə responsive qurulur (Auto Layout constraint asılılıqları ilə), və breakpoint-ə çatdıqda (məs. en > 600 pt) layout elementlərin fərqli kompozisiyası ilə adaptiv versiyaya keçir. iOS Auto Layout (responsive) ilə Size Classes (adaptive) birləşdirir. Android ConstraintLayout (responsive) ilə qualifier resurslarını (adaptive) birləşdirir.

iOS Size Classes: Compact və Regular

Size Classes — iOS mexanizmi, ekranın mövcud sahəsini iki ox üzrə təsnif edir: üfqi və şaquli. Hər bir ox Compact (C) və ya Regular (R) ola bilər. Kombinasiya layout uyğarlaşdırma üçün dörd variant verir: CR (adi iPhone portret), RR (iPad portret/landşaft), RC (iPhone landşaft Plus/Pro Max), CC (iPad Split View).

// Swift-də Size Classes-in təyini
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 göstər
        case (.compact, .regular):
            showStackedView() // iPhone portret — yığın layout
        case (.compact, .compact):
            showCompactView() // iPhone SE landşaft — minimallaşdırılmış
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // UISplitViewController və ya HStack istifadə edirik
    }

    private func showStackedView() {
        // iPhone üçün şaquli yığın
    }

    private func showCompactView() {
        // İkinci dərəcəli elementləri gizlət, əsasları göstər
    }
}

Interface Builder-də Size Classes „wAny hAny” paneli vasitəsilə konfiqurasiya edilir — proqramçı müəyyən kombinasiyanı seçir (wRegular hRegular, wCompact hRegular) və constraint varyasiyaları əlavə edir. SwiftUI reaktiv uyğarlaşma üçün @Environment(\.horizontalSizeClass) və @Environment(\.verticalSizeClass) istifadə edir — oriyentasiya və ya pəncərə ölçüsü dəyişdikdə SwiftUI avtomatik olaraq görünüşü yenidən çəkir.

// SwiftUI-də Size Classes
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — yan panel ilə üfüqi layout
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — tam ekran şaquli yığın
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — Android mexanizmi, cihazın xarakteristikasından asılı olaraq müxtəlif resursları (layout, values, drawables) yükləmək üçün. Kvalifikatorlara ekran ölçüsü (small, normal, large, xlarge), oriyentasiya (port, land), minimal en (swdp), mövcud en (wdp) və hündürlük (hdp) daxildir.

// Kotlin-də cihaz konfiqurasiyasının təyini
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()
        }
    }
}

Müxtəlif ekranlar üçün resurs strukturu: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (planşet 7"), res/layout-sw720dp/activity_main.xml (planşet 10"). Android smallestWidth əsasında düzgün layout-u avtomatik seçir — oriyentasiyadan asılı olmayaraq ekranın dp-də minimal eni. swdp kvalifikatoru — ən stabil uyğarlaşma üsulu.

// Jetpack Compose — uyğunlaşma üçün 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 kitabxanası) üç en kateqoriyası ilə WindowSizeClass təmin edir: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Bu köhnə qualifier qovluqlarına müasir alternativdir. Qatlanan cihazlar və planşetlər üçün Google tərəfindən tövsiyə olunur.

Adaptiv şəbəkə və breakpoints

Adaptiv şəbəkə responsive design-in əsasıdır. Sabit ölçülər əvəzinə elementlər faiz nisbətləri, çevik məhdudiyyətlər və intrinsic content size istifadə edir. Breakpoints — ekran eninin nöqtələri, çatdıqda layout vəziyyətlər arasında keçid edir.

Google Material Design və Apple HIG tərəfindən tövsiyə olunan breakpoints: 0–599 dp (telefon, bir sütun), 600–839 dp (planşet, iki sütun, navigation rail), 840+ dp (planşet, üç sütun, navigation drawer). Breakpoints sayı 4-dən çox olmamalıdır — həddindən çox keçid nöqtəsi dəstək və testi çətinləşdirir.

Adaptiv dizaynın ən yaxşı təcrübələri

Uğurlu responsive design son onillikdə iOS və Android proqramçıları icması tərəfindən işlənmiş qaydalar toplusuna riayət etməyi tələb edir. Aşağıda Apple HIG, Google Material Design və istehsal layihələri təcrübəsinə əsaslanan əsas tövsiyələr verilmişdir.

• Ən kiçik ekrandan başlayın — layout-u iPhone SE (375 pt) və ya Android compact (360 dp) üçün dizayn edin, sonra böyük ekranlar üçün genişləndirmələr əlavə edin. Bu, kritik məzmunun hər yerdə sığdığını təmin edir
• Intrinsic content size istifadə edin — UILabel, UIButton, ImageView təbii ölçüyə malikdir. Auto Layout və ConstraintLayout onu lazımsız məhdudiyyətlər olmadan avtomatik yerləşdirmə üçün istifadə edir
• Kiçik ekranlarda məzmunu gizlətməyin — gizlətmək əvəzinə yenidən qruplaşdırın (reflow). İstifadəçi eyni funksionallığa, sadəcə fərqli ardıcıllıqla giriş əldə etməlidir
• Bütün size classes-larda test edin — iOS simulyatoru Size Classes-ları yenidən başlatmadan dəyişməyə imkan verir. Android Emulator müxtəlif cihaz profilləri təmin edir. Planşetlərdə və qatlanan cihazlarda mütləq test edin
• Material 3 Adaptive Layout — Google siyahı/detallar, alət panelləri və naviqasiya üçün hazır canonical layouts təmin edir. Öz nümunələrinizi icad etmək əvəzinə onlardan istifadə edin

Adaptiv dizaynın əsas prinsipi: məzmun layout-u müyyənləşdirir, əksinə yox. Əgər iPad-də iPhone-dakı kimi eyni kart yığını, sadəcə eninə uzanmış şəkildə göstərilirsə — bu responsive design deyil. Responsive design kompozisiyanı yenidən düşünür: iPhone-da — şaquli scroll, iPad-də — yan panel ilə master-detail.