Responsive Design — Fundamentos, adaptação de interfaces para telas

O que é Responsive Design?

Responsive Design é um método de construir interfaces onde o layout reage ao tamanho da tela, orientação e espaço disponível, reorganizando os elementos sem perder funcionalidade. O termo foi cunhado por Ethan Marcotte em 2010 para design web, mas os princípios são totalmente aplicáveis a aplicativos nativos mobile.

No desenvolvimento mobile, responsive design significa que o mesmo aplicativo é exibido corretamente em todos os dispositivos: do iPhone SE (375 pt) ao iPad Pro (1024 pt em retrato) e de smartphones Android (360 dp) a tablets (800 dp). Os elementos-chave são grade flexível, imagens adaptativas e media queries em nível de framework (size classes, qualifiers).

De acordo com a documentação da Apple Developer, um aplicativo deve ser universal — funcionando em todos os dispositivos sem uma compilação separada para iPad. O Google Play recomenda usar layouts adaptativos via Jetpack WindowManager e canonical layouts. A falta de adaptação para tablets é uma causa comum de avaliações negativas.

Responsive vs Adaptive Design

Os termos responsive e adaptive são frequentemente confundidos, embora descrevam abordagens diferentes. Responsive design usa uma grade flexível que se ajusta continuamente à largura da tela. Adaptive design usa layouts fixos para breakpoints predefinidos — o aplicativo alterna entre eles abruptamente.

Na prática, aplicativos mobile usam uma combinação de ambas as abordagens. A grade base é construída como responsive (Auto Layout com dependências de constraint), e ao atingir um breakpoint (ex.: largura > 600 pt), o layout muda para uma versão adaptativa com outra disposição de elementos. iOS combina Auto Layout (responsive) com Size Classes (adaptive). Android combina ConstraintLayout (responsive) com recursos qualifier (adaptive).

Size Classes do iOS: Compact e Regular

Size Classes é um mecanismo do iOS que classifica o espaço disponível da tela em dois eixos: horizontal e vertical. Cada eixo pode ser Compact (C) ou Regular (R). A combinação dá quatro opções de adaptação: CR (iPhone retrato típico), RR (iPad retrato/paisagem), RC (iPhone paisagem no Plus/Pro Max), CC (iPad Split View).

// Definindo Size Classes em 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 — mostrar master-detail
        case (.compact, .regular):
            showStackedView() // iPhone retrato — layout de pilha
        case (.compact, .compact):
            showCompactView() // iPhone SE paisagem — minimizado
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Usando UISplitViewController ou HStack
    }

    private func showStackedView() {
        // Pilha vertical para iPhone
    }

    private func showCompactView() {
        // Ocultar elementos secundários, mostrar os principais
    }
}

No Interface Builder, as Size Classes são configuradas através do painel “wAny hAny” — o desenvolvedor seleciona uma combinação específica (wRegular hRegular, wCompact hRegular) e adiciona variações de constraint. SwiftUI usa @Environment(\.horizontalSizeClass) e @Environment(\.verticalSizeClass) para adaptação reativa — ao mudar a orientação ou o tamanho da janela, SwiftUI redesenha a view automaticamente.

// Size Classes no SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — layout horizontal com painel lateral
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — pilha vertical em tela cheia
            VStack {
                ContentView()
            }
        }
    }
}

Configuration Qualifiers do Android

Configuration Qualifiers é um mecanismo do Android para carregar diferentes recursos (layout, values, drawables) de acordo com as características do dispositivo. Os qualifiers incluem tamanho de tela (small, normal, large, xlarge), orientação (port, land), largura mínima (swdp), largura disponível (wdp) e altura (hdp).

// Determinação da configuração do dispositivo em 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()
        }
    }
}

Estrutura de recursos para diferentes telas: res/layout/activity_main.xml (telefone), res/layout-sw600dp/activity_main.xml (tablet 7”), res/layout-sw720dp/activity_main.xml (tablet 10”). O Android seleciona automaticamente o layout correto baseado no smallestWidth — a largura mínima da tela em dp independentemente da orientação. O qualifier swdp é o método de adaptação mais estável.

// Jetpack Compose — WindowSizeClass para adaptação
@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) fornece WindowSizeClass com três categorias de largura: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Esta é uma alternativa moderna às pastas qualifier antigas. É recomendada pelo Google para adaptação a dispositivos dobráveis e tablets.

Grade adaptativa e breakpoints

A grade adaptativa é a base do responsive design. Em vez de tamanhos fixos, os elementos usam proporções percentuais, constraints flexíveis e tamanho intrínseco do conteúdo. Breakpoints são pontos de largura da tela nos quais o layout alterna entre estados.

Breakpoints recomendados pelo Google Material Design e Apple HIG: 0–599 dp (telefone, uma coluna), 600–839 dp (tablet, duas colunas, navigation rail), 840+ dp (tablet, três colunas, navigation drawer). O número de breakpoints não deve exceder 4 — pontos de transição excessivos complicam a manutenção e os testes.

Melhores práticas de design adaptativo

Um responsive design bem-sucedido requer seguir um conjunto de regras desenvolvidas pela comunidade de desenvolvedores iOS e Android na última década. Abaixo estão as recomendações principais baseadas no Apple HIG, Google Material Design e experiência em projetos de produção.

• Comece pela menor tela — projete o layout para iPhone SE (375 pt) ou Android compact (360 dp), depois adicione extensões para telas maiores. Isso garante que o conteúdo crítico caiba em todos os lugares
• Use o tamanho intrínseco do conteúdo — UILabel, UIButton, ImageView têm tamanhos naturais. Auto Layout e ConstraintLayout usam isso para posicionamento automático sem constraints extras
• Não esconda conteúdo em telas pequenas — em vez de esconder, reorganize (reflow). O usuário deve ter acesso à mesma funcionalidade, apenas em uma sequência diferente
• Teste em todos os size classes — o simulador iOS permite alternar Size Classes sem reiniciar. O Android Emulator oferece diferentes perfis de dispositivo. Teste em tablets e dispositivos dobráveis
• Material 3 Adaptive Layout — o Google fornece canonical layouts prontos para lista/detalhe, painéis de ferramentas e navegação. Use-os em vez de inventar seus próprios padrões

O princípio principal do design adaptativo: o conteúdo determina o layout, não o contrário. Se o iPad exibe a mesma pilha de cartões que o iPhone, apenas esticada — isso não é responsive design. Responsive design repensa a composição: no iPhone — rolagem vertical, no iPad — master-detail com painel lateral.