Responsive Design — bazele, adaptarea interfețelor la ecrane

Ce este Responsive Design?

Responsive Design – o metodă de construire a interfețelor în care layout-ul reacționează la dimensiunea ecranului, orientare și spațiul disponibil, rearanjând poziția elementelor fără pierderea funcționalității. Termenul a fost propus de Ethan Marcotte în 2010 pentru design web, dar principiile sunt pe deplin aplicabile aplicațiilor native mobile.

În dezvoltarea mobilă, responsive design înseamnă că aceeași aplicație se afișează corect pe toate dispozitivele: de la iPhone SE (375 pt) la iPad Pro (1024 pt în portret) și de la smartphone Android (360 dp) la tabletă (800 dp). Elementele cheie sunt grila flexibilă (flexible grid), imaginile adaptive și media queries la nivel de framework (size classes, qualifiers).

Conform Apple Developer Documentation, aplicația ar trebui să fie universală – funcționând pe toate dispozitivele fără o compilare separată pentru iPad. Google Play recomandă utilizarea adaptive layouts prin Jetpack WindowManager și canonical layouts. Lipsa adaptării la tablete este o cauză frecventă a recenziilor negative.

Responsive vs Adaptive Design

Termenii responsive și adaptive sunt adesea confundați, deși descriu abordări diferite. Responsive design folosește o grilă flexibilă care se adaptează continuu la lățimea ecranului. Adaptive design folosește layout-uri fixe pentru breakpoints predefinite – aplicația comută între ele brusc.

În practică aplicațiile mobile folosesc o combinație a ambelor abordări. Grila de bază este construită responsive (Auto Layout cu dependențe de constrângeri), iar la atingerea breakpoint-ului (de exemplu, lățime > 600 pt) layout-ul comută la o versiune adaptivă cu o altă compoziție a elementelor. iOS combină Auto Layout (responsive) cu Size Classes (adaptive). Android combină ConstraintLayout (responsive) cu resursele qualifier (adaptive).

iOS Size Classes: Compact și Regular

Size Classes – mecanism iOS care clasifică spațiul disponibil al ecranului pe două axe: orizontală și verticală. Fiecare axă poate fi Compact (C) sau Regular (R). Combinația oferă patru variante pentru adaptarea layout-ului: CR (iPhone obișnuit portret), RR (iPad portret/peisaj), RC (iPhone peisaj pe Plus/Pro Max), CC (iPad Split View).

// Definirea Size Classes în 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 — afișăm master-detail
        case (.compact, .regular):
            showStackedView() // iPhone portret — layout tip stivă
        case (.compact, .compact):
            showCompactView() // iPhone SE peisaj — minimizat
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Folosim UISplitViewController sau HStack
    }

    private func showStackedView() {
        // Stivă verticală pentru iPhone
    }

    private func showCompactView() {
        // Ascundem elementele secundare, arătăm principalele
    }
}

În Interface Builder, Size Classes se configurează prin panoul „wAny hAny" – dezvoltatorul selectează o combinație specifică (wRegular hRegular, wCompact hRegular) și adaugă variații de constrângeri. SwiftUI folosește @Environment(.horizontalSizeClass) și @Environment(.verticalSizeClass) pentru adaptare reactivă – la schimbarea orientării sau dimensiunii ferestrei, SwiftUI redesenează automat view-ul.

// Size Classes în SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — layout orizontal cu panou lateral
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — stivă verticală pe tot ecranul
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers – mecanism Android pentru încărcarea diferitelor resurse (layout, values, drawables) în funcție de caracteristicile dispozitivului. Calificatorii includ dimensiunea ecranului (small, normal, large, xlarge), orientarea (port, land), lățimea minimă (swdp), lățimea disponibilă (wdp) și înălțimea (hdp).

// Definirea configurației dispozitivului în 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()
        }
    }
}

Structura resurselor pentru diferite ecrane: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (tabletă 7"), res/layout-sw720dp/activity_main.xml (tabletă 10"). Android selectează automat layout-ul corect pe baza smallestWidth – lățimea minimă a ecranului în dp independent de orientare. Calificatorul swdp – cea mai stabilă metodă de adaptare.

// Jetpack Compose — WindowSizeClass pentru adaptare
@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 (biblioteca androidx.window) oferă WindowSizeClass cu trei categorii de lățime: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Aceasta este o alternativă modernă la folderele vechi de calificatori. Recomandată de Google pentru adaptarea la dispozitive pliabile și tablete.

Grilă adaptivă și breakpoints

Grila adaptivă este baza responsive design. În loc de dimensiuni fixe, elementele folosesc proporții procentuale, constrângeri flexibile și intrinsic content size. Breakpoints – puncte de lățime a ecranului la atingerea cărora layout-ul comută între stări.

Breakpoints recomandați de Google Material Design și Apple HIG: 0–599 dp (telefon, o coloană), 600–839 dp (tabletă, două coloane, navigation rail), 840+ dp (tabletă, trei coloane, navigation drawer). Numărul de breakpoints nu trebuie să depășească 4 – prea multe puncte de tranziție complică întreținerea și testarea.

Cele mai bune practici de design adaptiv

Un responsive design de succes necesită respectarea unui set de reguli elaborate de comunitatea dezvoltatorilor iOS și Android în ultimul deceniu. Mai jos sunt recomandările cheie bazate pe Apple HIG, Google Material Design și experiența proiectelor de producție.

• Începeți cu cel mai mic ecran – proiectați layout-ul pentru iPhone SE (375 pt) sau Android compact (360 dp), apoi adăugați extensii pentru ecrane mai mari. Aceasta garantează că conținutul critic se încadrează peste tot
• Folosiți intrinsic content size – UILabel, UIButton, ImageView au dimensiune naturală. Auto Layout și ConstraintLayout îl folosesc pentru poziționare automată fără constrângeri inutile
• Nu ascundeți conținutul pe ecrane mici – în loc de ascundere, rearanjați (reflow). Utilizatorul trebuie să aibă acces la aceeași funcționalitate, doar într-o altă ordine
• Testați pe toate size classes – simulatorul iOS permite comutarea Size Classes fără repornire. Emulatorul Android oferă diferite profiluri de dispozitive. Testați obligatoriu pe tablete și dispozitive pliabile
• Material 3 Adaptive Layout – Google oferă canonical layouts gata făcute pentru listă/detalii, panouri de instrumente și navigare. Folosiți-le în loc să inventați propriile modele

Principalul principiu al designului adaptiv: conținutul determină layout-ul, nu invers. Dacă pe iPad se afișează același stack de carduri ca pe iPhone, doar întins pe lățime – acesta nu este responsive design. Responsive design regândește compoziția: pe iPhone – scroll vertical, pe iPad – master-detail cu panou lateral.