iOS AUTO LAYOUT 5

Hüseyin Bagana
Feb 5, 2018 · 6 min read
Image for post
Image for post

Bitmiyordu… Evet 5. yazıyla birlikteyiz. Seri benim çıkardığım taslak ile birlikte 6 veya 7 yazı olucak. Evet maalesef bu yazı serisinde hala yazacaklarım var ancak sabredin yakında bitecek.

Önceki yazıların referanslarınıda iOS Auto Layout 4 yazımın içinden bulabilirsiniz.


İlk yazıdan bu yana ilerlerken genelden özele doğru ilerledik. Biraz daha spesifik konulardan bahsetmemiz gerektiğiniz düşündüm. Gelin bu konulara bakalım:

Image for post
Image for post

Self Sizing TableView Cells tamda soldaki işe yarıyor. Peki Whatsapp geliştiricileri %100 self-sizing cells kullanmışmıdır ?

Bence kesinlikle evet. Whatsapp iOS platformuna geldiği günden beri tasarımında custom diyebileceğimiz çok az şey var. Soldaki bar buttonlara bakmanız bile size bunu kolayca açıklıyor. Whatsapp , tasarımında genel olarak işletim sistemi standarları dışına asla çıkmıyor. Bu yüzden en kolay ve rahat çözüm olan işletim sisteminin sağladığı çözümleri kullanacağına %100 eminim.

Self sizing cells, haliyle karşımıza tableview olan ekranlarda çıkıyor. Eğer cell’in içindeki content view da tüm constraintlerin tanımlaması yapılmışsa ve içerideki herhangi bir view intrinsic content height ‘ e sahipse orada direkt olarak devreye girecektir.

Tabiki default olarak celller kendini resize etmiyor. Bizim set etmemiz gereken şeyler var :

Peki sistem nasıl olsa hesaplıyor ve biz neden estimatedRowHeight isimli propertyi set etmek zorundayız. Bunu sebebide yine çok basit. Bildiğimiz gibi tableviewlar sadece o anda ekranda gösterilen kadar cell’i memoryde tutar ve diğer cellerin hepsi sadece datasource içinde birer veridir. Sıraları geldiğinde veriden > tasarıma geçiş yaparlar. Peki sadece tableviewın scrollview ı nasıl hesaplanıyor ? Datasource içindeki eleman sayısı * Herhangi bir cellin yüksekliği = ScrollView yüksekliği olması gerekmiyor mu ? Sağdaki ScrollView bar bile bu formule göre oluşuyor. Peki Content dinamik iken nasıl hesaplanıyor sorusuna gelecek olursak orada estimatedRowHeight devreye giriyor. Tabiki dinamik olduğundan bazen içerik ileriye dönük olarak tahmin edebileceğinizin dışına çıkıyor ama sizin 0 dışında herhangibir değer vermeniz burada sadece performansı etkiliyor. Bu yüzden ne kadar yakın değer verirseniz o kadar iyi olur.

Bu arada UIKit e asla mahkum değiliz herhangi bir celle dinamik bir şekilde siz yükseklik vermek isterseniz tableView:heightForRowAtIndexPath: ‘i kullanmanız yeterli.

Image for post
Image for post

Gelelim UIScrollView ile birlikte Auto Layout’un kullanımına…

Burada olduğu gibi daha anlaşılır ve okunabilir olması adına çoğu şeyde Interface Builder üzerinden gittim. O yüzden adım adım yapılması gerekenlere yer vereceğim.

Adım 1: Öncelikle storyboarda boş bir view controller atıyoruz ve root view içersine bir adet UIScrollView sürüklüyoruz.

Adım 2: Ardından bu scrollview’ın top, bottom, leading, trailing constraintlerini superview olarak ayarlıyoruz.

Adım 3: ScrollView içerisine içerisine contentlerimizi koyacağımız bir view sürüklüyoruz.

Adım 4: En önemli adım olan bu adımda sürüklediğimiz content view’ın top, bottom, leading ve trailing constraintlerini superview olarak set ediyoruz. Ardından contentview ile controller içindeki root view’ı equal width ve heights constraint tanımlarını yapıyoruz ve priortylerini low(250) yapıyoruz.

Adım 5: Son adımızda da artık content view içersine normal bir şekilde tüm viewlarımızı artık ekliyoruz.

  • Bordo View : Root View
  • Kırmızı View : Scroll View
  • Gri View : Content View
  • Yeşil ve Turuncu Viewlar : Tasarımımızdaki Viewlar
