Photo by Onur Binay on Unsplash

Katlanabilir Mobil Cihazlar ve Cutouts

Katlanabilir cihazlar yani foldable devices teknolojisi hayatımıza girmeye başladı. Telefon ve tablet üretici firmalar cihazlarını çoktan çıkarmaya başladı bile. Hatta çok kısa süre önce Galaxy Z Fold3 tanıtıldı. Biraz zaman alsa da yakın zamanda, biz kullanıcılar olarak daha sık bu cihazları görebiliriz. Peki mobil uygulamaları geliştirirken, tasarımcılar ve uygulama geliştiricileri neler düşünebiliriz? Nelere dikkat etmeliyiz?

Katlanabilir Cihaz Türleri

Kısaca özetlemek gerekirse üç tip ekran özelliğine sahip cihazlar vardır:

• Ekran Kesikleri (Display Cutouts)
• Menteşeli Katlanabilir Ekran (Hinged Foldable Display)
• Katlanabilir Ekran (Foldable Display)

Ekran Kesikleri (Display Cutouts) — Katlanabilir Tek Ekran (Fold) Image Resource : Microsoft

Katlanabilir Tek Ekran (Fold) — Katlanabilir İki Ekran (Hinge) Image Resource: Developer Android

Ekran Kesikleri (Display Cutouts)

Image Resource : SAMMOBILE

Katlanabilen cihazların en büyük özelliklerinden birisi elbette katlanabilen ekranlardır. Ekran kesikleri de katlanabilen cihazların bir parçası olduğundan dolayı, ekran kesitlerinden de bahsetmemizin aklımızdaki bazı sorulara cevap olacağını düşünüyorum.

Bazı cihazlarda, cihazın ön tarafında kamera veya önemli sensörler için sağlanan alana display cutouts yani ekran kesikleri denir. Bu durum Android tarafında,API 28 yani Android 9 ve sonraki yüksek sürümlerde, iOS’ta ise Iphone X cihazı ile birlikte notch ekranları desteklenmeye başlandı.

Cutout alanını Android’te kontrol etme

Not: Bu kısımdaki bilgiler Developer Android : Support display cutouts sayfasından derlenmiştir. Daha fazla detay için ilgili sayfayı ziyaret edebilirsiniz.

Android 9 çalıştıran cihazlarda uyumluluğu sağlamak için aşağıdaki kurallara uyması gerekiyor:

• Tek bir kenarda en fazla 1 kesik olabilir.
• Bir cihazda ikiden fazla kesik olamaz.
• Portre modda yani cihaz dikey yönlendirmede, Status Bar kadar, kesik yüksekliği kadar olmalıdır.
• Varsayılan olarak, tam ekran veya yatay yönde, tüm kesme alanı letterboxed olmalıdır.

Android ayrıca içeriğin cutout alanı içinde görüntülenip görüntülenmeyeceğini kontrol etmemizi de sağlıyor. Android projemizin içerisinde layoutInDisplayCutoutMode’u aşağıdaki modlardan birine eşitleyebiliriz.

• LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT : İçerik, portre modundayken cutout alanına işlenir, fakat yatay moddayken içerik letterboxed şeklini alır.
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: Pencerenin her zaman ekranın kısa kenarlarındaki DisplayCutout alanlarına uzanmasına izin verir. Pencere asla ekranın uzun kenarlarındaki bir DisplayCutout alanına uzanmaz.

Bu mod genelde fotoğraflar, videolar, haritalar ve oyunlar gibi bazı içerikler için kullanılır.

Image Resource : Developer Android

• LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER : Pencerenin DisplayCutout alanıyla çakışmasına asla izin vermez.

Image Resource : Developer Android

Cutout alanını iOS’ta kontrol etme

iOS 11 ile birlikte viewleri konumlandırırken yeni SafeArea API kullanmamız gerekiyor. Cutout alanını yönetmenin en pratik yolu SafeArea ile kontrol etmek olacaktır. iOS tarafında SafeArea ve cutout tarafında daha fazla detaya buradan ulaşabilirsiniz.

