A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested UITableView/UICollectionView hack.

Related tags

UICollectionView CollectionViewShelfLayout
Overview

CollectionViewShelfLayout

A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested UITableView/UICollectionView hack. You can use a single data source for all of your contents. Each section displays its items in a row. CollectionViewShelfLayout supports collection view's header view and footer view similar to table view's tableHeaderView and tableFooterView also sections' header and footer views too.

CollectionViewShelfLayout screenshot

Requirements

  • iOS 9+
  • Swift 4.0+

This requirement is due to usage of some Auto Layout APIs available in iOS 8 and 9 or later. If you want to use CollectionViewShelfLayout in iOS 8, you can replace NSLayoutAnchor usage with other APIs.

Installation

Manaully

This project comes with built in CollectionViewShelfLayout framework target. You can drag CollectionViewShelfLayout.xcproj file into your project, add CollectionViewShelfLayout framework target as a target dependency and link/embed that framework. and Voila!!!

import CollectionViewShelfLayout

CocoaPods

Add the following to your Podfile

pod 'CollectionViewShelfLayout'
use_frameworks!

Carthage

Add the following to your Cartfile

github "pitiphong-p/CollectionViewShelfLayout"

Swift 2

You can use CollectionViewShelfLayout in Swift 2.2 by checking out tag 0.5.5

Swift 4.0

You can use CollectionViewShelfLayout in Swift 4.0 by checking out tag 0.6.4

Swift 4.2

You can use CollectionViewShelfLayout in Swift 4.0 by checking out tag 0.6.5

Usage

Set collecion view's layout to an instance of CollectionViewShelfLayout. Set the layout's properties you want (eg. cellSize). You can set its layout both via code or Storyboard.

let shelfLayout = CollectionViewShelfLayout()
shelfLayout.itemSize = CGSize(width: 100, height: 180)
collectionView.collectionViewLayout = shelfLayout

Demo App

CollectionViewShelfLayout project comes with a demo app target. You can see CollectionViewShelfLayout in action by just running AppStoreCollectionViewLayout-Demo demo app target.

Contact

Pitiphong Phongpattranont

License

CollectionViewShelfLayout is released under an MIT License.
Copyright © 2016-present Pitiphong Phongpattranont.

Comments
  • Great job!

    Great job!

    I have a similar problem in my current project and I have been researching how to best achieve this type of layout without using the typical "UICollection/UITableView inside a UITableView/UICollectionVIewCell. I will much rather prefer a solution like you have engineered rather than the hack mentioned above 🌟 🎉 Will do some testing and probably be inspired by this solution. So thanks. That is all :)

    opened by heumn 13
  • Fix layout and scrolling issues when going to landscape interface orientation

    Fix layout and scrolling issues when going to landscape interface orientation

    I've noticed 2 bugs when using this layout in landscape orientation :

    1. The section header/footer bounds are not updated (i.e. they keep their original frame)
      • This has been fixed by overriding shouldInvalidateLayout.
    2. The panning scrollviews are broken (you must scroll up/down to actually scroll left/right)
      • This has been fixed by adding/removing scrollviews to the collection view. The scrollviews are hidden (alpha = 0). This makes sure scrollviews work in any interface orientation.
    opened by damienrambout 3
  • cells not appearing

    cells not appearing

    In an app I am building I am dynamically creating sections based on data I get back from my database. If I scroll all the way to the end, and then a section is dynamically created above it with different # of items that new section retains the scroll position of the section thats scrolled all the way to the end.

    Is there a way to fix this so that all sections scroll to the first item when the section is created?

    opened by kchen97 1
  • ScrollView stop scrolling on tap

    ScrollView stop scrolling on tap

    Scroll view stops scrolling on tap. And it doesn't return back. Video

    Then I push to an other view controller, the app crashes image

    I'm able to push only when the scroll view stops correctly.

    Please help me on this.

    opened by cukingpro 0
  • Headers not updating when on `insertSections`

    Headers not updating when on `insertSections`

    Hi! Great work! I am using the layout and custom ShelfElementKindSectionHeaders. However, if I try to later insert a section using insertSections, while the content of the section animates in, the headers stay the same resulting in inconsistent view. E.g., If I start with this:

    A
a a a a a a
B
b b b b b

    and insert section C with c c c c c at the beginning, it ends up looking like this:

    A
c c c c c
B
a a a a a a
B
b b b b b

    If I scroll away and come back, it shows correct data, so it really looks just like an error with the animation/insertion itself. How it should look right after the animation:

    C
c c c c c
A
a a a a a a
B
b b b b b

    BTW calling reloadData works as expected.

    Any idea what might be wrong? Thanks

    opened by MilanNosal 0
  • Hiding Some Section Headers

    Hiding Some Section Headers

    Hello and thanks for the hard work, much appreciated!

    I've been trying to figure out if you can hide certain section headers using CollectionViewShelfLayout, but I don't think you can. Can you?

    If not, I would be interested in helping implement it. Any thoughts on how to do it?

    opened by CLoutas 1
  • Centered Paging (snap cell to center)

    Centered Paging (snap cell to center)

    opened by mbecker 2
