Auto Layout – Constraint Kavramı

Arayüzün tasarımı üzerinde önemle durulması gereken konulardan biridir. Grafik tasarımın uygulama kalitesini ve kullanımı ne düzeyde etkilediği tartışılmaz. Fakat iyi. bir tasarım şayet uygulamaya doğru uygulanamazsa son kullanıcı açısından bir anlam ifade ediyor. Nesnelerin yerleşimi, farklı cihazlarda uyumluluğu hem iOS hem Andoroid platformlarının temel problemlerinden. Androidde bu durum ürün yelpazesinin çok geniş olması sebebiyle daha içinden çıkılmaz bir halde. Fakat iOS destekli cihazlar bu konuda daha standart özelliklere sahip.  Aşağıdaki görselin ne kadar farklı cihaz botuna sahip olunduğu ile ilgili  ayrımı ve yaşanılan problemin boyutunu çok net ifade ettiğini düşünüyorum.

 

 

Mobil uygulama ekranlarını tasarlarken dikkat edilmesi gereken temel konular var.

  • Farklı cihazlarda görsellerin doğru scale edebilmesi ve görüntünün bozulmaması
  • Arayüz tasarımında kullanılan elementlerin cihaz boyutu değişimlerinde doğru konumlandırılması
  • TextField gibi bir input girişinin olduğu ve klavyenin açılması gerektiği durumlarda doğru yerleşim. input alanların klavye altında kalmaması gibi.
  • Yatay/dikey çalışma durumlarında arayüzün yerleşim değişiminden de öte tasarımın yeni bir deneyime dönüştürülmesi. Hesap makinesi uygulamasının yatay ve dikeydeki deneyimleri bunun için önemli bir örnektir.
  • iPhone ve iPad’deki tasarımların UX açısından farklılık gösterebilmesi. Bir TextField ekranı yatayda kaplayacak dediğimiz bir kuralda, iPad ekranlarında göze hoş gelemeyecek bir textfield genişlemesinin olmasını pek istemeyebiliriz.
  • Fontların cihaz boyutu büyüdükçe büyümesinin gerekliliği. iPhone5 ve iPad Pro’da bir label’ın ayın font büyüklüğüne sahip olması bir problemdir.

Üzerine düşündükçe belki bu listeye bazı başka eklemeler yapabilirim. Fakat temel olarak bunları aklımızın bir köşesinde tutmakta fayda var. Şimdi gelelim önemli konuya. Peki bu durumları sorun olmaktan çıkarak ne yapabiliriz, ilacımız AutoLayout. Bu başlık altında başladığımız AutoLayout konusu bir seri şeklinde devam edecek. Tüm bu sorunlarla ilgili başa çıkma yöntemlerini aklım yettiğince anlatmaya çalışıp yorumlarda değerli eklemelerinizi bekleyeceğim.

AutoLayout’a başlarken belki de ilk bilmemiz gereken bir Constraint’in ne olduğudur. Eğitimlerde de anlattığım şekliyle biraz hikayesel anlatmak istiyorum, lütfen kendinizi XCode yerine koyun:) Evinizde eşyalarınızı düzenlemeniz gerekiyorsa, bunu belirli bir düzende yapabilirsiniz. Örneğin en büyük koltuğu duvarı ortalayacak şekilde yerleştirirsiniz. Fakat tam duvara yaslanmasın diye arkadan biraz boşluk bırakırsınız. Küçük koltukları büyük koltuğun alt bölümüyle hizalı olacak şekilde yine bir düzende yerleştirirsiniz. Tam odanın ortasına bir masa koyarsınız. Derdim evinizi nasıl dizayn etmeniz gerektiğini anlatmak değil tabi ki:) Fakat arayüzleri de tam olarak bu şekilde tasarlıyoruz. Constraintler tam olarak yukarıdaki yerleşimde kullandığınız kuralların XCode’daki karşılığıdır. Yukarıdaki yerleşimi uygulamanızda bir ekran tasarlarken yaptığınızı düşünün.

