Basit ama etkili Custom Collection View Flow Layout nasıl oluşturulur?

Emre Oner
Emre Oner
Dec 15, 2020 · 2 min read

Merhaba,

Bu kısa yazıda, CollectionView için basitçe, istediğimiz görünümü elde edebileceğimiz flowlayout sınıfını anlatmaya çalışacağım.

  • İlk olarak cmd+n ile yeni bir dosya oluşturalım. Adına da “GridFlowLayout” diyelim (Tabii siz istediğiniz ismi verebilirsiniz). Dilerseniz “.swift dosyası oluşturabilirsiniz, dilerseniz Cocoatouch class’ı oluşturabilirsiniz. Ben “.swift” dosyası oluşturup gerekli init methodlarını çağırıyorum.
  • Ardından “configure()” isimli bir method oluşturup, flowlayout’a ait üç parametreyi çağıracağız.
  1. minimumLineSpacing: Sütunlar arası boşluğu
  2. minimumInterItemSpacing: Satırlar arası boşluğu
  3. scrollDirection: CollectionView’ın yukarı aşağı mı ya da sağa sola mı hareket etmesini ayarladığımız parametrelerdir.
  • Bu parametreleri configure() methodumuzun içerisine aşağıdaki gibi yazıyorum ve init() içerisinde çağırıyorum.
  • Şimdi yapmamız gereken son şey, flowLayout’un “itemSize” parametresini yeniden düzenlemek. itemSize basitçe collectionview’da oluşturduğumuz cell’in boyutunu belirlememize olanak sağlar. Aşağıdaki gibi set ve get verdikten sonra set’e dokunmuyoruz çünkü onunla bir işimiz yok get’in içerisini aşağıdaki şekilde düzenleyeceğiz.
  • Bu adımda kaç sütun oluşturacağımıza karar vermek. Ben 3 sütunluk bir collectionView istediğimden numberOfColumns (isim kolaylığından dolayı bu ismi verdim, siz istediğiniz ismi verebilirsiniz.) itemWidth isminde bir constant oluşturuyoruz ve bunun değerini collectionView’ın genişliğini alıp, bundan numberOfItems’ın bir eksiğini çıkarmak ve ardından numberOfItems’a bölmek. Bu sayede aslında tam istediğimiz sonuca ulaşıyoruz(Buradaki matematiği kendi ihtiyaçlarınıza göre uygulamanız gerekiyor).

GridFlowLayout.swift dosyasının son görünümü aşağıdaki şekilde olmalıdır.

Artık GridFlowLayout ile işimiz bitti. Eğer StoryBoard kullanıyorsanız collectionView’ı seçtikten sonra attributes inspecter’dan layout seçeneğini “Custom” yaptıktan sonra class textbox’una GridFlowLayout yazarak işlemi sonlandırabilirsiniz.

Eğer kod kullanarak collectionView oluşturduysanız

let layout = GridFlowLayout()
let collectionView: UICollectionView() = {
let collection = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
return collection

şeklinde ekleyebilirsiniz.

Not: Storyboard’dan ekleme yaparken otomatik tamamlama çalışmıyor, burada kafanız karışmasın, sanıyorum bu bir bug ve senelerdir çözülemedi.

Okuduğunuz için teşekkür ederim. Lütfen bir yorumlarınızı eksik etmeyiniz :)

Sağlıklı günler.

Appcent

Appcent Şirketinden Makaleler

Appcent

Bir teknoloji şirketinden sektöre yön veren yazılar

Emre Oner

Written by

Emre Oner

IOS Developer

Appcent

Bir teknoloji şirketinden sektöre yön veren yazılar