Responsive Design — temeller, arayüzlerin ekranlara uyarlanması

Responsive Design Nedir?

Responsive Design, düzenin ekran boyutuna, yönüne ve mevcut alana yanıt vererek öğeleri işlevsellik kaybı olmadan yeniden düzenlediği bir arayüz oluşturma yöntemidir. Terim, 2010 yılında Ethan Marcotte tarafından web tasarımı için ortaya atılmıştır, ancak ilkeler yerel mobil uygulamalara tamamen uygulanabilir.

Mobil geliştirmede, responsive design aynı uygulamanın tüm cihazlarda doğru şekilde görüntülendiği anlamına gelir: iPhone SE'den (375 pt) iPad Pro'ya (dikeyde 1024 pt) ve Android akıllı telefondan (360 dp) tablete (800 dp) kadar. Temel öğeler esnek ızgara, uyarlanabilir görüntüler ve framework düzeyinde medya sorgularıdır (size classes, qualifiers).

Apple Developer Documentation'ya göre, uygulama evrensel olmalıdır — ayrı bir iPad yapısı olmadan tüm cihazlarda çalışmalıdır. Google Play, Jetpack WindowManager ve canonical layouts aracılığıyla uyarlanabilir düzenlerin kullanılmasını önerir. Tablet uyarlamasının olmaması, olumsuz yorumların yaygın bir nedenidir.

Responsive vs Adaptive Design

Responsive ve adaptive terimleri, farklı yaklaşımları tanımlamalarına rağmen sıklıkla karıştırılır. Responsive design, ekran genişliğine sürekli olarak uyum sağlayan esnek bir ızgara kullanır. Adaptive design, önceden tanımlanmış breakpoints için sabit düzenler kullanır — uygulama bunlar arasında aniden geçiş yapar.

Pratikte, mobil uygulamalar her iki yaklaşımın bir kombinasyonunu kullanır. Temel ızgara responsive olarak oluşturulur (Auto Layout constraint bağımlılıkları ile) ve bir breakpoint'e (örneğin, genişlik > 600 pt) ulaşıldığında, düzen farklı bir öğe düzenlemesine sahip uyarlanabilir bir sürüme geçer. iOS, Auto Layout'u (responsive) Size Classes (adaptive) ile birleştirir. Android, ConstraintLayout'u (responsive) qualifier kaynaklarıyla (adaptive) birleştirir.

iOS Size Classes: Compact ve Regular

Size Classes, mevcut ekran alanını iki eksende sınıflandıran bir iOS mekanizmasıdır: yatay ve dikey. Her eksen Compact (C) veya Regular (R) olabilir. Kombinasyon, dört düzen uyarlama seçeneği sunar: CR (tipik iPhone dikey), RR (iPad dikey/yatay), RC (Plus/Pro Max'te iPhone yatay), CC (iPad Split View).

// Swift'te Size Classes Tanımı
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 göster
        case (.compact, .regular):
            showStackedView() // iPhone dikey — yığın düzeni
        case (.compact, .compact):
            showCompactView() // iPhone SE yatay — minimize edilmiş
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // UISplitViewController veya HStack Kullanımı
    }

    private func showStackedView() {
        // iPhone için dikey yığın
    }

    private func showCompactView() {
        // İkincil öğeleri gizle, ana öğeleri göster
    }
}

Interface Builder'da, Size Classes "wAny hAny" paneli aracılığıyla yapılandırılır — geliştirici belirli bir kombinasyon (wRegular hRegular, wCompact hRegular) seçer ve constraint varyasyonları ekler. SwiftUI, reaktif uyarlama için @Environment(\.horizontalSizeClass) ve @Environment(\.verticalSizeClass) kullanır — yön veya pencere boyutu değiştiğinde, SwiftUI görünümü otomatik olarak yeniden çizer.

