Swift - SnapKit ve Auto Layout nedir, nasıl kullanılır? 📏

Merhaba arkadaşlar, Bugünkü yazımda daha çok SnapKit, Auto Layout nedir? nasıl kullanılır? 🤔

Auto Layout’un SnapKit ve bunun gibi kütüphanelerle ne kadar kolay ve yönetilebilir olduğunu göstereceğim.

Auto Layout nedir?

Auto Layout, iOS ve OS X işletim sistemleri üzerinde temeli View nesnesinden türetilmiş tüm objelerin otomatik olarak konumlandırılması ve belirli kurallar dahilinde tüm cihazlarda aynı/benzer çıktının alınması durumudur.

Auto Layout için Apple’ın desteği yok mu?

Elbette desteği var yalnız SnapKit gibi bir kütüphane ile hem daha kısa kod kullanarak, hemde Auto Layout mantığını zihninize çok daha kolay ve rahat oturtabilirsiniz.

Apple’ın dökümantasyonlarında kendi Auto Layout API’ına dair detayları görebilirsiniz zaten baktığınızda SnapKit gibi bir kütüphanenin kesinlikle bir velinimet olduğunu farkedersiniz.

Apple AutoLayout dökümantasyonu: Auto Layout Guide — Programmatically

Aynı zamanda Auto Layout işlemini Storyboard kullanarak uygulamanızı geliştiriyorsanız Interface Builder üzerinden de yapabilirsiniz.

Ben programmatically olarak UI nesnelerini oluşturduğunuzu varsayarak SnapKit’i anlatacağım.

Öncelikle Auto Layout için Size (Width, Height) ve Point (X, Y) gibi kavramlara aşina olmanız gerekiyor.

Korkmayın, Matematik anlatmayacağım. 😃 Demem o ki X’in yatay düzlemde, Y’in dikey düzlemde olduğunu biliyorsanız, güvendesiniz. 😎

SnapKit’in projeye dahil edilmesi

SnapKit’i CocoaPods veya Carthage aracılığı ile uygulamanıza dahil edebilirsiniz.

CocoaPods:

Podfile’da proje adınızı gördüğünüz target içerisine ilgili pod satırını ekleyin.

target '<Your Target Name>' do
pod 'SnapKit', '~> 4.0.0'
end

Aşağıdaki komutu çalıştırarak SnapKit’in yüklenmesini sağlıyoruz:

$ pod install

Carthage:

$ brew update
$ brew install carthage

Not: SnapKit’i kullanarak Auto Layout işlemi yapacağınız nesnenin öncelikle bir view’e subview olarak eklenmesi gerekiyor. Aksi taktirde çalışmayacağını constraintlerin eklenmeyeceğini göreceksiniz.

SnapKit’i nasıl kullanacağınıza dair küçük bir örnek öncelikle;

Ekran görüntüsü:

Bunun yanında equalTo sonrasında istediğiniz bir offset’i vererek referans aldığınız uzunluk/genişlik x, y noktaları üzerine + - değerleri verebilir, view nesnenizi ekranda konumlandırabilirsiniz.

Ekran görüntüsü:

Gördüğünüz gibi Y ekseni üzerinde 50 nokta kaydırdık.

Bunun dışında nameLabel’i referans aldığınız view nesnesinin son Y noktası üzerinden -150 nokta yukarı kaydırmak istediğimizde aşağıdaki şekilde yapıyoruz.

Ekran görüntüsü:

Aynı şekilde bottom yerine top sözdeyimini kullanarak referans aldığınız view nesnesinin Y tepe noktasından konumlandırma yapabilirsiniz.

Right, Left, Bottom, Top deyimleri:

Ekran görüntüsü:

Left deyimi ile X ekseni üzerinde 20 nokta yaklaştık. Neden view’i referans almadın diyenler mutlaka olacaktır. Bu koşullarda referans almamız gerekmiyor çünkü (self.view) nesnesi zaten X, Y noktaları 0 olan bir view nesnesi. 😛

Right deyimini kullanacak isek; aynı şekilde X ekseninin son noktası üzerinden konumlandırma işlemimizi vereceğimiz offset değerine göre yapabiliriz.

Gözünüzde canlanması adına aşağıda boyadığım kırmızı işaret X ekseninin son noktası.

Eğer right deyimini kullanacaksak ve label’imizi kırmızı işaretden -50 nokta kaydırmak istiyorsak aşağıdaki gibi kullanmalıyız.

Ekran görüntüsü:

Bunun dışında tanımladığınız view nesnelerini bir başka view nesnesine göre konumlandırabilir. Onun top, bottom deyimleri ve değerlerine göre konumlandırabilirsiniz.

Ekran görüntüsü:

Gördüğümüz üzere nameLabel nesnesini referans alarak bottom deyimiyle deviceNameLabel’ı +50 offsetiyle konumlandırdık.

Burada make.bottom.equalTo(nameLabel).offset(50) satırı şunu söylüyor,

nameLabel’in y noktası + nameLabel’in uzunluğu + 50

Kullanabileceğiniz tüm attributeları ve aynı zamanda Apple Auto Layout API nazarında karşılıklarınıda aşağıda görebilirsiniz.

ViewAttribute vs NSLayoutAttribute by SnapKit Docs.

Vakit ayırdığınız için teşekkür ederim. 🤠