Responsive Design — základy, přizpůsobení rozhraní obrazovkám

Co je Responsive Design?

Responsive Design – metoda budování rozhraní, při které rozvržení reaguje na velikost obrazovky, orientaci a dostupný prostor, přeuspořádává prvky bez ztráty funkčnosti. Termín navrhl Ethan Marcotte v roce 2010 pro webový design, ale principy jsou plně použitelné pro nativní mobilní aplikace.

V mobilním vývoji responsive design znamená, že stejná aplikace se správně zobrazuje na všech zařízeních: od iPhone SE (375 pt) po iPad Pro (1024 pt na výšku) a od Android smartphonu (360 dp) po tablet (800 dp). Klíčové prvky jsou flexibilní mřížka (flexible grid), adaptivní obrázky a media queries na úrovni frameworku (size classes, qualifiers).

Podle Apple Developer Documentation by aplikace měla být univerzální – fungovat na všech zařízeních bez samostatné kompilace pro iPad. Google Play doporučuje používání adaptive layouts prostřednictvím Jetpack WindowManager a canonical layouts. Nedostatek přizpůsobení tabletům je častou příčinou negativních recenzí.

Responsive vs Adaptive Design

Termíny responsive a adaptive jsou často zaměňovány, i když popisují různé přístupy. Responsive design používá flexibilní mřížku, která se průběžně přizpůsobuje šířce obrazovky. Adaptive design používá pevná rozvržení pro předdefinované breakpoints – aplikace mezi nimi přepíná skokově.

V praxi mobilní aplikace používají kombinaci obou přístupů. Základní mřížka je postavena responsive (Auto Layout se závislostmi na constraint), a při dosažení breakpoint (např. šířka > 600 pt) rozvržení přepne na adaptivní verzi s odlišnou kompozicí prvků. iOS kombinuje Auto Layout (responsive) se Size Classes (adaptive). Android kombinuje ConstraintLayout (responsive) s qualifier zdroji (adaptive).

iOS Size Classes: Compact a Regular

Size Classes – mechanismus iOS, který klasifikuje dostupný prostor obrazovky podle dvou os: vodorovné a svislé. Každá osa může být Compact (C) nebo Regular (R). Kombinace dává čtyři varianty pro přizpůsobení rozvržení: CR (běžný iPhone portrét), RR (iPad portrét/šířka), RC (iPhone šířka na Plus/Pro Max), CC (iPad Split View).

// Definování Size Classes ve Swift
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 — zobrazení master-detail
        case (.compact, .regular):
            showStackedView() // iPhone portrét — stackové rozvržení
        case (.compact, .compact):
            showCompactView() // iPhone SE na šířku — minimalizované
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Používáme UISplitViewController nebo HStack
    }

    private func showStackedView() {
        // Vertikální stack pro iPhone
    }

    private func showCompactView() {
        // Skryjeme sekundární prvky, zobrazíme hlavní
    }
}

V Interface Builderu jsou Size Classes konfigurovány pomocí panelu „wAny hAny” – vývojář vybere konkrétní kombinaci (wRegular hRegular, wCompact hRegular) a přidá variace constraint. SwiftUI používá @Environment(\.horizontalSizeClass) a @Environment(\.verticalSizeClass) pro reaktivní přizpůsobení – při změně orientace nebo velikosti okna SwiftUI automaticky překreslí zobrazení.

// Size Classes ve SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — horizontální rozvržení s bočním panelem
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — vertikální stack přes celou obrazovku
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers – mechanismus Android pro načítání různých zdrojů (layout, values, drawables) v závislosti na vlastnostech zařízení. Kvalifikátory zahrnují velikost obrazovky (small, normal, large, xlarge), orientaci (port, land), minimální šířku (swdp), dostupnou šířku (wdp) a výšku (hdp).

// Definování konfigurace zařízení v Kotlin
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()
        }
    }
}

Struktura zdrojů pro různé obrazovky: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Android automaticky vybere správné rozvržení na základě smallestWidth – minimální šířky obrazovky v dp nezávisle na orientaci. Kvalifikátor swdp – nejstabilnější způsob přizpůsobení.

// Jetpack Compose — WindowSizeClass pro adaptaci
@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 (knihovna androidx.window) poskytuje WindowSizeClass se třemi kategoriemi šířky: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). To je moderní alternativa ke starým qualifier složkám. Doporučeno Googlem pro přizpůsobení skládacím zařízením a tabletům.

Adaptivní mřížka a breakpoints

Adaptivní mřížka je základem responsive designu. Místo pevných velikostí prvky používají procentuální poměry, flexibilní omezení a intrinsic content size. Breakpoints – body šířky obrazovky, při jejichž dosažení rozvržení přepíná mezi stavy.

Doporučené breakpoints podle Google Material Design a Apple HIG: 0–599 dp (telefon, jeden sloupec), 600–839 dp (tablet, dva sloupce, navigation rail), 840+ dp (tablet, tři sloupce, navigation drawer). Počet breakpoints by neměl přesáhnout 4 – příliš mnoho přechodových bodů komplikuje údržbu a testování.

Nejlepší postupy adaptivního designu

Úspěšný responsive design vyžaduje dodržování souboru pravidel vytvořených komunitou iOS a Android vývojářů za poslední desetiletí. Níže jsou klíčová doporučení založená na Apple HIG, Google Material Design a zkušenostech z produkčních projektů.

• Začněte od nejmenší obrazovky – navrhněte rozvržení pro iPhone SE (375 pt) nebo Android compact (360 dp), poté přidejte rozšíření pro větší obrazovky. To zaručuje, že se kritický obsah vejde všude
• Používejte intrinsic content size – UILabel, UIButton, ImageView mají přirozenou velikost. Auto Layout a ConstraintLayout ji používají pro automatické pozicování bez zbytečných omezení
• Neschovávejte obsah na malých obrazovkách – místo skrývání přeuspořádejte (reflow). Uživatel by měl mít přístup ke stejné funkčnosti, jen v jiném pořadí
• Testujte na všech size classes – iOS simulátor umožňuje přepínání Size Classes bez restartu. Android Emulator poskytuje různé profily zařízení. Povinně testujte na tabletech a skládacích zařízeních
• Material 3 Adaptive Layout – Google poskytuje hotové canonical layouts pro seznam/podrobnosti, panely nástrojů a navigaci. Používejte je místo vymýšlení vlastních vzorů

Hlavní princip adaptivního designu: obsah určuje rozvržení, ne naopak. Pokud se na iPadu zobrazuje stejný stack karet jako na iPhonu, jen roztažený do šířky – to není responsive design. Responsive design přehodnocuje kompozici: na iPhonu – vertikální posouvání, na iPadu – master-detail s bočním panelem.