Responsive Design — основи, адаптація інтерфейсів під екрани

Що таке Responsive Design?

Responsive Design — метод побудови інтерфейсів, при якому макет реагує на розмір екрану, орієнтацію та доступний простір, перебудовуючи розташування елементів без втрати функціональності. Термін запропонував Ethan Marcotte у 2010 році для веб-дизайну, але принципи повністю застосовні до нативних мобільних додатків.

У мобільній розробці responsive design означає, що один і той самий додаток коректно відображається на всіх пристроях: від iPhone SE (375 pt) до iPad Pro (1024 pt у портреті) та від Android-смартфону (360 dp) до планшету (800 dp). Ключові елементи — гнучка сітка, адаптивні зображення та медіа-запити на рівні фреймворку (size classes, qualifiers).

За даними Apple Developer Documentation, додаток має бути універсальним (universal) — працюючим на всіх пристроях без окремої збірки для iPad. Google Play рекомендує використовувати adaptive layouts через Jetpack WindowManager та canonical layouts. Відсутність адаптації під планшети — часта причина негативних відгуків.

Responsive vs Adaptive Design

Терміни responsive та adaptive часто плутають, хоча вони описують різні підходи. Responsive design використовує гнучку сітку, яка безперервно підлаштовується під ширину екрану. Adaptive design використовує фіксовані макети для заздалегідь визначених breakpoints — додаток перемикається між ними стрибкоподібно.

На практиці мобільні додатки використовують комбінацію обох підходів. Базова сітка будується responsive (Auto Layout з constraint-залежностями), а при досягненні breakpoint (наприклад, ширина > 600 pt) макет перемикається на адаптивну версію з іншою компоновкою елементів. iOS поєднує Auto Layout (responsive) з Size Classes (adaptive). Android поєднує ConstraintLayout (responsive) з qualifier-ресурсами (adaptive).

iOS Size Classes: Compact та Regular

Size Classes — механізм iOS, який класифікує доступний простір екрану за двома осями: горизонтальною та вертикальною. Кожна вісь може бути Compact (C) або Regular (R). Комбінація дає чотири варіанти для адаптації макету: CR (звичайний iPhone портрет), RR (iPad портрет/ландшафт), RC (iPhone ландшафт на Plus/Pro Max), CC (iPad Split View).

// Визначення Size Classes в 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 — показуємо master-detail
        case (.compact, .regular):
            showStackedView() // iPhone портрет — стековий layout
        case (.compact, .compact):
            showCompactView() // iPhone SE ландшафт — мінімізований
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Використовуємо UISplitViewController або HStack
    }

    private func showStackedView() {
        // Вертикальний стек для iPhone
    }

    private func showCompactView() {
        // Ховаємо другорядні елементи, показуємо головні
    }
}

В Interface Builder Size Classes налаштовуються через панель "wAny hAny" — розробник вибирає конкретну комбінацію (wRegular hRegular, wCompact hRegular) та додає constraint-варіації. SwiftUI використовує @Environment(\.horizontalSizeClass) та @Environment(\.verticalSizeClass) для реактивної адаптації — при зміні орієнтації або розміру вікна SwiftUI автоматично перемальовує view.

// Size Classes в SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — горизонтальний layout з бічною панеллю
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — вертикальний стек на весь екран
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — механізм Android для завантаження різних ресурсів (layout, values, drawables) залежно від характеристик пристрою. Кваліфікатори включають розмір екрану (small, normal, large, xlarge), орієнтацію (port, land), мінімальну ширину (sw<N>dp), доступну ширину (w<N>dp) та висоту (h<N>dp).

// Визначення конфігурації пристрою в 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()
        }
    }
}

Структура ресурсів для різних екранів: res/layout/activity_main.xml (телефон), res/layout-sw600dp/activity_main.xml (планшет 7"), res/layout-sw720dp/activity_main.xml (планшет 10"). Android автоматично вибирає правильний layout на основі smallestWidth — мінімальної ширини екрану в dp незалежно від орієнтації. Qualifier sw<N>dp — найбільш стабільний спосіб адаптації.

// Jetpack Compose — 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) надає WindowSizeClass з трьома категоріями ширини: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Це сучасна альтернатива старим qualifier-папкам. Рекомендується Google для адаптації під складні пристрої та планшети.

Адаптивна сітка та breakpoints

Адаптивна сітка — основа responsive design. Замість фіксованих розмірів елементи використовують відсоткові співвідношення, гнучкі constraints та intrinsic content size. Breakpoints — точки ширини екрану, при досягненні яких макет перемикається між станами.

Рекомендовані breakpoints від Google Material Design та Apple HIG: 0–599 dp (телефон, одна колонка), 600–839 dp (планшет, дві колонки, navigation rail), 840+ dp (планшет, три колонки, navigation drawer). Кількість breakpoints не має перевищувати 4 — надлишкові точки переходу ускладнюють підтримку та тестування.

Найкращі практики адаптивного дизайну

Успішний responsive design вимагає дотримання набору правил, вироблених спільнотою iOS та Android-розробників за останнє десятиліття. Нижче — ключові рекомендації на основі Apple HIG, Google Material Design та досвіду продакшн-проектів.

• Починайте з найменшого екрану — проектуйте layout для iPhone SE (375 pt) або Android compact (360 dp), потім додавайте розширення для великих екранів. Це гарантує, що критичний контент поміститься скрізь
• Використовуйте intrinsic content size — UILabel, UIButton, ImageView мають natural size. Auto Layout та ConstraintLayout використовують його для автоматичного позиціонування без зайвих constraint
• Не ховайте контент на маленьких екранах — замість ховання перекомпоновуйте (reflow). Користувач повинен мати доступ до того ж функціоналу, просто в іншій послідовності
• Тестуйте на всіх size classes — симулятор iOS дозволяє перемикати Size Classes без перезапуску. Android Emulator надає різні профілі пристроїв. Обов'язково тестуйте на планшетах та складних пристроях
• Material 3 Adaptive Layout — Google надає готові canonical layouts для списку/деталізації, панелей інструментів та навігації. Використовуйте їх замість винаходу власних патернів

Головний принцип адаптивного дизайну: контент визначає layout, а не навпаки. Якщо на iPad відображається той самий стек карток, що й на iPhone, але просто розтягнутий по ширині — це не responsive design. Responsive design переосмислює компоновку: на iPhone — вертикальний скрол, на iPad — master-detail з бічною панеллю.