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.
Image for post
Image for post
  • 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.
Image for post
Image for post
  • Ş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).
Image for post
Image for post

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

Image for post
Image for post

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store