iOS Auto Layout 4

Published in

Swift Türkiye

5 min readJan 22, 2018

4. kısımdayız! Bu kısımda kod ile auto layout nasıl yapılır onu inceleyeceğiz. Eğer göz atmadıysanız bundan önceki 3 yazıya göz atmanızı tavsiye ederim.

iOS Auto Layout 3

Merhabalar Auto Layout bölüm 3 ile tekrar birlikteyiz. Eğer önceki iki bölüme daha önce hiç denk gelmediyseniz bu…

medium.com

iOS Auto Layout 2

iPhone 10 (Namı diğer EKS) reklamını da yaptığımıza göre gönül rahatlığıyla kaldığımız yerden devam edebiliriz.

medium.com

iOS Auto Layout 1

Tüm bu cihazlarda tekil görünümü yaratmak bu kadar zor mu ?

medium.com

Auto Layout kullanırken birşeyler yaparken hep diğer alternatiflerden bahsettik. Yine bugün code ile Auto Layout yaparken 3 yöntemden bahsedeceğim.

Layout Anchors

Layout Anchors bu serinin 2. yazısında pseudo code olarak yer vermiştim. Burada o yazıdaki pseudo codeun tam code halini göreceğiz.

Yukarıdaki grafikte bir view için olabilecek tüm anchorlara yer verdim. Soldan sağa veya sağdan sola yazılıp okunan diller için leading ve trailing anchorların left ve right anchorlarlar doğru ve ters orantılı olarak değiştiğinden yukarıdaki şemada yine duruma göre ilgili değerlere yer verdim.

Tüm anchorları gördükten sonra önceki yazılardan aşina olduğumuz constraint denklemini pseudo kod olarak yazdığımız denklemi birde Layout Anchorlar ile yazalım.

RedView.leadingAnchor.constraint(equalTo: BlueView.trailingAnchor, constant: 8.0).isActive = true

şeklinde tanımlamamızı yapabiliriz. Yine 2. yazımızda yer verdiğimiz bazı pseudo tanımlamaları Layout Anchor ile yazalım :

// Sabit Yükseklik VermeRedView.height = 40.0//Layout Anchor ile
RedView.heightAnchor.constraint(equalToConstant: 40.0).isActive = true// İki view'ın başlangıçlarını hizalamaRedView.leading = 1.0 * BlueView.leading + 0.0//Layout Anchor ile 
RedView.leadingAnchor.constraint(equalTo:BlueView.leadingAnchor).isActive = true// İki view'a aynı genişliği vermeRedView.width = 1.0 * BlueView.width + 0.0//Layout Anchor ile 
RedView.widthAnchor.constraint(equalTo:BlueView.widthAnchor).isActive = true// Bir view'ın içinde bulunduğu view'ın merkezine konumlandırmaView.centerX = 1.0 * Superview.centerX + 0.0View.centerY = 1.0 * Superview.centerY + 0.0//Layout Anchor ile 
View.centerXAnchor.constraint(equalTo:View.superview?.centerXAnchor).isActive = trueView.centerYAnchor.constraint(equalTo:View.superview?.centerYAnchor).isActive = true// View'a çerçeve oranı verme , Yüksekliği = Genişiliğinin 2 katıView.height = 2.0 * View.width + 0.0//Layout Anchor ile
View.heightAnchor.constraint(equalTo: View.widthAnchor, multiplier: 2.0).isActive = true⚠️ isActive = true yapmazsak o constraintimiz aktif olmayacaktır burada dikkat etmemiz gerekenlerden biride bu

Gördüğünüz gibi Layout Anchorlar ile yazdığımız pseudo arasında neredeyse hiç fark yok bence kod üzerinde en kolay okunabilen ve yazılabilen yöntem bu.

NSLayoutConstraint

NSLayoutConstraint Layout Anchors’un daha genel hali diyebiliriz. Tek metod üzerinden direk herhangi 2 view için herhangi tanımı yapabilirsiniz. Yine aynı örnekler olması adına 2. yazımızdaki pseudo constraintleri kullanalım.

