Collection view layouts
About
The best way to show multimedia content is by selecting them for collections. The collection view is the primary tool for presenting and navigating products in an App Store and other similar e-commerce platforms. We have designed several types of collection view layouts with smooth animation behavior and optimized code that you can grab to your application. Design on Dribble
👍 the project, do not forget ⭐️ me
Stay tuned for the latest updates Follow me 🤙
If you Requirements
- iOS 12.2+
- Xcode 11+
- Swift 5.0+
Features
Included in this repository there are 2 layouts, further will be added others:
- App Store layout
- Carousel layout
- More contributing are very welcome
🙌
Example
First clone the repo, and run carthage update
from the root directory.
The example application is the best way to see EKCollectionLayout
in action. Simply open the EKCollectionLayout.xcodeproj
and run the Example
scheme.
Installation
CocoaPods
EKLayout is available through CocoaPods. To install
it, simply add the following line to your Podfile
:
pod 'EKCollectionLayout'
Carthage
Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.
To integrate EKCollectionLayout
into your Xcode project using Carthage, specify it in your Cartfile
:
github "ekamalov/EKCollectionLayout"
Run carthage update
to build the framework and drag the built EKCollectionLayout.framework
into your Xcode project.
On your application targets’ “Build Phases” settings tab, click the “+” icon and choose “New Run Script Phase” and add the Framework path as mentioned in Carthage Getting started Step 4, 5 and 6
Manually
If you prefer not to use any of the aforementioned dependency managers, you can integrate EKCollectionLayout
into your project manually. Simply drag the Sources
Folder into your Xcode project.
Usage
After installing the lib and importing the module EKCollectionLayout
. EKLayoutFlow
is a basic class inherited from UICollectionViewFlowLayout
.
let layout = EKLayoutFlow(minimumLineSpacing: 15, scrollDirection: .horizontal, itemSize: CGSize)
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
If you want to use a custom layout, use configurator
property. Also, you can create your configurators
. you can know how to create a configurator
on a contributing section.
/// Example
let layout = EKLayoutFlow(minimumLineSpacing: 15, scrollDirection: .horizontal,
itemSize: .init(width: 325, height: 225))
layout.configurator = EKCarouselLayout(scaleItemSize: .init(width: 325, height: 200))
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
Carousel
EKCarouselLayout
this layout is a simple horizontal layout that snaps elements to center. The first item is centered by default leaving white space on the left.
// Example
let layout = EKLayoutFlow(minimumLineSpacing: 15,
scrollDirection: .horizontal,
itemSize: .init(width: 325, height: 225))
layout.configurator = EKCarouselLayout(scaleItemSize: .init(width: 325, height: 200))
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
AppStore
EKAppStoreLayout
this layout is a simple layout from AppStore
let layout = EKLayoutFlow(minimumLineSpacing: 15,
scrollDirection: .horizontal,
itemSize: .init(width: 325, height: 225))
layout.configurator = EKAppStoreLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
Contributing
Contributions are very welcome EKLayoutConfigurator
protocol. you can create you're a class and implement protocol methods. In the base class configurator
there is a property of the configurator. this property accepts only the class that implemented
EKLayoutConfigurator
protocol.
@objc public protocol EKLayoutConfigurator {
/// This method uses it to calculate and return the width and height of the collection view’s content.
/// - Parameter flow: Layout object
@objc optional func collectionViewContentSize(flow:EKLayoutFlow) -> CGSize
/// This method used to prepare items for displaying
/// - Parameter flow: Layout object
@objc optional func prepare(layout flow:EKLayoutFlow)
/// The collection view calls -prepareLayout once at its first layout as the first message to the layout instance.
/// - Parameter flow: Layout object
@objc optional func prepareCache(flow:EKLayoutFlow) -> [IndexPath: UICollectionViewLayoutAttributes]
/// This method uses to control the cell.
/// - Parameter flow: Layout object
/// - Parameter attributes: A layout object that manages the layout-related attributes for a given item in a collection view.
@objc optional func transform(flow:EKLayoutFlow, attributes: UICollectionViewLayoutAttributes)
/// This method uses it to return the point at which to stop scrolling.
/// - Parameter flow: Layout object
/// - Parameter proposedContentOffset: The proposed point (in the collection view’s content view) at which to stop scrolling. This is the value at which scrolling would naturally stop if no adjustments were made. The point reflects the upper-left corner of the visible content.
/// - Parameter velocity: The current scrolling velocity along both the horizontal and vertical axes. This value is measured in points per second.
@objc optional func targetContentOffset(flow:EKLayoutFlow, proposedContentOffset: CGPoint, velocity: CGPoint) -> CGPoint
}
For clarity, you can look at layouts that I implemented Carousel
layout.
License
EKCollectionLayout
is released under the MIT license. Check LICENSE.md for details.
MIT License
Copyright (c) 2019 Erik Kamalov <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.