Merhabalar bu yazımda İOS ile birlikte kullandığımız Auto Layout özelliğini görsel format dili kullanarak nasıl yazarız bunun örneğini göreceğiz.
Auto Layout bildiğimiz gibi telefon,tablet uyumu dikey ve yatay uygulama kullanımlarında neesnelerin boyutlarının otomatik olarak buna göre ayarlayan bir yardımcıdır. Auto Layout kullanılarak daha hoş ve her boyuta uyumlu uygulamalar yazabilmekteyiz. Bunun için birçok yöntem mevcut bu yöntemlerden diğer yazılarımda bahsedip örnek vermiştim inceleyebilirsiniz.
Diğer bir yöntemde görsel formatlama yapısı ile bu işlemi gerçekleştirmek. Örnek vererek açıklayacak olursam.
Bir adet box adlı UIView nesnemiz olsun ve bu nesneye constraints ekleme işlemi yapacağız.
Bildiğimiz gibi Vertical(Dikey), Horizontal(Yatay) olarak işlemler gerçekleştirilmekte. Bu yüzden bu görsel format üzerinde V,H olarak işlemler gerçekleştirilecek. Aşağıda kod olarak örneklerimi vereyim.
İlk önce basit bir şekilde box nesnemizi yaratalım.
box = UIView() box.backgroundColor = UIColor.orange box.translatesAutoresizingMaskIntoConstraints = false view.addSubview(box)
Daha sonra bu yapı ile nesnemizin width ve height özelliklerini verelim.
// 1
let viewsDict = ["box":self.box,"redBox":self.redView,"superview":self.view] // Kullanılacak nesneleri dictionary olarak bir değişkene ekleyelim.
// 2
let boxConstVertical = NSLayoutConstraint.constraints(withVisualFormat: "V:[box(150)]", options: .init(rawValue: 0), metrics: nil, views: viewsDict) // height
let boxConstHoriz = NSLayoutConstraint.constraints(withVisualFormat: "H:[box(150)]", options: .init(rawValue: 0), metrics: nil, views: viewsDict) // width
view.addConstraints(boxConstHoriz)
view.addConstraints(boxConstVertical)
Konum ayarlama işlemleri.
let boxConstVertical = NSLayoutConstraint.constraints(withVisualFormat: "V:|-100-[box(150)]", options: .init(rawValue: 0), metrics: nil, views: viewsDict)
let boxConstHoriz = NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[box(150)]", options: .init(rawValue: 0), metrics: nil, views: viewsDict)
Yapı olarak | işareti ana viewimiz anlamına gelmektedir -20- nesneadı şeklinde yazıldığı zaman soldan 20 point boşluk, nesneadı -20- şeklinde yazıldığı zaman sağdan boşluk anlamına gelir. Vertical içinse üsten ve alttan şeklinde gerçekleşir. sadece tek çizgi kullandığımız zaman “V:|-[box(150)]” 8 point standart boşluk vermiş oluruz.
<=,>=,== mekanızmalarını kullanabiliriz. örneğin ikinci bir redBox nesnemiz box nesnemiz ile aynı özelliği taşımasını istiyoruz yani eşit olmasını bunun için
“V:[redBox(==box)]” şeklinde eşitleme işlemini gerçekleştirebiliriz.
Priority işlemlerinide “H:[redBox(100)]-20@750-[box]” şeklinde gerçekleştirebiliriz min 0 – max 1000 olmakta 250 düşük , 750 yüksek öncelik anlamı taşımaktadır.
Options bölümüne hizalama özellikleri ekleyebiliriz. Bu sayede nesneler belirtilen hizalama seçeneğine uygun davranacaklardır.
.AlignAllCenterX—NSLayoutAttributeCenterX..AlignAllCenterY—NSLayoutAttributeCenterY..AlignAllLeading—NSLayoutAttributeLeading..AlignAllTrailing—NSLayoutAttributeTrailing..AlignAllLeft—NSLayoutAttributeLeft..AlignAllRight—NSLayoutAttributeRight..AlignAllTop—NSLayoutAttributeTop..AlignAllBottom—NSLayoutAttributeBottom..AlignAllBaseline—NSLayoutAttributeBaseline.
Metrics değişkenide dictionary olarak kullanılacak sayısal değerlerin setini alır. Yanı sayısal olarak girdiğimiz değerleri değişkenlere aktarıp görsel dil içinde kullanabilirsiniz. “H:[redBox(redW)]” gibi.
Bir nesneyi ekranın yatay ve dikey olarak tam ortasına eklemek içinse aşağıdaki kod örneği yardımıyla gerçekleştirebilirsiniz.
let boxConstVertical = NSLayoutConstraint.constraints(withVisualFormat: "V:[superview]-(<=1)-[box(150)]", options: .alignAllCenterX, metrics: nil, views: viewsDict)
let boxConstHoriz = NSLayoutConstraint.constraints(withVisualFormat: "H:[superview]-(<=1)-[box(150)]", options: .alignAllCenterY, metrics: nil, views: viewsDict)
Bu yapıyı kullanmak kod okunaklığı açısından oldukça güzel ve rahat üstelik aynı satır üzerinde bir kaç adet const işlemi gerçekleştirmenize izin vermekte. Dilediğiniz kullanım türünü uygulayabilirsiniz sonuç olarak aynı hepsi tepkiyi vermekte seçim sizin 🙂
Bu yazı yorumlara kapalı.