Autolayout & Stackview

Arayüzlerin farklı ekran boyutlarındaki iOS cihazlarında gözükmesini sağlayan Auto Layout ile tanışacak ve Stack View yapısından faydalanacaksınız.

Mentorluk

Randevu OluşturKredi Al

Auto Layout Nedir?

Bir iOS uygulaması yaratmak, sadece ekran tasarımlarınızı yapıp bunları kodlamakla biten bir iş değil: Artık 2007'deki gibi sadece tek bir tane iPhone yok! 🙂 Uygulamanızın tasarımını birçok farklı boyuttaki iPad, iPhone ve bunların yan çevrilmiş haline (landscape mode) uyumlu hale getirmeniz gerekiyor. İşte Auto Layout da, tam olarak bunun için kullanılıyor.

Auto Layout, her boyut için ayrı ekranlar yaratmak yerine, ekranın içerisinde elemanların boyut ve konumunu belli kurallarla belirlemenizi sağlar. Bu kurallara, constraint (yani kısıtlama) adı verilir. Ekran çizilirken, Auto Layout ekrandaki elemanların boyut ve konumunu sizin yarattığınız kurallara uyacak şekilde dinamik olarak hesaplar. Böylece uygulamanız farklı boyuttaki cihazlarda düzgün bir şekilde çalışacaktır.


Image for post
Auto Layout kullanarak uygulamanızı farklı boyutlardaki cihazlara uydurabilirsiniz.

Uygulamamızın Tasarımı Neye Göre Değişmelidir?

Uygulamamızın tasarımını değiştirmemizi gerektiren iki çeşit değişim vardır: Bunlar internal (yani iç) ve external (yani dış) değişimlerdir. İç değişimler uygulamanın içeriğinden kaynaklanıp ekrandaki elemanları etkilerken, dış değişimler uygulamanın çalıştığı cihazdan kaynaklanıp ekranın boyutunu etkilerler. Haydi bunlardan birkaç örnek inceleyelim:

Internal Değişimler
  • Ekrandaki içeriğin değişmesi. Örneğin: Instagram’daki bir yazının uzunluğunu yer aldığı UILabel elemanının boyutunu etkiler.
  • Uygulamanın yerelleştirmeye bağlı olarak dilinin/tarih formatının değişmesi (İlginizi çektiyse Localization yazımıza göz atabilirsiniz!)
  • Dynamic Type özelliğiyle uygulamadaki yazıların büyüklüğünün değişmesi
External Değişimler
  • Farklı boyutlu bir cihaza geçilmesi. Örneğin: Instagram uygulaması hem iPhone X, hem de iPhone 6 ile uyumlu olmalıdır.
  • Ekranın döndürülmesi. Biliyor muydunuz? Bazı geliştiriciler, uygulama kullanılırken ekranın döndürülmesini engelleyerek bu probleme çözüm getirirler. Hiç Snapchat uygulamasını kullanırken telefonunuzu yan çevirmeyi denediniz mi? 🧐
  • Ekranın tepesinde aktif arama veya ses kayıt göstergesinin çıkması
  • Kullanıcının Split View özelliğiyle ikinci bir uygulama açması (iPad)
Image for post
Instagram uygulamasını kullanırken, internal veya external değişimler gerçekleşebilir.

Stack View Nedir?

Apple, uygulamınızın mümkün olduğu kadarını stack view adı verilen elemanları kullanarak yaratmanızı ve ancak bu yeterli olmadığında özel kurallar (yani constraint’ler) belirlemenizi tavsiye etmektedir. Bunun sebebi, stack view kullanmanın constraint kullanımına kıyasla çok daha basit ve anlaşılabilir olmasıdır.

Stack view elemanları, birden fazla elemanı bir satır veya sütunda toplar ve otomatik olarak mevcut alana dağıtırlar. Her UIKit elemanı gibi stack view elemanlarının da birtakım özellikleri vardır. Kısaca bunların üzerinden geçelim:

  • Axis: Stack view elemanının dikey (vertical) mi, yatay (horizontal) mı olduğunu belirler.
  • Distribution: Stack view elemanının içerisinde yer alan elemanların Axis özelliğine paralel olarak düzenini belirler.
  • Alignment: Stack view elemanının içerisinde yer alan elemanların Axis özelliğine dik olarak düzenini belirler.
  • Spacing: Stack view elemanının içerisinde yer alan elemanların arasındaki boşlukları belirler.

