Skip to content

A collection view layout capable of laying out views in vertically and horizontal scrolling water-flow and grids lists.

License

Notifications You must be signed in to change notification settings

liujunliuhong/SwiftyCollectionViewFlowLayout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

dc3a7ea · Dec 20, 2024

History

62 Commits
Feb 17, 2023
Feb 2, 2023
Nov 26, 2024
Nov 26, 2024
Feb 2, 2023
Feb 24, 2023
Feb 13, 2023
Feb 19, 2023
Feb 17, 2023

Repository files navigation

SwiftyCollectionViewFlowLayout

A collection view layout capable of laying out views in vertically and horizontal scrolling grids and lists.

Introduction

SwiftyCollectionViewFlowLayout is a UICollectionViewLayout subclass for laying out vertically and horizontal scrolling grids and lists of items. Compared to UICollectionViewFlowLayout, SwiftyCollectionViewFlowLayout supports many additional features:

  • Support Vertical and Horizontal scroll direction.
  • Support water-flow and grid list.
  • Hiding or showing headers and footers on a per-section basis.
  • Self-sizing headers and footers.
  • Headers and footers offset.
  • Headers and footers direction.
  • Pinned (sticky) headers and footers on a per-section basis.
  • Section background that can be hidden/visible on a per-section basis.
  • Section background inset.
  • Per-item self-sizing preferences (self-size and statically-size items anywhere in your collection view).
  • Item width/height based on a fraction of the total available width/height.
  • Item width/height ratio.

Preview

Support Preview
Water-Flow
Tag-List
Auto-Size
PinnedHeaderOrFooter

Getting Start

Requirements

  • Deployment target iOS 11.0+
  • Swift 5+
  • Xcode 14+

Installation

CocoaPods

pod 'SwiftyCollectionViewFlowLayout'

Or

pod 'SwiftyCollectionViewFlowLayout', :git => "https://github.com/liujunliuhong/SwiftyCollectionViewFlowLayout.git"

Usage

Once you've integrated the SwiftyCollectionViewFlowLayout into your project, using it with a collection view is easy.

Setting up cells and headers

SwiftyCollectionViewFlowLayout requires its own UICollectionViewCell and UICollectionReusableView subclasses:

  • SwiftyCollectionViewCell
  • SwiftyCollectionReusableView

These two types enable cells and supplementary views to self-size correctly when using SwiftyCollectionViewFlowLayout .

Importing SwiftyCollectionViewFlowLayout

At the top of the file where you'd like to use SwiftyCollectionViewFlowLayout, import SwiftyCollectionViewFlowLayout.

import SwiftyCollectionViewFlowLayout

Setting up the collection view

Create your UICollectionView instance, passing in a SwiftyCollectionViewFlowLayout instance for the layout parameter.

let layout = SwiftyCollectionViewFlowLayout()
layout.scrollDirection = .vertical

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self

view.addSubview(collectionView)
// Use SnapKit
collectionView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}

Registering cells and supplementary views

// Cell
collectionView.register(MyCell.classForCoder(), forCellWithReuseIdentifier: "MyCellReuseIdentifier")

// Header
collectionView.register(MyHeaderView.classForCoder(), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "MyHeaderReuseIdentifier")

// Footer
collectionView.register(MyFooterView.classForCoder(), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "MyFooterReuseIdentifier")

Section Background view

SwiftyCollectionViewFlowLayout support section background view. (very like decoration view)

collectionView.register(DecorationView.classForCoder(), forSupplementaryViewOfKind: SwiftyCollectionViewFlowLayout.SectionBackgroundElementKind, withReuseIdentifier: NSStringFromClass(DecorationView.classForCoder()))

section background view do not self-size. so, the section background view can subclasses from UICollectionReusableView

Configuring the delegate

Here's an example delegate implementation (For more usage, please check Demo):

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, itemSizeModeAt indexPath: IndexPath) -> SwiftyCollectionViewLayoutSizeMode {
    return .init(width: .fractionalFull(divisor: 2), height: .absolute(50))
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, visibilityModeForHeaderInSection section: Int) -> SwiftyCollectionViewLayoutSupplementaryVisibilityMode {
    return .visible(sizeMode: .init(width: .full, height: .absolute(75)))
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, visibilityModeForFooterInSection section: Int) -> SwiftyCollectionViewLayoutSupplementaryVisibilityMode {
    return .hidden
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, headerDirection section: Int) -> SwiftyCollectionViewLayoutSupplementaryDirection {
    return .left
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, footerDirection section: Int) -> SwiftyCollectionViewLayoutSupplementaryDirection {
    return .left
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, sectionInsetContainHeader section: Int) -> Bool {
    return false
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, sectionInsetContainFooter section: Int) -> Bool {
    return false
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, sectionType section: Int) -> SwiftyCollectionViewSectionType {
    return .row(direction: .left, alignment: .center)
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, visibilityModeForBackgroundInSection section: Int) -> SwiftyCollectionViewLayoutBackgroundVisibilityMode {
    return .visible
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, backgroundInset section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, headerPinToVisibleBounds section: Int) -> Bool {
    return true
}

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: SwiftyCollectionViewFlowLayout, footerPinToVisibleBounds section: Int) -> Bool {
    return false
}

You must implement this method: collectionView(_:layout:sectionType:).

Author

liujun, universegalaxy96@gmail.com

About

A collection view layout capable of laying out views in vertically and horizontal scrolling water-flow and grids lists.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages