UIKit: Auto Layout
Auto Layout ile uygulamalarınızı bütün cihazların ekran boyutları ile uyumlu hale getirebilirsiniz.
Merhaba! 👋🏻 Yeni bir Swift ile UIKit yazısıyla karşınızdayız. Bugünkü konumuz, uygulamanızdaki elemanların farklı ekran boyutlarına, dillere vb. şartlara uyumlu olmasını sağlayan Auto Layout. Başlamadan söylemiş olayım, eğer en yeni yazımızı okumaya henüz fırsatınız olmadıysa okumanızı kesinlikle öneririm! 😉
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.
Örnek Uygulamamızı Yaratalım!
Auto Layout menülerinin ne işe yaradığını öğrendiğimize göre, uygulamamızı yaratmaya başlayabiliriz! Açtığımız Single View App Xcode projesinin Main.storyboard dosyasından, ekranlarımızı tasarlayarak başlayalım. Bu uygulamada Interface Builder’da cihaz olarak iPhone XR seçtim. Bu detay, daha sonra önemli hale gelecek! 😉
Ekrana iki tane UILabel, iki tane de UIButton elemanı yerleştirerek başlıyoruz.
Stack View Yaratma
İlk işimiz, iki tane UILabel elemanımızı bir Stack View elemanını içerisine yerleştirmek olacak. Bunun için UILabel elemanlarının ikisini de seçiyor ve Stack menüsünden “Stack View” seçeneğine tıklıyoruz.
Sonrasında Interface Builder’daki Attributes Inspector menüsünden, stack view elemanımızın özelliklerini belirleyeceğiz. Örnek uygulamada Axis özelliğini Horizontal, Alignment özelliğini Center, Distribution özelliğini Fill, Spacing özelliğini de 20 olarak belirledik.
Bu haliyle uygulamamızı Simulator’dan iPhone XR üzerinden çalıştırırsak, Interface Builder’dakine benzer bir görüntüyle karşılaşacağız. Peki acaba, iPhone 8'de de aynı görüntüyü elde edebilecek miyiz?
Bunun için sol üst tarafta Run düğmesinin sağında yer alan cihaz seçiminden iPhone 8'i seçeceğiz ve uygulamamızı yeniden çalıştıracağız.
Olamaz! 😢 Uygulamamızı iPhone 8'de çalıştırdığımızda, elemanlarımızın artık ortalı olmadığını göreceğiz. Neyse ki bu durumu constraint’ler kullanarak düzeltebiliriz!
Auto Layout Menüleri ile Constraint Yaratma
Constraint’lerimizi yaratmaya başlamadan önce, amacımızın tam olarak ne olduğunu düşünelim:
- Stack view ve buton elemanlarımızın ekranın x eksenindeki merkezinde yer almasını istiyoruz.
- Stack view elemanımızın ekranın üst kısmında yer almasını istiyoruz.
- Mavi butonumuzun ekranın y eksenindeki merkezinde, mor butonumuzun da mavi butonun altında yer almasını istiyoruz.
Bu hedefleri de göz önünde bulundurarak artık constraint’lerimizi yaratmaya başlayabiliriz. İlk olarak stack view elemanının constraint’lerini belirleyeceğiz. Bunun için, stack view elemanını seçiyor ve Align menüsünden Horizontally in Container seçeneğini işaretliyor ve sağdaki rakamı 0 olarak bırakıyoruz. Böylece stack view, ekranın ortasına hizalanmış olacak. Eğer ekranda birtakım kırmızı uyarılar belirirse dert etmeyin, birazdan bunları düzelteceğiz! 😊
Şimdiyse, stack view elemanının dikey konumunu belirleyeceğiz. Bunun için yine stack view elemanını seçerek Pin menüsündeki şemadan, üstteki yer alan çizginin üstüne tıklayıp bir Top constraint’i yaratacağız. Burada aslında kastettiğimiz şey, “Stack view elemanının üst kenarı ekranın üst kenarına her zaman 173 piksel uzaklıkta olmalıdır”.
Böylece stack view elemanımızın constraint’leri hazır! Sıra geldi butonlara. 👍🏻
Sürükle-Bırak ile Constraint Yaratma
Auto Layout menüleri dışında constraint’ler yaratmak için bir seçeneğimiz daha var, bu da constraint’leri direkt olarak View Controller ekranının içinden yaratmak. Butonlarımıza constraint eklerken bu yöntemi deneyelim.
Mavi butonumuzdan başlayacağız. kntrl düğmesine basılı tutarak, mavi butondan dışarıya doğru sürükleyeceğiz ve beliren menüden Center Horizontally in Safe Area seçeneğine tıklayacağız. Sonrasında aynı işlemi tekrar ederek Center Vertically in Safe Area seçeneğine tıklayacağız. Böylece mavi buton, ekranın hem x, hem de y eksenindeki merkezinde yer alacak.
Son işimiz, mor butonun konumunu belirlemek olacak. İlk olarak diğer buton için yaptığımız gibi Center Horizontally in Safe Area seçeneğine tıklıyoruz. Böylece tüm elemanlarımız, ekranın ortasında hizalanmış olacak.
Peki ya mor butonun dikey konumu ne olacak? Mor butonun, her zaman mavi butonun belli bir mesafe altında yer almasını istiyoruz. Bunun için yine kntrl düğmesine basılı tutarak mor butondan mavi butona doğru sürüklüyor ve Vertical Spacing seçeneğine tıklıyoruz. Böylece, mor buton her zaman mavi butonun belli bir mesafe altında yer alacak.
Eğer bu mesafenin ne kadar olduğunu merak edersek, solda yer alan Document Outline kısmından yarattığımız constraint’i seçerek Attributes Inspector menüsünden detaylarını inceleyebiliriz. Constant değerinden göreceğimiz gibi, iki butonumuzun arasında 35 piksellik bir mesafe var.
Uygulamamız Hazır! 🎉
Artık uygulamamızı iPhone 8 üzerinden çalıştırırsak, tüm elemanların konumunun doğru bir şekilde belirlendiğini göreceğiz.
Fark ettiyseniz butonlarımızın genişliği ve yüksekliği, bir anda küçüldü. Bunun sebebi, width veya height özellikleri için herhangi bir constraint eklememiş olmamız. Boyut constraint’lerinin yokluğunda, Auto Layout intrinsic content size adı verilen bir sistem kullanır. Bu demektir ki, her eleman yalnızca içinde yer alan içeriği kapsayacak kadar büyük olacaktır, bir piksel bile daha büyük değil. Bu nedenle yazısı daha uzun olan mor buton, mavi butona göre daha geniştir.
Eğer butonların boyutunu daha güzel gözükecek bir şekilde ayarlamak isterseniz, bu makalede öğrendiğimiz yöntemlerle width ve height için de kolayca constraint’ler yaratabilirsiniz. 😁
Örnek uygulamayı kendiniz denemek istiyorsanız kaynak kodları GitHub üzerinden indirebilirsiniz:
Artık Auto Layout sisteminin çalışma mekanizmasını ve temel özelliklerini öğrenmiş bulunuyoruz. İlk başta biraz karmaşık gözükebilir, sakın gözünüz korkmasın! Auto Layout ile uygulama yapmaya devam ettikçe stack view ve constraint yapmaya alışacak, işinizin kolaylaştığını göreceksiniz. Artık iOS uygulamalarınızı birçok farklı cihaza uyacak şekilde tasarlayabilirsiniz. Keyifli kodlamalar! 💻
Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.
Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