Image for post
Image for post

Gördüğünüz gibi content view içeriğin boyutuna göre ekran boyutlarının altında kalmaktadır.

Size-Classes konusunu Auto Layout olarak değilde Adaptive Layout olarak anarsak daha doğru olacaktır. Çünkü yaptığımız tek şey spesifik layoutlara tanımlar yaparız. Bu konuda bilmemiz gereken 2 terim var :

  • Compact ≤ 640 pts
  • Regular ≥ 640 pts

Compact ve Regular ekranın çözünürlüğüne, orientationına göre viewları sınıflandırmamıza yardımcı olur ve bu durumlara göre bazı propertyleri adaptive yapabiliriz. Öncelikle aşağıdaki görseli yorumlayalım…

Image for post
Image for post
Source

Örneğin iPhone 6+,6s+,7+,8+’ ı ele alacak olursak 414 pts x 736 pts olarak görüyoruz. Yani bu cihazlar bizim için width-Compact ve height-Regular olmuş oluyor. Peki orientationı landscape yaparsak 736 pts x 414 pts olacağından width-Regular ve height-Compact olacaktır. Tüm cihazlar için width ve height compact ve regular değerlerine XCode storyboard üzerinden ulaşabilirsiniz.

Image for post
Image for post

Tüm bu sınıflandırmaları nerede kullanacağız sorusuna gelecek olursak orada karşımıza propertyler çıkıyor. Tabi her türlü custom işlemler yapılabilir ancak ben birkaçını Interface Builder üzerinden göstereceğim.

Image for post
Image for post

Öncelikle toplam 9 tane size-class bulunuyor. Bunlardan 4 tanesi en son cihaz üstündeki classlardır :

  • Compact-Compact
  • Compact-Regular
  • Regular-Regular
  • Regular-Compact
  • Diğer 5 tanesi ise :
  • Compact-Any
  • Any-Compact
  • Regular-Any
  • Any-Regular
  • Any-Any

Bu 5 size-classes sonuc ilk verdiğimiz 4 class ı kapsamaktadır tek fark bu. Örneğin Compact-Any = Compact-Regular ve Compact-Compact classlarını temsil ediyor. Yukarıdaki görselde attribute inspector üzerinden herhangibir attribute’ün solunda bulunan + yardımıyla o propertye farklı bir size-class içinde farklı bir davranış tanımlanabilir.

Image for post
Image for post

Label’a eklediklerimi inceleyelim.

Color için wC hC olduğu durumlarda kırmızı renk olsun dedik.

Font için wR hR olduğu durumlarda Helvetica Fontunu Condensed Bold ve size’ı 35 olarak ayarladık.

Bunun yanında yanında + olan tüm attributeler için bunun gibi tanımlamaları yapabiliriz. Örneğin Hidden attribute’u.

Image for post
Image for post

Farklı bir örnek olması adına mavi view’ın sarı view’ın yarısı olmasını sağlayan constraintin Installed attribute’ünü wR hR durumunda false olarak set ediyoruz. Default bu constraint aktif olacak ancak wR hR durumunda pasif olarak yüklenecek.

Image for post
Image for post

Ardından wR hR adımında bir constraintin aktif olmasını istediğimden default olarak Installed attribute’ü false ve wR hR durumunda Installed attribute’ü true olan bir constraint ekledik. Bu constraint mavi view’ın sarı view’ın a oranını 1/4 olarak ayarlıyor.

Image for post
Image for post

Gelelim sonuçlara, iPhone 8 Plus için default tasarımı yaptığımızdan, Design time esnasında gördüğümüz herşey iPhone 8 Plus’ta Runtime için aynı gözüktü.(wC hR)

iPad Pro 9.7" için ise baktığımız zaman mavi view sarı viewın 4'te 1'i olarak gözüküyor ve label’ımızın font’u ve font size‘ ı tamamen farklı. (wR hR)

iPhone 4s Landscape’de ise mavi view constraintinde, fontun size’ında veya font’ta herhangibir değişiklik olmadı sadece fontu rengi kırmızı oldu.(wC hC)

Burada son olarak Stack Viewlar’ı inceleyecektim ancak bu serinin ilk yazısında bahsetmiştim. Daha fazladetayına girip yazıyı uzatmak istemedim. İlk yazıda Stack View konusunu inceledikten Apple’ın kendi dökümanlarını incelemenizi tavsiye ederim.

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