// Sabit Yükseklik VermeRedView.height = 40.0//NSLayoutConstraint Anchor ile
NSLayoutConstraint(item: RedView, attribute: .height, relatedBy:.equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 40.0).isActive = true// İki view'ın başlangıçlarını hizalamaRedView.leading = 1.0 * BlueView.leading + 0.0//NSLayoutConstraint Anchor ile  
NSLayoutConstraint(item: RedView, attribute: .leading, relatedBy:.equal, toItem: BlueView, attribute: .leading, multiplier:1.0, constant: 0.0).isActive = true// İki view'a aynı genişliği vermeRedView.width = 1.0 * BlueView.width + 0.0//Layout Anchor ile 
NSLayoutConstraint(item: RedView, attribute: .width, relatedBy:.equal, toItem: BlueView, attribute: .width, multiplier:1.0, constant: 0.0).isActive = true// Bir view'ın içinde bulunduğu view'ın merkezine konumlandırmaView.centerX = 1.0 * Superview.centerX + 0.0View.centerY = 1.0 * Superview.centerY + 0.0//NSLayoutConstraint Anchor ile 
NSLayoutConstraint(item: View, attribute: .centerX, relatedBy:.equal, toItem: View.superview, attribute: .centerX,multiplier: 1.0, constant: 0.0).isActive = trueNSLayoutConstraint(item: View, attribute: .centerY, relatedBy:.equal, toItem: View.superview, attribute: .centerY,multiplier: 1.0, constant: 0.0).isActive = true// View'a çerçeve oranı verme , Yüksekliği = Genişiliğinin 2 katıView.height = 2.0 * View.width + 0.0//NSLayoutConstraint Anchor ile
NSLayoutConstraint(item: View, attribute: .height, relatedBy:.equal, toItem: View, attribute: .width, multiplier: 2.0, constant:0.0).isActive = true⚠️ Yine aynı şekilde isActive = true yapmazsak o constraintimiz aktif olmayacaktır. NSLayoutConstraint.activate([constraints]) metodu ile yine tanımladığımız aktif etmediğimiz tüm constraintleri toplu bir şekilde aktif hale getirebiliriz.

Visual Format Language

Bana göre diğerlerine göre en dezavantajlı olan yöntem Visual Format Language. Ancak avantajlı yanlarıda var.

Auto Layout constraintleri debug anında consola yazdırırken Visual Format Language kullanıyor.
VFL ile tek seferde birden fazla constraint tanımlamanız mümkün.

Kötü yanları ise :

Aspect Ratios gibi bazı constraint tanımlamarı yapılamıyor.
XCode build time da VFL’in doğru formatta kullanılıp kullanılmadığını anlayamıyor.

Birkaç örneğini inceleyelim :

Standart Boşluk : [button]-[textField]

Source

Width Constraint : [button(>=50)]

Source

Superview ile Constraint : |-50-[purpleBox]-50-|

Source

Dikey Hizalama : V:[topField]-10-[bottomField]

Source

Priority : [button(100@20)]

Source

Equal Widths : [button1(==button2)]

Source

Aralıklı Constaint : [flexibleButton(>=70,<=100)]

Source

Tüm satır tanımı : |-[find]-[findNext]-[findField(>=20)]-|

Source

NSLayoutConstraint.constraints( withVisualFormat: “V:|-20-[iconImageView(30)]”, metrics: nil, views: views) örneğini inceleyecek olursak views parametresi string içersinde ismi geçecek olan viewın bağlı olduğu dictionaryi gösterir. Yine NSLayoutConstraint.active metodunu kullanarakta burada vfl ile initialize ettiğimiz constraintleri aktif hale getirebiliriz.

Constraintleri Güncelleme

Constraintin sabit değerini değiştirebilirsiniz.
Constraintin aktiflik pasiflik durumunu değiştirebilirsiniz.
Constraintin önceliğini değiştirebilirsiniz.

Vb. tüm değişiklikleri kodunuzun heryerinde verip constraint ekleyebilirsiniz. Ancak constraintinizin dinamik olmasını istiyorsanız örneğin bir butona basılınca ekrandaki constraintlerinizi güncellemek istiyorsanız o zaman yukarıdaki şemaya ihtiyacınız olacaktır.

setNeedsUpdateConstraints() metodunu herhangi bir constraint değiştiği anda çağırdığımızda tüm viewlardaki constraintlere göre yeni konumlar hesaplanır. Aynı zamanda updateConstraints metodunu override ederseniz o anda anlık olarak constraint hesaplamalarınızı yapabilir ve ilgili değerşer constraintlerinize set edip güncelleyebilirsiniz.
setNeedsLayout() metodunda ise artık viewlar superviewdan view a doğru oluşturulur. Burada ise viewların frameleri ile ilgili veriler alınıp yine üzerinde oynamalar yapabilirsiniz. Bunun için layoutSubviews metodunu override etmeniz gerekli.
setNeedsDisplay() metodunda ise artık viewları ekrana çizme işlemini yapıyoruz. Viewların içeriğini, CoreGraphics veya UIKit ile draw metodunu override edip çizebiliriz.