iOS Auto Layout 3

Hüseyin Bagana
Jan 21, 2018 · 4 min read
Image for post
Image for post

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ı)

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post
Source

Gelelim IB ile Auto Layout kullanımına :

Image for post
Image for post
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
Image for post
Image for post

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

Image for post
Image for post
  • Interface Builder’ın otomatik tanımlama yapması
Image for post
Image for post

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
Image for post
Image for post
Add New Constraints Menu
Image for post
Image for post

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.

Image for post
Image for post
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ı
Image for post
Image for post
  • 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.
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