Bir TextField’ı ekranın üst bölümüne yerleştirebilmek için, ekranın üst kenarından bir miktar, sağdan ve soldan bir miktar boşluk vermeniz gerekmektedir. TextField’in default durumunda yüksekliği sabit olduğu için bu 3 veri, ekrana yerleşim için yeterlidir. Sanki XCode’muşsunuz gibi düşünmenizi bunun için istemiştim. Bir nesneyi hangi verilere sahip olursanız doğru yerleştirebilirsiniz düşüncesi doğru constraintleri belirlemek için gerekli. Hem yukarıdaki koltuk örneğinde, hem sonrasında gelen TextField örneğinde yerleşim için gerekli olan her bir parametreye Constraint diyoruz. TextField’ın yerleşimi için eklenmesi gerekli constraint’leri aşağıdaki resimde XCode üzerinde görebilirsiniz. 3 constraint eklemiş olduk. Trailing(sağ kenar), Leading(sol kenar), Top(üst kenar).

Yukarıda Storyboard üzerinde eklenmiş constraintler mevcut. Aynı constraintleri kod yazarak aşağıdaki şekilde oluşturabilirisiniz.

koltuk.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10).isActive = true
koltuk.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -10).isActive = true
koltuk.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30).isActive = true

Burada bir konuya da açıklık getirmek gerekiyor. Trailing(sağ), Leading(sol) kabulü soldan->sağa yazılan diller için geçerli. Üst ve Alt constraintlere Top|Bottom denmişken Sağ|Sol karşılığı olarak Right|Left denmemesinin sebebi budur. Trailing ve Leading’i yazım yönüne göre değerlendirmek gerekmektedir. Örneğin Arapça sağdan sola yazıldığı için Trailing(sol kenar) ve Leading(sağ kenar) şeklinde kullanılmalıdır.

Constraint nasıl eklenir?

2 alternatifiniz var.

  • Nesneye sağ tıklayıp sürüklerseniz ekranın bir kenarına göre veya başak bir nesneye göre bir constraint ekleyebilirsiniz.
  • Storyboard’un sağ alt köşesinde 2 ayrı menü ile farklı constraintler ekleyebilirsiniz.
    • Aşağıdaki menüde bir nesneyi yatayda veya dikeyde ortalamak gibi nesnenin yerleşimiyle ilgili bir konumlandırma yapmak için kullanabileceğiniz seçenekler mevcut.  Buraya belirttiğiniz constraintleri, Storyboard üzerinde seçili olan nesnelere uygulayacaktır.
    • 2. resimde ise nesnenin boyutlandırılmasıyla ilgili constraintler ekleyebilirsiniz. Bu menünün üst bölümünde nesnenin en yakınında bulunan diğer nesnelerle arasına ne kadarlık bir boşluk bırakacağınızı belirtebilirsiniz. Buna bağlı olarak ekran boyutu değiştikçe bu değerleri koruyacak şekilde nesnenin boyutu ayarlanır. Alt bölümde bulunan. Width, Height değerleri ise genişlik ve yükseklik için vereceğiniz sabit değerlerdir.Ekran boyutu değişse de bu nesnenin boyutu değişmeyecektir. Aspect Ratio’ya ilerleyen bölümlerde daha geniş değineceğim için geçiyorum.

Yukarıdaki ekranda dikkat ederseniz Equal Widths ve Equal Heights disable olarak gelmekte, ekranda tek bir nesne seçili olduğu içindir. Tüm nesnelerin boyutlarını ayrı ayrı belirlemek gereken durumlar olabilecektir. Fakat boğu zaman nesnelerin boyutlarının birbirleriyle eşitliği veya belirli bir oranda eşitliği mümkün olmaktadır. 2 textfield’ın boyutunun eşit olabileceği gibi. Veya bir textfield’ın genişliğinin diğer textfiled’in yarı genişliğinde olması gibi. Bu gibi durumlarda Equal… constraintlerini kullanabilirsiniz.

Şimdi bir video ile bu konuştuklarımızı basitçe toparlayalım. Aşağıdaki videoda textfield’ların ekrana yerleşimlerinde uygulayabileceğiniz birkaç farklı yönetimi anlattım. Temel anlamda hem constraint kavramı hem de kullanımına giriş yapmaya çalıştık. Ekran tasarımı konusunda ki bir seri yazınında ilkini tamamlamış olduk. Aynı başlıkla devam eden diğer yazıları da tamamlarsanız daha anlamlı bir birikime sahip olacağınıza ümit ediyorum.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Bu yazıyı beğendiyseniz daha fazla kişiye ulaşmasını sağlamak için paylaşabilirsiniz.

Leave a reply