Image Resource : Medium, iOS Safe Area

Cutout alanını Flutter ile kontrol etme

Flutter’da tek yapmanız gereken WidgetınızıSafeArea ile sarmak.

Daha detaylı bilgi için aşağıdaki videoyu izleyebilir veya buradan SafeArea sınıf detaylarına bakabilirsiniz.

SafeArea kullanımına örnek vermek gerekirse:

Bu örnek stack overflow sitesinde bulunan Using SafeArea in Flutter başlıklı sorudan alınmıştır. Detaylı incelemek isterseniz buradan ulaşabilirsiniz.

Align(
  alignment: Alignment.topLeft,  // and bottomLeft
  child: Text('My Widget: ...'),
)

SafeArea ile sarılmamış bir örnek Image Resource: Stackoverflow

SafeArea(
  minimum: const EdgeInsets.all(16.0),
  child: Text('My Widget: ...'),
)

SafeArea ile sarılmış bir örnek Image Resource: Stackoverflow

Menteşeli Katlanabilir Ekran (Hinged Foldable Display)

Bu tür cihazlar iki adet ekrana sahiptirler. Bu iki ekran menteşe ile birbirine bağlanır. Bu tür cihazlara örnek vermek gerekirse en iyi örnek Microsoft Surface Duo’dur.

Surface Duo — Image Resource : Microsoft Surface Duo

Bu tür cihazlar için dikkat edilmesi gerekenler aşağıda listeledim:

Not: Bu kısımdaki örnekler Microsoft sitesinde bulunan Introduction to dual-screen devices yazısından derlenmiştir. Daha fazla detay için ilgili sayfayı ziyaret edebilirsiniz.

• Nesneleri bir tarafa taşıyın.

Bu nesneler bir diyalog, bildirim, snackbar, action, dropdown menuve bottom sheetolabilir.

Image Resource : Introduction to dual-screen devices

Image Resource : Introduction to dual-screen devices

Image Resource : Introduction to dual-screen devices

• Widgetları veya componentleri kenarlara yapıştırın. Kenarlara göre uyarlayın.

Kullanıcı arayüzü bir grid (ızgara) veya tablo düzenine sahip olduğunda, dikey veya yatay çizgiler ile hizalanırsa, kullanıcının uygulamayı görüntülemesi ve kullanması daha kolay olabilir.

Image Resource : Introduction to dual-screen devices

Image Resource : Introduction to dual-screen devices

• UI öğelerini yeniden düzenleme

Çift ekranlı cihazlar için optimize etmek için kullanabileceğiniz duyarlı bir düzen tekniği, ekran yönü veya boyutu değiştiğinde içeriğinizi yeniden düzenlemek olacaktır. Aşağıdaki örneğe baktığımızda, cihazın üst kısmında bulunan ListView içerisindeki kutucuklar yeniden düzenlendiğinde GridView ile kullanılmış. Aynı şekilde alt kısımında bulunan ListView içerisindeki ListTile componentler tek tarafa ListView halinde uyarlanmış. Böylelikle componentler daha kullanışlı hale gelmektedir.

Image Resource : Introduction to dual-screen devices

Katlanabilir Ekran (Foldable Display)

Samsung Galaxy Z Fold — Photo by Mika Baumeister on Unsplash

Samsung Galaxy Z Flip — Photo by Daniel Romero on Unsplash

Huawei Mate X2 — Image Resource : Huawei

Xiaomi Mi Mix Fold — Image Resource : NotebookCheck

Samsung, 2019 yılında 500 bin adet katlanabilir cihaz satmış. 2020 yılında 4.5 milyon katlanabilir cihaz satacaklarını düşünmüş. Ancak gerçek rakamlar orijinal hedefin sadece %60'ıydı.“ Sammobile, Success of Samsung’s foldable phones depends a lot on Apple” Daha fazla detay için buraya tıklayın.