// SwiftUI'da Size Classes
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — yan çubuklu yatay düzen
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — tam ekran dikey yığın
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers, cihaz özelliklerine göre farklı kaynakları (layout, values, drawables) yükleyen bir Android mekanizmasıdır. Niteleyiciler, ekran boyutu (small, normal, large, xlarge), yön (port, land), minimum genişlik (sw<N>dp), kullanılabilir genişlik (w<N>dp) ve yükseklik (h<N>dp) içerir.

// Kotlin'de cihaz yapılandırması algılama
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()
        }
    }
}

Farklı ekranlar için kaynak yapısı: res/layout/activity_main.xml (telefon), res/layout-sw600dp/activity_main.xml (7" tablet), res/layout-sw720dp/activity_main.xml (10" tablet). Android, smallestWidth'e — yönden bağımsız olarak dp cinsinden minimum ekran genişliğine — dayanarak otomatik olarak doğru düzeni seçer. sw<N>dp niteleyicisi en kararlı uyarlama yöntemidir.

// Jetpack Compose — uyarlama için 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 kütüphanesi), üç genişlik kategorisiyle WindowSizeClass sağlar: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Bu, eski qualifier klasörlerine modern bir alternatiftir. Google, katlanabilir cihazlara ve tabletlere uyarlama için bunu önerir.

Uyarlanabilir Izgara ve Breakpoints

Uyarlanabilir ızgara, responsive design'ın temelidir. Sabit boyutlar yerine, öğeler yüzde oranları, esnek constraint'ler ve içsel içerik boyutu kullanır. Breakpoints, düzenin durumlar arasında geçiş yaptığı ekran genişliği noktalarıdır.

Google Material Design ve Apple HIG tarafından önerilen breakpoints: 0–599 dp (telefon, tek sütun), 600–839 dp (tablet, iki sütun, navigation rail), 840+ dp (tablet, üç sütun, navigation drawer). Breakpoints sayısı 4'ü geçmemelidir — aşırı geçiş noktaları bakım ve testi zorlaştırır.

Uyarlanabilir Tasarımın En İyi Uygulamaları

Başarılı bir responsive design, son on yılda iOS ve Android geliştirici topluluğu tarafından geliştirilen bir dizi kurala uymayı gerektirir. Aşağıda, Apple HIG, Google Material Design ve üretim projesi deneyimine dayanan temel öneriler bulunmaktadır.

• En küçük ekrandan başlayın — iPhone SE (375 pt) veya Android compact (360 dp) için düzen tasarlayın, ardından daha büyük ekranlar için uzantılar ekleyin. Bu, kritik içeriğin her yere sığmasını sağlar
• İçsel içerik boyutunu kullanın — UILabel, UIButton, ImageView doğal boyutlara sahiptir. Auto Layout ve ConstraintLayout, ek constraint'ler olmadan otomatik konumlandırma için bunları kullanır
• Küçük ekranlarda içeriği gizlemeyin — gizlemek yerine, yeniden düzenleyin (reflow). Kullanıcı aynı işlevselliğe erişebilmelidir, sadece farklı bir sırada
• Tüm Size Classes'lerde test edin — iOS simülatörü, yeniden başlatmadan Size Classes'leri değiştirmeye izin verir. Android Emulator, farklı cihaz profilleri sağlar. Tabletlerde ve katlanabilir cihazlarda test ettiğinizden emin olun
• Material 3 Adaptive Layout — Google, liste/detay, araç çubukları ve gezinme için hazır canonical layouts sağlar. Kendi desenlerinizi icat etmek yerine bunları kullanın

Uyarlanabilir tasarımın ana ilkesi: içerik düzeni tanımlar, tersi değil. Bir iPad, iPhone ile aynı kart yığınını sadece daha geniş gerilmiş olarak gösteriyorsa — bu responsive design değildir. Responsive design düzeni yeniden düşünür: iPhone'da — dikey kaydırma, iPad'de — yan çubuklu master-detail.