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). Bu constraintlerin nasıl eklendiğini ve fazlasını video’dan izleyebilirsiniz.

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

Leave a reply