Auto Layout Kullanımı – II

Merhaba, Auto Layout serisinin ikinci dersiyle devam ediyoruz. Eğer okumadıysanız Auto Layout Kullanımı – I dersine bakmanızı tavsiye ederim.

Nispeten daha kısa kısa bir konu olan Size(Boyut) constraint lerini bir inceleyelim…

 

Size Constraints

Size Constraints bir objenin büyüklüğü ile ilgili olan kısıtlamalardır.

Yani iPhone ekranı bağımsız sağdan 20 birim, soldan 30 birim uzaklıkta konumlan demek yerine “senin uzunluğun 50 piksel, genişliğin 60 piksel olsun” demiş oluruz.

Kısacası, objenin scale etmesini istiyorsak Position Constraints, fix bir boyuta sahip olmasını istiyorsak Size Constraints kullanmalıyız.

Tabiki pozisyon kısıtları boyut kısıtlarından daha iyidir veya kötüdür diye bir şey yok. Hepsinin kullanılması gereken durumlar birbirinden farklı olabilir. Hepsine ihtiyacımız var.

Şimdi buna bir senaryo düşünelim…

Mesala kullanıcı profili sayfamız var ve burda kullanıcının profil resmini göstereceğiz ama istiyoruzki bu resim 100×100 boyutunda olsun; ekranın büyüklüğüne göre küçülüp büyümesin.

Bu durumda size constraint i kullanmamız gerekecek.

Örneğin,

Şekildeki gibi bir View oluşturalım ve constraints penceresini açalım.

 

Kırmızı çizgiyle işaretlediğim alandan size constraint lerini ayarlayacağız.

Width ve Height olarak 100×100 verelim ve Add Constraints butonuna tıklayalım.

 

Ee verdik de hiçbir şey değişmedi. Üstelik her tarafı kırmızı çizgi oldu. Nasıl iş bu?

Sevgili Xcode diyorki “Kardeş sen bunun boyutunu ayarladın da ben bunu ekranın neresine koycam?”

Evet işte sorun bu. Yani bir objenin boyutunu ayarlamak yetmiyor. Bir de nereye yerleştireceğimizi belirtmemiz gerekiyor.

 

Şimdi objenin konumunu ayarlamak üzere constraints penceresini bir daha açalım.

 

Şekildeki gibi Top ve Leading constraint olarak 30 birim boşluk bırakırsak objenin sol üst köşede belirttiğimiz uzunlukta konumlandığını göreceğiz.

 

Xcode şimdi mutlu çünkü artık objeyi nereye ve hangi boyutta koyacağını biliyor.

 

Bazı hatalar…

 

Hadi şimdi yanlış bir şeyler yapalım.

Objenin constraint lerini böyle ayarlamışken bi de şöyle bir şey dersek nasıl olur: “Hacı sen bi de sağdan uzaklığını 40 yap bakıyım şunun”.

 

Xcode yapar yapmasına ama bir sürü de sorun yaratır…

 

Ne oldu şimdi?

Her şeyi berbat ettik.

Peki niye?

Çünkü biz en başta dedik ki bu obje 100×100 boyutunda olsun. Şimdi diyoruzki “Sen hem 100×100 boyutunda ol hemde ekranın sağına doğru genişle bakayım”.

Xcode da diyorki “Sen daha ne istediğini bilmiyorsun. Objenin boyutunu fix mi istiyorsun? Yoksa ekranın sağına doğru uzamasını mı? Ben napayım kafam karıştı”.

İşte hatayı bu yüzden alıyoruz.

Biz constraint verirken aynı zamanda diğer constraint leri bozmamamız gerekiyor. Bozarsak böyle hata alırız, Xcode ne yapacağını bilmez.

 

Neyse herkes hata yapabilir. Hata varsa çözümü de var. Biz geçmişi unutalım ve önümüzdeki güzel günlere bakalım 🌈

 

Çözüm

 

Obje seçiliyken Size Inspector’u açalım. Biraz aşağıda Constraints başlığını altında verdiğimiz constraint leri göreceğiz.

Kırmızı ile çizdiğim alan en son eklediğimiz hataya sebep olan constraint.

Hatayı düzeltmek için yapabileceğimiz iki şey var:

– Ya kırmızı ile işaretlediğim constraint i kaldıracağız ve objenin boyutu 100 x 100 şeklinde kalacak,

– Ya da width(genişlik) olarak 100 olarak verdiğimiz kısıtı kaldıracağız. Böylece objenin uzunluğu sabit kalacak ve genişliği ekrana göre relative olacak.

 

İki kıza birden aşık olmuyacağız, ikisinden birini tercih etmemiz lazım. 😁

Biz son eklediğimiz Trailing constraint ini seçelim ve Geri tuşuyla silelim.

Şimdi her şeyin eski haline geldiğini göreceğiz.

 

 

 

Size Constraints ile ilgili şimdilik bu kadar yeterli diye düşünüyorum. Örnek projenin kaynak koduna buradan erişebilirsiniz.

Serinin devamında Alignment Constraints konusunu anlatacağım.

 

Vakit ayırıp okuduğunuz için teşekkür ederim.

 

İyi kodlamalar 💻

 

 

 

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir