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

Шта је Responsive Design?

Responsive Design – метод изградње интерфејса у коме распоред реагује на величину екрана, оријентацију и доступни простор, преуређујући положај елемената без губитка функционалности. Термин је предложио Ethan Marcotte 2010. године за веб дизајн, али принципи су у потпуности примењиви на нативне мобилне апликације.

У мобилном развоју responsive design значи да се иста апликација правилно приказује на свим уређајима: од iPhone SE (375 pt) до iPad Pro (1024 pt у портрету) и од Android паметног телефона (360 dp) до таблета (800 dp). Кључни елементи су флексибилна мрежа (flexible grid), адаптивне слике и media queries на нивоу оквира (size classes, qualifiers).

Према Apple Developer Documentation, апликација треба да буде универзална – ради на свим уређајима без одвојене компилације за 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 аутоматски прецртава приказ.

// 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), минималну ширину (swdp), доступну ширину (wdp) и висину (hdp).

// Дефинисање конфигурације уређаја у 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 аутоматски бира исправан распоред на основу smallestWidth – минималне ширине екрана у dp независно од оријентације. Квалификатор swdp – најстабилнији начин адаптације.

// 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-а. Уместо фиксних величина, елементи користе процентуалне односе, флексибилна ограничења и 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 и искуству производних пројеката.

• Почните са најмањим екраном – дизајнирајте распоред за iPhone SE (375 pt) или Android compact (360 dp), затим додајте проширења за веће екране. Ово гарантује да се критични садржај свуда уклапа
• Користите intrinsic content size – UILabel, UIButton, ImageView имају природну величину. Auto Layout и ConstraintLayout је користе за аутоматско позиционирање без непотребних ограничења
• Не сакривајте садржај на малим екранима – уместо скривања преуредите (reflow). Корисник треба да има приступ истој функционалности, само у другом редоследу
• Тестирајте на свим size classes – iOS симулатор омогућава пребацивање Size Classes без поновног покретања. Android емулатор пружа различите профиле уређаја. Обавезно тестирајте на таблетима и склопивим уређајима
• Material 3 Adaptive Layout – Google пружа готове canonical layouts за листу/детаље, панеле алата и навигацију. Користите их уместо измишљања сопствених образаца

Главни принцип адаптивног дизајна: садржај одређује распоред, а не обрнуто. Ако се на iPad-у приказује исти стек картица као на iPhone-у, само развучен по ширини – то није responsive design. Responsive design преиспитује композицију: на iPhone-у – вертикални скрол, на iPad-у – master-detail са бочним панелом.