Owner
Pitiphong Phongpattranont
A long time iOS developer who's also interested in Programming, Apple and, design. Opinions are my own
Pitiphong Phongpattranont
GitHub
This component allows for the transfer of data items between collection views through drag and drop

Drag and Drop Collection Views Written for Swift 4.0, it is an implementation of Dragging and Dropping data across multiple UICollectionViews. Try it

Michael Michailidis 508 Dec 19, 2022
Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller.

A smooth, flowing, customizable decision for a UICollectionView Swift Controller We specialize in the designing and coding of custo

Ramotion 1.5k Dec 19, 2022
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.

GravitySliderFlowLayout Made by Applikey Solutions Find this project on Dribbble Table of Contents Purpose Supported OS & SDK Versions Installation Us

Applikey Solutions 958 Dec 23, 2022
Made in Swift - Tag layout for UICollectionView supporting 3 types of alignments - Left || Centre || Right

TagCellLayout About Its an ui-collection-view LAYOUT class that takes care of all the logic behind making tags like layout using UICollectionView. It

Ritesh Gupta 346 Jan 1, 2023
↕️ VegaScroll is a lightweight animation flowlayout for UICollectionView completely written in Swift 4, compatible with iOS 11 and Xcode 9.

Made by Applikey Solutions Find this project on Dribbble Also check another flowlayout for UICollectionView: https://github.com/ApplikeySolutions/Grav

Applikey Solutions 2.8k Jan 1, 2023
UICollectionView and UIStackView Homework

UICollectionView and UIStackView Homework Use one outer StackView containing one CollectionView on top and a horizontal StackView at the bottom with t

null 0 Nov 11, 2021
UICollectionViewCell with checkbox when it isSelected and empty circle when not - like Photos.app "Select" mode.

CheckmarkCollectionViewCell UICollectionViewCell with checkbox when it isSelected and empty circle when not - like Photos.app "Select" mode. Usage cla

Yonat Sharon 62 Oct 19, 2022
A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

AnimatedCollectionViewLayout Normally a UICollectionView has no transition effects when you scroll from one item to another. There are lots of ways to

Jin Wang 4.5k Jan 1, 2023
A swift package(SPM) with iOS UI component that loads and displays images from remote urls or local assets and displays in a slide-show form with auto scroll feature.

MDBannersView A swift package with an iOS UI component that loads and displays images from remote urls, local assets and displays in a slide-show form

Madhav Deva 2 Feb 5, 2022
UIView subclass that bends its edges when its position changes.

AHKBendableView BendableView is a UIView subclass that bends its edges when its position change is animated. Internally, BendableView contains CAShape

Arek Holko 591 Jul 24, 2022
Netflix and App Store like UITableView with UICollectionView, written in pure Swift 4.2

GLTableCollectionView Branch Status master develop What it is GLTableCollectionView is a ready to use UITableViewController with a UICollectionView fo

Giulio 708 Nov 17, 2022
A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

CenteredCollectionView CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resul

Ben Emdon 1.2k Jan 6, 2023
A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

CenteredCollectionView CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resul

Ben Emdon 1.2k Dec 6, 2022
Folding Tab Bar and Tab Bar Controller

FoldingTabBar.iOS Folding Tab Bar and Tab Bar Controller Inspired by this project on Dribbble Also, read how it was done in our blog Requirements iOS

Yalantis 3.7k Dec 21, 2022
List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.

CAROUSEL List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center. We speci

Ramotion 557 Dec 31, 2022
1st place and Best ML Hack for LEC Hacks 2021

MoreCycle Anish Lakkapragada, Aayush Talluri, Soumik Sinha, and Abhishek Nambiar's project is found here. Idea Often times we don't know whether to re

Anish 6 Feb 11, 2022
Quick hack to hide the full screen microphone dot on macOS 12.

undot Quick hack to hide the full screen microphone dot on macOS 12. Usage To build: git clone https://github.com/s4y/undot cd undot make To run: whil

Sidney San Martín 324 Dec 29, 2022
Hack Club Bank Operations extension for Safari.

Hack Club Bank Operations Plugin (for Safari) This a port of the original hackclub/bank-ops-plugin Chrome extension which can be used in Safari on mac

Ella 2 Mar 12, 2022
Hack Sprint, Winter 2022, SwiftUI

Hack Sprint - Winter 2022 Welcome to Hack Sprint! The world of mobile development is an amazing and rich one, but one that might seem intimidating at

ACM at UCLA 4 Jan 24, 2022
A UISwitch that infects its superview with its tint color.

UISwitch subclass that 'infects' the parent view with the onTintColor when the switch is turned on. Inspired by this Dribble by Ramotion. Screenshot I

Andrea Mazzini 337 Sep 12, 2022