Bu özelliklerin her biri, aşağıdaki resmi inceledikten sonra daha anlaşılır hale gelecektir. Eğer stack view elemanlarıyla ilgili daha fazla bilgi almak istiyorsanız Apple’ın dokümantasyonunu inceleyebilirsiniz.

Image for post
Stack view elemanının özelliklerini gösteren bir şema.

Constraint Nedir?

Peki stack view elemanları yeterli olmadığında ne yapmalıyız? Cevap: constraint kullanmalıyız! 😉

Auto Layout, ekranınızda yer alan elemanların boyut ve konumunu bir dizi doğrusal denklemlerden yararlanarak hesaplar. Bu denklemler de, sizin ekleyeceğiniz constraint’lere, yani kurallara bağlı olarak yazılır ve ekrandaki iki elemanın özellikleri arasındaki ilişkiyi tanımlar. Haydi bunun bir örneğini inceleyelim:

Image for post
Apple’ın paylaştığı örnek constraint denklemi.

Bu denklemdeki amacımız, BlueView ve RedView elemanlarımızın arasında 8 piksel boşluk kalmasıdır. Başka bir deyişle, RedView elemanının sol kenarı, BlueView elemanın sağ kenarından 8 piksel sağda olmalıdır.

Bunu yapmak için, RedView.leading (yani RedView elemanının sol kenarı) özelliğinin değerini, 1.0 x BlueView.trailing + 8.0 olarak belirleriz. Multiplier yani çarpan değeri 1.0 olduğundan, sadece BlueView.trailing (yani BlueView elemanının sağ kenarı) özelliğine 8.0 eklenir. Böylece RedView ve BlueView elemanlarımızın konumu arasındaki ilişkiyi tanımlamış olduk.

Constraint’ler Hangi Özellikleri Belirlerler?

Tabii ki demin gördüğümüz ilişkiler sadece yatay konum ile sınırlı değil. İncelediğimiz denklemde attribute olarak tanımlanan “leading” ve “trailing” özellikleri, constraint’ler ile belirleyebildiğimiz özelliklerden sadece ikisi. Artık diğerlerini öğrenme vakti geldi! 😁

Unutmayın: Bu özelliklerin her biri, sabit bir sayı değeri veya başka bir elemana bağlı bir değer alabilir.

  • Width: Elemanın genişliğini ifade eder.
  • Height: Elemanın yüksekliğini ifade eder.
  • Left/Leading: Elemanın sol kenarının konumunu ifade eder.
  • Right/Trailing: Elemanın sağ kenarının konumunu ifade eder.
  • Top: Elemanın üst kenarının konumunu ifade eder.
  • Bottom: Elemanın alt kenarının konumunu ifade eder.
  • CenterX: Elemanın x eksenindeki merkezini ifade eder.
  • CenterY: Elemanın y eksenindeki merkezini ifade eder.
  • Baseline: Elemanın içerisindeki yazının satırlarının konumunu ifade eder. FirstBaseline özelliği ilk satırın konumunu ifade ederken, Baseline son satırın konumunu ifade eder.
  • NotAnAttribute: Sadece sabit sayı değeri alan constraint’lerde kullanılır. Örneğin TextLabel elemanın genişliğini 80 olarak belirlemek istiyorsak, TextLabel.width = 0.0 x NotAnAttribute + 80 şeklinde bir denklem yazarız.
Image for post
Farklı constraint çeşitlerini gösteren bir şema

Interface Builder ile Auto Layout

Neyse ki öğrendiğimiz denklemleri elle yazmamız gerekmiyor. Bunun yerine Xcode içerisinde yer alan Interface Builder ekranını kullanarak, görsel bir şekilde stack view ve constraint’lerimizi yaratabiliriz.

Interface Builder’ın Auto Layout Menülerini Tanıyalım

Yeni bir Single View App Xcode projesi yarattıktan sonra, her zamanki gibi Main.storyboard dosyasını açıyoruz. Örnek uygulamamızı yaratmaya başlamadan önce, kısaca Interface Builder içerisinde yer alan Auto Layout menülerini tanıyalım.

Ekranın sağ alt tarafında yer alan ve aşağıdaki resme benzeyen menüler, Interface Builder’ın Auto Layout menüleridir.

Image for post
Interface Builder içerisinde yer alan Auto Layout menüleri.

