Responsive Design — alapok, felületek adaptálása képernyőkhöz

Mi az a Responsive Design?

Responsive Design – egy módszer a felületek építéséhez, ahol az elrendezés reagál a képernyő méretére, tájolására és rendelkezésre álló helyre, átrendezve az elemeket a funkcionalitás elvesztése nélkül. A kifejezést Ethan Marcotte javasolta 2010-ben webfejlesztéshez, de az elvek teljes mértékben alkalmazhatók natív mobil alkalmazásokra.

A mobil fejlesztésben a responsive design azt jelenti, hogy ugyanaz az alkalmazás minden eszközön helyesen jelenik meg: iPhone SE-től (375 pt) iPad Pro-ig (1024 pt portréban) és Android okostelefontól (360 dp) tabletig (800 dp). A legfontosabb elemek: rugalmas rács (flexible grid), adaptív képek és media queries keretrendszer szinten (size classes, qualifiers).

Az Apple Developer Documentation szerint az alkalmazásnak univerzálisnak kell lennie – minden eszközön működnie kell külön iPad fordítás nélkül. A Google Play az adaptive layouts használatát javasolja Jetpack WindowManager és canonical layouts segítségével. A tabletekhez való alkalmazkodás hiánya gyakori oka a negatív értékeléseknek.

Responsive vs Adaptive Design

A responsive és adaptive kifejezéseket gyakran összekeverik, bár különböző megközelítéseket írnak le. A Responsive design rugalmas rácshálózatot használ, amely folyamatosan alkalmazkodik a képernyő szélességéhez. Az Adaptive design rögzített elrendezéseket használ előre meghatározott breakpoints-okhoz – az alkalmazás ugrásszerűen vált közöttük.

A gyakorlatban a mobil alkalmazások mindkét megközelítés kombinációját használják. Az alap rács responsive módon épül (Auto Layout constraint függőségekkel), és a breakpoint elérésekor (pl. szélesség > 600 pt) az elrendezés átvált egy adaptív verzióra más elemkompozícióval. Az iOS az Auto Layout-ot (responsive) kombinálja a Size Classes-szal (adaptive). Az Android a ConstraintLayout-ot (responsive) kombinálja a qualifier erőforrásokkal (adaptive).

iOS Size Classes: Compact és Regular

Size Classes – iOS mechanizmus, amely a rendelkezésre álló képernyőterületet két tengely mentén osztályozza: vízszintes és függőleges. Minden tengely lehet Compact (C) vagy Regular (R). A kombináció négy változatot ad az elrendezés adaptálásához: CR (általános iPhone portré), RR (iPad portré/fekvő), RC (iPhone fekvő Plus/Pro Max-en), CC (iPad Split View).

// Size Classes meghatározása Swiftben
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 mutatása
        case (.compact, .regular):
            showStackedView() // iPhone portré — stack elrendezés
        case (.compact, .compact):
            showCompactView() // iPhone SE fekvő — minimalizált
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // UISplitViewController vagy HStack használata
    }

    private func showStackedView() {
        // Függőleges stack iPhone-hoz
    }

    private func showCompactView() {
        // Másodlagos elemek elrejtése, fő elemek mutatása
    }
}

Az Interface Builder-ben a Size Classes a „wAny hAny” panelen keresztül konfigurálható – a fejlesztő kiválaszt egy adott kombinációt (wRegular hRegular, wCompact hRegular) és constraint variációkat ad hozzá. A SwiftUI a @Environment(\.horizontalSizeClass) és @Environment(\.verticalSizeClass) segítségével reagál az alkalmazkodáshoz – tájolás vagy ablakméret változásakor a SwiftUI automatikusan újrarajzolja a nézetet.

// Size Classes a SwiftUI-ban
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — vízszintes elrendezés oldalsó panellel
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — teljes képernyős függőleges stack
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers – Android mechanizmus különböző erőforrások (layout, values, drawables) betöltéséhez az eszköz jellemzőitől függően. A minősítők közé tartozik a képernyő mérete (small, normal, large, xlarge), tájolás (port, land), minimális szélesség (swdp), elérhető szélesség (wdp) és magasság (hdp).

// Eszközkonfiguráció meghatározása Kotlinban
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()
        }
    }
}

Erőforrás struktúra különböző képernyőkhöz: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Az Android automatikusan kiválasztja a megfelelő layout-ot a smallestWidth alapján – a képernyő minimális szélessége dp-ben, tájolástól függetlenül. A swdp minősítő – a legstabilabb alkalmazkodási módszer.

// Jetpack Compose — WindowSizeClass az adaptációhoz
@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
        }
    }
}

A Jetpack WindowManager (androidx.window könyvtár) WindowSizeClass-ot biztosít három szélességkategóriával: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Ez egy modern alternatíva a régi qualifier mappákhoz. A Google ajánlja összehajtható eszközökhöz és tabletekhez való alkalmazkodáshoz.

Adaptív rács és breakpoints

Az adaptív rács a responsive design alapja. Rögzített méretek helyett az elemek százalékos arányokat, rugalmas korlátokat és intrinsic content size-t használnak. Breakpoints – képernyőszélességi pontok, amelyek elérésekor az elrendezés állapotok között vált.

A Google Material Design és Apple HIG által ajánlott breakpoints: 0–599 dp (telefon, egy oszlop), 600–839 dp (tablet, két oszlop, navigation rail), 840+ dp (tablet, három oszlop, navigation drawer). A breakpoints száma nem haladhatja meg a 4-et – túl sok átmeneti pont bonyolítja a karbantartást és tesztelést.

Az adaptív design legjobb gyakorlatai

A sikeres responsive design megköveteli az iOS és Android fejlesztők közössége által az elmúlt évtizedben kidolgozott szabályok betartását. Az alábbiakban a legfontosabb ajánlások találhatók az Apple HIG, Google Material Design és éles projektek tapasztalatai alapján.

• Kezdje a legkisebb képernyővel – tervezze az elrendezést iPhone SE (375 pt) vagy Android compact (360 dp) méretre, majd adjon hozzá kiterjesztéseket nagyobb képernyőkhöz. Ez garantálja, hogy a kritikus tartalom mindenhová elfér
• Használjon intrinsic content size-t – az UILabel, UIButton, ImageView természetes mérettel rendelkezik. Az Auto Layout és ConstraintLayout ezt használja automatikus pozicionáláshoz felesleges korlátok nélkül
• Ne rejtse el a tartalmat kis képernyőkön – rejtés helyett rendezze át (reflow). A felhasználónak hozzá kell férnie ugyanahhoz a funkcióhoz, csak más sorrendben
• Tesztelje minden size class-on – az iOS szimulátor lehetővé teszi a Size Classes váltását újraindítás nélkül. Az Android Emulator különböző eszközprofilokat biztosít. Kötelezően tesztelje tableteken és összehajtható eszközökön
• Material 3 Adaptive Layout – a Google kész canonical layouts-okat biztosít lista/részletek, eszköztárak és navigáció számára. Használja ezeket a saját minták kitalálása helyett

Az adaptív design fő elve: a tartalom határozza meg az elrendezést, nem fordítva. Ha az iPad ugyanazt a kártyaköteget jeleníti meg, mint az iPhone, csak szélességben kinyújtva – az nem responsive design. A Responsive design újragondolja a kompozíciót: iPhone-on – függőleges görgetés, iPad-en – master-detail oldalsó panellel.