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.

‍

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)

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.

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:

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.

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.

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.

• Align: Bir veya daha fazla elemanı hizalamak için Align menüsü kullanılır. Elemanların kenarları, merkezleri vs. hizalanabilir.

• Pin: Bir elemanın konumunu ve boyutunu kısıtlayan constraint’ler belirlemek için Pin menüsü kullanılır

• 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.