iOS Auto Layout 4

Hüseyin Bagana
Jan 22, 2018 · 5 min read
Image for post
Image for post

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.

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

Image for post
Image for post
Layout Anchors

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.

Image for post
Image for post
Source

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 = true
View.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

// 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 = true
NSLayoutConstraint(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

  • 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]
Image for post
Image for post
Source
  • Width Constraint : [button(>=50)]
  • Superview ile Constraint : |-50-[purpleBox]-50-|
  • Dikey Hizalama : V:[topField]-10-[bottomField]
  • Priority : [button(100@20)]
Image for post
Image for post
Source
  • Equal Widths : [button1(==button2)]
  • Aralıklı Constaint : [flexibleButton(>=70,<=100)]
  • 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

Image for post
Image for post
  1. Constraintin sabit değerini değiştirebilirsiniz.
  2. Constraintin aktiflik pasiflik durumunu değiştirebilirsiniz.
  3. 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.
Image for post
Image for post

Bir Sonraki Yazıda Görüşmek Üzere ✋

Swift Türkiye

Swift Programlama Hakkında Türkçe Paylaşımlar

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store