Kısaca bu menülerden her birinin ne işe yaradığını inceleyelim.

Unutmayın: Bu menüleri açmadan önce, işlemlerin uygulanacağı bir veya daha fazla eleman seçmeniz gerekir.

  • Stack: Bir veya daha fazla elemanı başka bir elemanın içine embed etmek (yerleştirmek) için Stack menüsü kullanılır. Biz bu menüyü, stack view yaratırken kullanacağız.
Image for post
Interface Builder Stack menüsü.
  • Align: Bir veya daha fazla elemanı hizalamak için Align menüsü kullanılır. Elemanların kenarları, merkezleri vs. hizalanabilir.
Image for post
Interface Builder Align menüsü.
  • Pin: Bir elemanın konumunu ve boyutunu kısıtlayan constraint’ler belirlemek için Pin menüsü kullanılır
Image for post
Interface Builder Pin menüsü.
  • Resolve Auto Layout Issues: Sık sık karşılaşılan Auto Layout problemlerinin otomatik olarak çözülmesi için Resolve Auto Layout Issues menüsü kullanılır. Unutmayın ki bu menü mükemmel değildir ve Auto Layout kurallarınızı elinizden geldiğince elle yaratmak yararınıza olacaktır.
Image for post
Interface Builder Resolve Auto Layout Issues menüsü.


Sıradaki

Optionals

Bir değerin herhangi bir bilgi bulundurmadığı durumları yöneten “Optionals” kavramı ile tanışacaksınız.

Videolar

Swift Temellerine Giriş
Swift Temellerine Giriş
Teknolojinin Dili Kodlama
Teknolojinin Dili Kodlama
Playground Temelleri
Playground Temelleri
Veri Tipleri & Sabitler ve Değişkenler
Veri Tipleri & Sabitler ve Değişkenler
Operatörler
Operatörler
Kontrol Akışı
Kontrol Akışı
Fonksiyonlar
Fonksiyonlar
String'ler
String'ler
Objeler, Metotlar ve Özellikler
Objeler, Metotlar ve Özellikler
Xcode ile Tanışın
Xcode ile Tanışın
Struct
Struct
Class
Class
Koleksiyonlar
Koleksiyonlar
Döngüler
Döngüler
Xcode
Xcode
“Build”, “Run” ve “Debug”
“Build”, “Run” ve “Debug”
Arayüz Elemanlarını Yakından Tanıyın
Arayüz Elemanlarını Yakından Tanıyın
Dokümantasyon
Dokümantasyon
“Interface Builder” Temelleri
“Interface Builder” Temelleri
"UIKit" ile Kullanıcı Arayüzüne Giriş
"UIKit" ile Kullanıcı Arayüzüne Giriş
İlk Uygulama
İlk Uygulama
Kontrol Elemanları
Kontrol Elemanları
Autolayout & Stackview
Autolayout & Stackview
Optionals
Optionals
Tip Dönüşümleri
Tip Dönüşümleri
Guard
Guard
Uygulama Hayat Döngüsü ve Veri Modelleme
Uygulama Hayat Döngüsü ve Veri Modelleme
Scope Sabit & Değişken
Scope Sabit & Değişken
Enumerations
Enumerations
Protokoller
Protokoller
Segue ve Navigation Controller
Segue ve Navigation Controller
TabbarController
TabbarController
View Controller Hayat Döngüsü
View Controller Hayat Döngüsü
Basit Akışlar Oluşturmak
Basit Akışlar Oluşturmak
Uygulama Anatomisi ve Hayat Döngüsü
Uygulama Anatomisi ve Hayat Döngüsü
Model View Controller
Model View Controller
Uygulamanızda Veri Kaydedin
Uygulamanızda Veri Kaydedin
ScrollView
ScrollView
TableView Giriş
TableView Giriş
TableView İleri
TableView İleri
Verileri Kaydetmek
Verileri Kaydetmek
System View Controllers
System View Controllers
Uygulama Geliştirin
Uygulama Geliştirin
Karmaşık Veri Girişi Ekranları Oluşturmak
Karmaşık Veri Girişi Ekranları Oluşturmak
Closures
Closures
Extensions
Extensions
Pratik Animasyonlar
Pratik Animasyonlar
İnternet ile İletişime Geçin
İnternet ile İletişime Geçin
İnternet ile Çalışmak
İnternet ile Çalışmak
JSON
JSON
Concurrency
Concurrency