iOS Auto Layout 3

Hüseyin Bagana
Swift Türkiye
Published in
4 min readJan 21, 2018

Merhabalar Auto Layout bölüm 3 ile tekrar birlikteyiz. Eğer önceki iki bölüme daha önce hiç denk gelmediyseniz bu yazıdan önce o iki yazıya göz atmanızı tavsiye ederim.

Bu yazının konusu Interface Builder ile Auto Layout olup, yazının devamında Interface Builder “IB” olarak anılacaktır (bkz:Dilekçe başlangıcı)

Şimdi IB ile Auto Layouta gelmeden önce önceki yazılarımızda tasarımlarımızı hep kod üzerinden yaptık. IB üzerinde birşeyler yapmadan önce Storyboard vs Code yapalım.

Hangisinin daha iyi olduğu konusunda bir şey söylemeye gerek dahi yok. Projeden , tasarımdan ve kişiden kişiye değişiklik gösteren bir şey. Deneyimleyip ona göre birini seçmek daha mantıklı.

Source

Gelelim IB ile Auto Layout kullanımına :

Storyboardun sağ en altındaki autolayout menüsü

IB ile 3 farklı yol ile Auto Layout constrainti tanımlayabiliriz.

  • Bir view üzerinde iken control e basıp diğer bir view’a sürükleyerek

İlk viewe control tuşuyla beraber basarak diğer view’a sürüklüyoruz ve 2 view arasında olabilecek tüm constraintler aşağıdaki gibi karşımıza çıkıyor.

  • Interface Builder’ın otomatik tanımlama yapması

En sağdaki menü olan Resolve Auto Layout Issues kısmından Reset to Suggested Constraints ile IB’ye constraint tanımlaması bırakılabilir.

  • Pin ve Align tools bölümünden
Add New Constraints Menu

Seçtiğimiz herhangi bir view’a constraint eklemek için add new constraints menüsünü açıyoruz ve hangi komşusuyla ne kadarlık veya hangi türden bir constraint tanımlayacağımızı seçiyoruz. Değer alanlarının sağındaki oka basarak hangi komşusuna göre vereceğimizi seçip constrainti ekleyebiliriz.

Align Menu

Yine aynı şekilde Align menüsünden leading ,trailing,centerx vb. tüm constraint tanımlamalarını yapabiliyoruz.

  • Storyboard üzerindeki çizgiler ve anlamları
  • I ve I-I : Bu constraintler 2 view arasındaki uzaklık tanımında veya bir view’ın height,width constraintlerini temsil eder.
  • Düz Çizgiler: Bu çizgiler view’ın kenarları,horizontal,vertical veya baseline constraintini temsil eder.
  • Düz ve Aralıksız Tüm Çizgiler: Herhangi düz çizgi eğer aralıksız ve tek düz çizgi ise bu o constraintin required olduğunu ve priority alanının 1000 olarak set edildiği anlamını taşır.
  • Düz ve Aralıklı (Kesik kesik) Tüm Çizgiler: Herhangi düz çizgi eğer aralıklı ve kesik kesik çizgi ise bu o constraintin optional olduğunu ve priority alanının 1000 den küçük olarak set edildiği anlamını taşır.
  • Kırmızı Çizgiler: O constraint ile alakalı bir hata olduğunu gösterir.
  • Turuncu Çizgiler: O viewın constraint tarafından yerinin değiştiğini ancak IB üzerinde güncel constraint ve konumunda olmadığını gösterir. Doğru konum yine kesikli ve turuncu çizgiler ile gösterilir. IB üzerinde yine doğru konuma taşıyabilmek için Resolve Auto Layout Issues tool > Update Frames yapmak gerekir.
  • = ,≤,≥ İşaretleri: Bu işaretler ise ilgili constraintin eşitliğinin türünü temsil eder.

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

--

--