Menteşeli Katlanabilir Ekran bölümünde bahsettiğim gibi kurallar çoğunlukla bu tür cihazlarda da geçerlidir. Aynı şekilde burada da uygulama sürekliliği (app continuity) önemli yere sahiptir. Kullanıcıya daha sürükleyici bir deneyim sunar.

App Continuity (Uygulama Sürekliliği)

Katlanabilir cihazda çalışırken, uygulama otomatik olarak bir ekrandan diğerine geçebilir. Harika bir kullanıcı deneyimi sağlamak için, geçişten sonra mevcut görevin sorunsuz bir şekilde devam etmesi çok önemlidir.

Bu durumda sistem tetiklendiğinde UI stateleri kaydetmeli ve değişiklerini düzgün bir şekilde desteklemelidir.

Image Resource : Developer Android

Microsoft 365 Developer Day Tanıtımı

22 Ocak 2020 yılında yazılan blog yazısında çift ekranlı cihazlar için SDK duyurusu yapmıştı. Ayrıca Windows 10X isimli işletim sisteminden bahsetmişti. Paylaştıkları görsele baktığımızda yakınlarda tanıtılan Windows 11'e benzediğini görebiliriz. Yakın gelecekte Windows ile çalışan katlanabilir cihazlar görebiliriz.

Flutter ile geliştirilen uygulamalar, Windows’ta da çalışabilmektedir. Desktop support for Flutter

Foldable Android Emulator Kurulumu

Emulatorleri kurmadan önce, Android geliştirme ortamının kurulu ve güncel olması gerekiyor. Eğer Android Studio yüklü değilse Android Studio Kurulum sayfaya giderek kurulumu yapabilirsiniz.

Microsoft Surface Duo Emulator Kurulumu

Surface Duo Emulator indirme sayfasına giderek emulatoru indiriyoruz. Ben bu aşamada MacOS için kurulumu anlatacağım. Windows ve Debian kurulum için burada ki sayfaya giderek inceleyebilirsiniz. Ayrıca Mac için detaylı bilgiye buradan ulaşabilirsiniz.

1. İndirdikten sonra SurfaceDuoEmulator_ version _.dmg dosyasını açıyoruz.
2. İçerisindeki .jar ve diğer dosyaları Android emulator klasörü içerisinde yeni bir klasöre kopyalıyoruz. Genellikle bu konumda bulunur: /Users/{USER}/Library/Android/sdk
3. Eğer Android SDK konumunu değiştirdiysen buradaki adımları uygulayın.
4. Ardından kopyaladığımız SurfaceDuoEmulator_version klasörünü terminalde açıyoruz.
5. ./run.sh komutunu terminalde çalıştırıyoruz.
6. Emulatorun açılmasını bekliyoruz.

Emulatorun kullanımı hakkında detaylı bilgiye aşağıdaki linkten ulaşabilirsiniz.

Use the Surface Duo emulator - Dual-screen

Android Foldable Emulator Kurulumu

1. Android Studio’yu açıyoruz.
2. Açılan panelden Configure seçeneğine tıklıyoruz ve ardından AVD Manager seçeneğine tıklıyoruz.
3. Açılan Android Virtual Device Manager penceresinde en altta bulunan Create Virtual Device butonuna tıklıyoruz.
4. Açılan Virtual Device Configurationpenceresinde, sol taraftaki kategori alanından Phone seçeneğini seçiyoruz. Sağ taraftaki listenin üzerinde bulunan arama kısmına "Fold"yazdıktan sonra çıkan seçeneklerden istediğimiz cihaza tıklayarak Next butonuna tıklıyoruz.
5. Ardından ayarlarımızı yaptıktan sonra Finish butonuna tıklayarak ekliyoruz.
6. Emulatorümüzü açarak kullanabiliriz.

Flutter Foldable Support

Henüz foldable cihazlar için Flutter’da official bir API bulamadım fakat Microsoft’un bu konuda geliştirmeleri mevcut. Geliştirmeleri aşağıdaki PR linkinden inceleyebilirsiniz.

Foldable support & TwoPane Widget by andreidiaconu · Pull Request #77156 · flutter/flutter

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım