iOS Auto Layout 1
Tüm bu cihazlarda tekil görünümü yaratmak bu kadar zor mu ?
Frame Layout — Auto Layout
Auto Layout’ u anlamak için öncelikle geleneksel olarak kullanılan frame temelli layoutlar ile karşılaştıralım.
Frame Layout
Geleneksel Frame-Based Layout kullanırken koordinat tabanlı ,static width ve height kullanılarak tasarımlarımızı yapıyoruz.Yukarıdaki örnekte origin (20,20) olan bir view’e 120 genişlik 80 yükseklik verilmiştir. Alttaki view için ise aynı boyutlar kullanılarak sadece koordinatı değiştirilip (20,108 ) verilip ilgili tasarım yapılmıştır.
Bu tasarımın farklı cihazlarda yukarıdaki gibi gözükmekte. Tabi bu şu anda design time görselleri olsa da run time içinde aynı sonuçlar verilecektir. Çünkü kodlama esnasında herhangi bir internal veya external değişikliği handle etmedik.
External Changes
- Kullanıcının pencere boyutunu değiştirmesi. 💻
- İpad için split view’e geçiş ve çıkış 📱
- Yatay veya dikey döndürme 📱
- Aktif çağrı ,ses veya ekran kaydı(iOS 11) barının gözükmesi ve kaybolması 📱
- Farklı size classes için estek vermek istediğinizde📱
- Farklı ekran boyutları için destek vermek istediğinizde 📱
Internal Changes
- İçerik değişiklikleri 📱
- Farklı dil desteği 📱
- Dinamik tipler 📱
Bu durumları frame-based layout içersinde handle edip ilgili viewların hepsini resize ederek dinamik(sözde) bir görünüm elde edebiliriz. Ancak farklı boyutta yeni bir cihaz çıktığı zaman bu static tanımlamalarımıza yeni bir tanesini eklememiz gerekecek. Bu yüzden bu çözüm bizim için yüksek iş gücü gerektiren bir çözüm olucak.
Auto Layout
Auto layout mantığında ise constraintlere bağlı kalarak tasarımımızı yapıyoruz. Frame-Base Layout ile farklı olarak burada width, height veya herhangi bir koordinat tanımı yapmıyoruz. 20 point yukarıdan,sağdan ve soldan margin veriyoruz. ardından alttaki view ile arasında 8 point margin olacak şekilde soldan,sağdan ve alttan 20 point margin veriyoruz. En son olarak 2 view’ın yüksekliğini eşitleyecek constrainti tanımlıyoruz.
Gördüğünüz gibi daha design time esnasında ilgili sonuçları aldık. Constraint ile auto layout tasarlamaya geçmeden önce öncelikle Bölüm 1' de constraintsiz nasıl auto layout tasarımı yapabiliriz inceleyelim.
Stack Views
Stack View Android içersindeki Linear Layout ‘ a çok benzemektedir. iOS 9 ile hayatımıza giren stack viewları yukarıdaki design ı kullanarak inceleyelim.
İsterseniz sol taraftaki hiyerarşiye göre Stack View’ı base view’ınız yapabilirdiniz ancak ben bu şekilde bir tasarım olsun istedin. Sağ tarafta gösterilen Stack View’ın propertylerine gelecek olursak :
- Axis : İçinde bulunan controllerin yatay mı dikey mi sıralanacağını
- Alignment : İçinde bulunan controllerin nereye göre hizalanacağını
- Distribution : İçinde bulunan controllerin boyutlarını belirliyor. Eğer ben equal height constrainti vermeseydim fill seçeneği build time esnasında hata vericekti bunu fill equally kullanarak giderebilirdik.
- Spacing : Viewlar arasındaki boşluk
Diğer bölümlerde tüm bu özetler bittikten sonra, tek bir tasarım üzerinden tüm bu yöntemleri detaylı bir şekilde tekrar inceleyeceğim.
Bir Sonraki Yazıda Görüşmek Üzere ✋
