Responsive Design — podstawy, adaptacja interfejsów do ekranów

Czym jest Responsive Design?

Responsive Design – metoda budowania interfejsów, w której układ reaguje na rozmiar ekranu, orientację i dostępną przestrzeń, przeorganizowując rozmieszczenie elementów bez utraty funkcjonalności. Termin został zaproponowany przez Ethana Marcotte'a w 2010 roku dla projektowania stron internetowych, ale zasady są w pełni stosowane w natywnych aplikacjach mobilnych.

W programowaniu mobilnym responsive design oznacza, że ta sama aplikacja poprawnie wyświetla się na wszystkich urządzeniach: od iPhone SE (375 pt) do iPad Pro (1024 pt w pionie) i od smartfona Android (360 dp) do tabletu (800 dp). Kluczowe elementy to elastyczna siatka (flexible grid), adaptacyjne obrazy i media queries na poziomie frameworka (size classes, qualifiers).

Według Apple Developer Documentation aplikacja powinna być uniwersalna (universal) – działająca na wszystkich urządzeniach bez osobnej kompilacji dla iPad. Google Play zaleca używanie adaptive layouts przez Jetpack WindowManager i canonical layouts. Brak adaptacji do tabletów to częsta przyczyna negatywnych opinii.

Responsive vs Adaptive Design

Terminy responsive i adaptive są często mylone, chociaż opisują różne podejścia. Responsive design używa elastycznej siatki, która płynnie dostosowuje się do szerokości ekranu. Adaptive design używa stałych układów dla z góry określonych breakpoints – aplikacja przełącza się między nimi skokowo.

W praktyce aplikacje mobilne używają kombinacji obu podejść. Podstawowa siatka jest budowana jako responsive (Auto Layout z constraint-zależnościami), a po osiągnięciu breakpoint (np. szerokość > 600 pt) układ przełącza się na adaptacyjną wersję z inną kompozycją elementów. iOS łączy Auto Layout (responsive) z Size Classes (adaptive). Android łączy ConstraintLayout (responsive) z qualifier-zasobami (adaptive).

iOS Size Classes: Compact i Regular

Size Classes – mechanizm iOS, który klasyfikuje dostępną przestrzeń ekranu według dwóch osi: poziomej i pionowej. Każda oś może być Compact (C) lub Regular (R). Kombinacja daje cztery warianty do adaptacji układu: CR (zwykły iPhone portret), RR (iPad portret/pejzaż), RC (iPhone pejzaż na Plus/Pro Max), CC (iPad Split View).

// Definiowanie Size Classes w 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 — pokazujemy master-detail
        case (.compact, .regular):
            showStackedView() // iPhone portret — układ stosowy
        case (.compact, .compact):
            showCompactView() // iPhone SE pejzaż — zminimalizowany
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Używamy UISplitViewController lub HStack
    }

    private func showStackedView() {
        // Pionowy stos dla iPhone
    }

    private func showCompactView() {
        // Ukrywamy drugorzędne elementy, pokazujemy główne
    }
}

W Interface Builder Size Classes są konfigurowane przez panel „wAny hAny" – programista wybiera konkretną kombinację (wRegular hRegular, wCompact hRegular) i dodaje wariacje ograniczeń. SwiftUI używa @Environment(\.horizontalSizeClass) i @Environment(\.verticalSizeClass) do reaktywnej adaptacji – przy zmianie orientacji lub rozmiaru okna SwiftUI automatycznie przerysowuje widok.

// Size Classes w SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — poziomy układ z panelem bocznym
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — pionowy stos na cały ekran
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers – mechanizm Android do ładowania różnych zasobów (layout, values, drawables) w zależności od charakterystyki urządzenia. Kwalifikatory obejmują rozmiar ekranu (small, normal, large, xlarge), orientację (port, land), minimalną szerokość (swdp), dostępną szerokość (wdp) i wysokość (hdp).

// Definiowanie konfiguracji urządzenia w 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 zasobów dla różnych ekranów: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Android automatycznie wybiera odpowiedni layout na podstawie smallestWidth – minimalnej szerokości ekranu w dp niezależnie od orientacji. Kwalifikator swdp – najbardziej stabilny sposób adaptacji.

// Jetpack Compose — WindowSizeClass do adaptacji
@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 (biblioteka androidx.window) dostarcza WindowSizeClass z trzema kategoriami szerokości: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). To nowoczesna alternatywa dla starych folderów kwalifikatorów. Zalecana przez Google do adaptacji na urządzenia składane i tablety.

Adaptacyjna siatka i breakpoints

Adaptacyjna siatka to podstawa responsive design. Zamiast stałych rozmiarów elementy używają proporcji procentowych, elastycznych ograniczeń i intrinsic content size. Breakpoints – punkty szerokości ekranu, po osiągnięciu których układ przełącza się między stanami.

Zalecane breakpoints według Google Material Design i Apple HIG: 0–599 dp (telefon, jedna kolumna), 600–839 dp (tablet, dwie kolumny, navigation rail), 840+ dp (tablet, trzy kolumny, navigation drawer). Liczba breakpoints nie powinna przekraczać 4 – zbyt wiele punktów przejścia komplikuje utrzymanie i testowanie.

Najlepsze praktyki adaptacyjnego designu

Udany responsive design wymaga przestrzegania zestawu zasad wypracowanych przez społeczność programistów iOS i Android w ciągu ostatniej dekady. Poniżej kluczowe zalecenia oparte na Apple HIG, Google Material Design i doświadczeniu z projektów produkcyjnych.

• Zaczynaj od najmniejszego ekranu – projektuj layout dla iPhone SE (375 pt) lub Android compact (360 dp), następnie dodawaj rozszerzenia dla większych ekranów. To gwarantuje, że krytyczna treść zmieści się wszędzie
• Używaj intrinsic content size – UILabel, UIButton, ImageView mają naturalny rozmiar. Auto Layout i ConstraintLayout używają go do automatycznego pozycjonowania bez zbędnych ograniczeń
• Nie ukrywaj treści na małych ekranach – zamiast ukrywania przeorganizowuj (reflow). Użytkownik powinien mieć dostęp do tej samej funkcjonalności, tylko w innej kolejności
• Testuj na wszystkich size classes – symulator iOS pozwala przełączać Size Classes bez restartu. Emulator Android dostarcza różne profile urządzeń. Obowiązkowo testuj na tabletach i urządzeniach składanych
• Material 3 Adaptive Layout – Google dostarcza gotowe canonical layouts dla listy/szczegółów, paneli narzędzi i nawigacji. Używaj ich zamiast wymyślania własnych wzorców

Główna zasada adaptacyjnego designu: treść określa układ, a nie odwrotnie. Jeśli na iPadzie wyświetla się ten sam stos kart co na iPhonie, ale po prostu rozciągnięty wszerz – to nie jest responsive design. Responsive design przemyśla kompozycję: na iPhonie – pionowy scroll, na iPadzie – master-detail z panelem bocznym.