# 📱✨ Adaptif UI'den Öte: Cihaz Katlanırken Uygulamanızı Dinamik Olarak Yeniden Şekillendirme Foldable (katlanabilir) ve rollable (açılabilir) ekran teknolojileri hızla yaygınlaşıyor. Samsung Galaxy...

Published by Adem Hatay on 1 Ağustos 2025 Cuma

📱✨ Adaptif UI’den Öte: Cihaz Katlanırken Uygulamanızı Dinamik Olarak Yeniden Şekillendirme

Foldable (katlanabilir) ve rollable (açılabilir) ekran teknolojileri hızla yaygınlaşıyor. Samsung Galaxy Z serisi, Microsoft Surface Duo ve Huawei Mate X gibi cihazlar, geliştiricilere yeni kullanıcı deneyimleri tasarlama fırsatı sunuyor. Peki uygulamanızı bu cihazlarda nasıl optimize edebilirsiniz?

Foldable ve Rollable Ekranların Yükselişi

2024 verilerine göre foldable cihaz pazarı %65 büyüme gösterdi. Bu cihazların en önemli özelliği, kullanıcıların cihazı katlayıp açarken ekran boyutunun ve şeklinin dinamik olarak değişmesi. Uygulamanızın bu değişikliklere uyum sağlaması kritik önem taşıyor.

Temel Kavramlar: Postür ve Ekran Düzeni

// Jetpack WindowManager ile cihaz postürünü algılama
val windowInfoTracker = WindowInfoTracker.getOrCreate(this)
val lifecycleOwner = this

windowInfoTracker.windowLayoutInfo(lifecycleOwner)
    .collect { layoutInfo ->
        val foldingFeature = layoutInfo.displayFeatures
            .filterIsInstance<FoldingFeature>()
            .firstOrNull()
        
        when (foldingFeature?.state) {
            FoldingFeature.State.FLAT -> {
                // Tam açık durum
                updateLayoutForTabletMode()
            }
            FoldingFeature.State.HALF_OPENED -> {
                // Kitap modu
                updateLayoutForDualScreen()
            }
            FoldingFeature.State.FOLDED -> {
                // Kapalı durum
                updateLayoutForPhoneMode()
            }
            else -> {
                // Standart durum
            }
        }
    }

Dinamik Düzen Stratejileri

1. Continuation Pattern (Süreklilik Deseni)

Kullanıcı cihazı açtığında içeriklerin kesintisiz devam etmesini sağlar. Örneğin bir e-posta uygulamasında:

Kapalı durum: Liste görünümü
Açık durum: Liste + detay görünümü yan yana

<!-- res/layout/sw600dp/mail_activity.xml -->
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/listFragment"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"/>

    <fragment
        android:id="@+id/detailFragment"
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="match_parent"/>
</LinearLayout>

2. Mirroring Pattern (Aynalama Deseni)

İçeriğin ekranın her iki tarafında da gösterilmesi. Özellikle sunum uygulamaları için ideal.

// FoldingFeature'den hinge (menteşe) konumunu alma
val hinge = foldingFeature?.bounds ?: Rect()

// İçeriği menteşenin her iki tarafına yerleştirme
val leftPane = calculateLeftPaneBounds(hinge)
val rightPane = calculateRightPaneBounds(hinge)

updateViewBounds(leftPane, rightPane)

React Native ile Foldable Uyumluluğu

React Native geliştiricileri için react-native-foldable-core kütüphanesi:

import { useWindowInfo } from 'react-native-foldable-core';

const MyComponent = () => {
  const windowInfo = useWindowInfo();
  
  return (
    <View style={styles.container}>
      {windowInfo.isFolded ? (
        <PhoneLayout />
      ) : windowInfo.isHalfOpened ? (
        <DualScreenLayout hinge={windowInfo.hinge} />
      ) : (
        <TabletLayout />
      )}
    </View>
  );
};

Flutter’da Dinamik Düzenler

Flutter’da MediaQuery ve LayoutBuilder ile foldable desteği:

class FoldableAwareWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final window = View.of(context).displayFeatures;
    final hinge = window.firstWhere(
      (feature) => feature.type == DisplayFeatureType.hinge,
      orElse: () => null,
    );

    if (hinge != null) {
      return TwoPaneLayout(
        hinge: hinge.bounds,
        leftChild: LeftPane(),
        rightChild: RightPane(),
      );
    } else {
      return SinglePaneLayout();
    }
  }
}

Performans Optimizasyonları

Düzen Değişikliklerinde Hafıza Yönetimi:

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    // Görünümleri yeniden oluşturmak yerine var olanları güncelle
    updateExistingViews()
}

Kaynak Tüketimi: Foldable cihazlar genellikle daha fazla RAM’e sahip olsa da, iki ekranı aynı anda yönetmek kaynak tüketimini artırır.
Render Süresi: Düzen değişikliklerini 16ms altında tamamlamaya özen gösterin.

Test Stratejileri

Emülatör Kullanımı: Android Studio’nun foldable emülatörleri
Fiziksel Cihaz Testi: En az 2 farklı cihazda test

Otomatik Test Senaryoları:

@Test
fun testLayoutTransition() {
    // Kapalı durum testi
    device.fold()
    onView(withId(R.id.main_layout)).check(matches(isDisplayed()))
    
    // Açık durum testi
    device.unfold()
    onView(withId(R.id.dual_layout)).check(matches(isDisplayed()))
}

Gerçek Dünya Örnekleri

Microsoft Outlook: Posta listesi ve okuma paneli arasında akıcı geçiş
Samsung Notes: Not alırken bir tarafta klavye, diğer tarafta içerik
Google Maps: Katlanmış durumda basit navigasyon, açık durumda detaylı harita

2024-2025 Trendleri ve Öngörüler

Rollable Ekranlar: LG Rollable gibi cihazlar için yatay genişleme desteği
Çoklu Hinge Desteği: İkiden fazla katlama noktası olan cihazlar
Dinamik UI Framework’leri: Jetpack Compose ve SwiftUI’da yerleşik foldable desteği

Son Tavsiyeler

Progressive Enhancement: Temel işlevselliği tüm cihazlarda sunun, gelişmiş özellikleri foldable’larda etkinleştirin
Kullanıcı Deneyimi: Kullanıcıların cihazı nasıl tuttuğunu göz önünde bulundurun
Dokümantasyon: Tüm ekran durumları için clear back navigation sağlayın
Performans İzleme: Firebase Performance Monitoring ile farklı cihaz durumlarını takip edin

Foldable ve rollable cihazlar mobil deneyimi yeniden tanımlıyor. Uygulamanızı bu geleceğe hazırlamak için şimdi harekete geçin! 🚀

💡 Hızlı Özet

Bu yazıda “📱✨ 'Adaptif UI’den Öte: Cihaz Katlanırken Uygulamanızı Dinamik Olarak Yeniden Şekillendirme (Foldable & Rollable Ekranlar için Geliştirme Stratejileri)” konusunu detaylı olarak ele aldık. Öğrendiklerinizi projelerinizde uygulayarak deneyim kazanmayı unutmayın!

🎯 Bu 1. blog yazımızda öğrendikleriniz:

Pratik implementasyon teknikleri
Best practice önerileri
Performans optimizasyon ipuçları
Gerçek dünya kullanım örnekleri

📱 Beni Takip Edin:

GitHub: @ademhatay
Blog: ademhatay.com