iOS 13 Compositional Layout

Bildiğimiz üzere iOS 13 ‘te collection için oldukça güzel güncellemeler karşımıza çıkmıştı. Sizlere en beğendiğim ve bence en merak edilen konu olduğunu düşündüğüm yenilik olan ‘Compositional Layout’ tan bahsedeceğim.

Temel

Collection view’in temel işlevini bilmeyenler için öncelikle kısaca buraya değinelim. Collection view dediğimiz yapı, bizim bir liste görünümü oluşturmamızı sağlar. Compositional Layout özelliği ise oluşturmuş olduğumuz collection view layout içerisinde farklı section’lar oluşturmamıza olanak sağlar. Çok havalı öyle değil mi 🤯 Şimdi biraz daha detayına inelim, örnekler ile daha iyi anlayacağız. Çok çeşitli kullanımları tabiki de var. Biz en basite indirgenmiş yapı üzerinden giderek öğreneceğiz.

Aşağıdaki görseldeki yapıyı inceleyelim. Bu yapıda farklı section’lar, gruplar ve item’lar var. Yapıların hepsini de farklı yöntemler kullanarak oluşturuyoruz. Ama temelde sadece grup ve item yapıları ile oynamamız yeterli olduğu için hızlı bir şekilde öğreneceğimizi düşünüyorum. 🤓

Görsel A

Bu yapıyı nasıl oluştururuz ?

Oluşturacağımız yapının hiyerarşisi aşağıdaki görseldeki gibi olacak. Layout içerisinde section’lar, section’lar içerisinde gruplar, gruplar içerisinde ise item’larımız bulunur. Bu görsel temsilidir, her yapı bu görseldeki şekilde olmalı gibi bir durum söz konusu değildir.

Görsel B

Bu yapılar nedir ve nasıl kullanılır detaylı inceleyelim. 🕵️‍♀️

Collection view’i her zaman oluşturduğumuz gibi oluşturuyoruz. Burada bir fark yok. Fark şurada başlıyor; artık layout olarak ‘Compostional Layout’ yaratıyoruz. Elemanlarımız da bu layout içerisinde olacak.

Şimdiki görevimiz ise UI tasarımımıza göre layout içerisinde kaç tane section yani kaç farklı yapımız olacağını belirlemek. A görseline baktığımızda 3 farklı section görüyoruz. Bu nedenle 3 farklı section yaratacağız.

Birinci ve üçüncü section’lar için birer tane grup oluştururken ikinci section için iki tane gruba ihtiyacımız var. Çünkü 2 farklı item kullanmışız. Bu item’ların boyutları farklı olduğu için aynı grup içerisinde olamazlar. Çünkü grup boyutu bir item için uygunken diğer item için uygun değil.

 let item = NSCollectionLayoutItem(
                    layoutSize: NSCollectionLayoutSize(
                        widthDimension: .fractionalWidth(1.0),
                        heightDimension: .fractionalHeight(0.5)))
 item.contentInsets = NSDirectionalEdgeInsets(
                    top: 2,
                    leading: 2,
                    bottom: 2,
                    trailing: 2)

  let mainGroup = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(
                    widthDimension: .fractionalWidth(1/3),
                    heightDimension: .fractionalHeight(1.0)), repeatingSubitem: item, count: 2)

  let section = NSCollectionLayoutSection(group: mainGroup)

Gruplar’ı, item’larımızı nasıl şekillendirmek istiyorsak one göre oluşturuyoruz. Burada bize yardımcı olan bazı temel yapılara kısaca değinelim;

contentInsets property’si ile item için boşluklarımızı belirtiriz.

Gruplarımızı vertical ya da horizontal scroll etmek için bu metotları kullanırız.

Dimension’ları kullanabilmek çok önemli. Bunlar;

— fractionalWidth / fractionalHeight: Bu metot 100% oranında genişlik ya da yükseklik sağlar. 0–1 arasında değer alır.

— absolute: Değerini kesin olarak bildiğimiz durumlarda kullanırız.

— estimated: Değerini kesin olarak bilmediğimiz durumlarda kullanırız.

count property’si bir grupta item’larımızın kaçarlı olacağını belirtiyor şeklinde düşünebilirsiniz. Örneğin vertical modunda count 3 ise şöyle bir çıktı ile karşılaşmayı bekleriz;

Görsel C

Farklı yapıları nasıl oluşturabileceğimiz ile ilgili bir kaç örnek proje içerisine ekledim. Dediğim gibi çeşitli kullanılar mevcut, çok farklı kombinasyonlar ile aynı sonuçları elde edebilirsiniz. Farklı örnekleri proje içerisinden inceleyebilir, dimention değerleri ile oynayarak kendinize göre düzenlemeler yapabilirsiniz. Bu öğrenme sürecimizi hızlandıracaktır.

Team Kraken olarak bizleri takip etmeyi unutmayın. Sosyal medyada da aktifiz. 🥳 🧡

TEAM KRAKEN

GitHub - melisaozturk/CompositionalLayout