Comments (7)
Hi @Gantaios! Thank you for your notice.
In order to have direction of the layout vertical, not from right to left, one have to rewrite the class to use contentOffset.y
.
Implementing this feature is on my roadmap. I will try to add it as soon as possible.
from cardslayout.
I have the same request. 👍
UPDATE : Looked into the code and did it myself.... https://pastebin.com/KjiYipEu
Cheers!
from cardslayout.
@Viscmad Hey! That's nice! Do you want to form it in separate Pull Request?
from cardslayout.
@filletofish Done 👍 :D
from cardslayout.
guys, how can I do for direction left to right? :)
from cardslayout.
I tested the @filletofish answer but the scroll has weird issues & it's not perfect. is there any other solution to change scroll direction to vertical?
from cardslayout.
Finally I came up with this:
import UIKit
open class CardsCollectionViewLayout: UICollectionViewLayout {
// MARK: - Layout configuration
public var itemSize: CGSize = CGSize(width: 200, height: 100) {
didSet{
invalidateLayout()
}
}
public var spacing: CGFloat = 10.0 {
didSet{
invalidateLayout()
}
}
public var maximumVisibleItems: Int = 3 {
didSet{
invalidateLayout()
}
}
// MARK: UICollectionViewLayout
override open var collectionView: UICollectionView {
return super.collectionView!
}
override open var collectionViewContentSize: CGSize {
let itemsCount = CGFloat(collectionView.numberOfItems(inSection: 0))
return CGSize(width: collectionView.bounds.width * itemsCount, height: collectionView.bounds.height * itemsCount)
}
override open func prepare() {
super.prepare()
assert(collectionView.numberOfSections == 1, "Multiple sections aren't supported!")
}
override open func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let totalItemsCount = collectionView.numberOfItems(inSection: 0)
let minVisibleIndex = max(Int(collectionView.contentOffset.y) / Int(collectionView.bounds.height), 0)
let maxVisibleIndex = min(minVisibleIndex + maximumVisibleItems, totalItemsCount)
let contentCenterX = collectionView.contentOffset.x + (collectionView.bounds.width / 2.0)
let deltaOffset = Int(collectionView.contentOffset.y) % Int(collectionView.bounds.height)
let percentageDeltaOffset = CGFloat(deltaOffset) / collectionView.bounds.height
let visibleIndices = minVisibleIndex..<maxVisibleIndex
let attributes: [UICollectionViewLayoutAttributes] = visibleIndices.map { index in
let indexPath = IndexPath(item: index, section: 0)
return computeLayoutAttributesForItem(indexPath: indexPath, minVisibleIndex: minVisibleIndex, contentCenterX: contentCenterX, deltaOffset: CGFloat(deltaOffset), percentageDeltaOffset: percentageDeltaOffset)
}
return attributes
}
override open func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let contentCenterX = collectionView.contentOffset.x + (collectionView.bounds.width / 2.0)
let minVisibleIndex = Int(collectionView.contentOffset.x) / Int(collectionView.bounds.width)
let deltaOffset = Int(collectionView.contentOffset.y) % Int(collectionView.bounds.height)
let percentageDeltaOffset = CGFloat(deltaOffset) / collectionView.bounds.height
return computeLayoutAttributesForItem(indexPath: indexPath, minVisibleIndex: minVisibleIndex, contentCenterX: contentCenterX, deltaOffset: CGFloat(deltaOffset), percentageDeltaOffset: percentageDeltaOffset)
}
override open func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
}
// MARK: - Layout computations
fileprivate extension CardsCollectionViewLayout {
private func scale(at index: Int) -> CGFloat {
let translatedCoefficient = CGFloat(index) - CGFloat(self.maximumVisibleItems) / 2
return CGFloat(pow(0.95, translatedCoefficient))
}
private func transform(atCurrentVisibleIndex visibleIndex: Int, percentageOffset: CGFloat) -> CGAffineTransform {
var rawScale = visibleIndex < maximumVisibleItems ? scale(at: visibleIndex) : 1.0
if visibleIndex != 0 {
let previousScale = scale(at: visibleIndex - 1)
let delta = (previousScale - rawScale) * percentageOffset
rawScale += delta
}
return CGAffineTransform(scaleX: rawScale, y: rawScale)
}
func computeLayoutAttributesForItem(indexPath: IndexPath, minVisibleIndex: Int, contentCenterX: CGFloat, deltaOffset: CGFloat, percentageDeltaOffset: CGFloat) -> UICollectionViewLayoutAttributes {
let attributes = UICollectionViewLayoutAttributes(forCellWith:indexPath)
let visibleIndex = indexPath.row - minVisibleIndex
//Using this to fill up screen with card with fixed % of margin
attributes.size = CGSize(width: (collectionView.bounds.width - ((collectionView.bounds.width * 2)/100)), height: (collectionView.bounds.height - ((collectionView.bounds.height * 4)/100)))
let midY = self.collectionView.bounds.midY
attributes.center = CGPoint(x: contentCenterX , y: midY + spacing * CGFloat(visibleIndex)) // MARK: this x spacing value is the key to home page center cell xposition
attributes.zIndex = maximumVisibleItems - visibleIndex
attributes.transform = transform(atCurrentVisibleIndex: visibleIndex, percentageOffset: percentageDeltaOffset)
switch visibleIndex {
case 0:
attributes.center.y -= deltaOffset
case 1..<maximumVisibleItems:
attributes.center.y -= spacing * percentageDeltaOffset
if visibleIndex == maximumVisibleItems - 1 {
attributes.alpha = percentageDeltaOffset
}
default:
attributes.alpha = 0
}
return attributes
}
}
from cardslayout.
Related Issues (18)
- How to achieve from opaque to transparent between the card? HOT 1
- Support for visibility of previous cell HOT 2
- How to change the offset of the cell behind the first item? HOT 2
- Scroll cell on button click HOT 1
- Disable swipe to previous card HOT 1
- Crash on Calling Collection Reload HOT 1
- Infinite Scroll HOT 2
- Cards Size issue HOT 1
- Shadow with cards HOT 1
- Card Swipe not working
- Wrong IndexPath on Cells via OjbC Bridging HOT 1
- Animation
- how to make it auto scroll HOT 1
- Unable to use scrollToItem HOT 4
- iPhone 5 Does not fit the cell correctly.
- Unable to resolve the pod HOT 2
- Move card programatically HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cardslayout.