jonivr / verticalcardswiper Goto Github PK
View Code? Open in Web Editor NEWA marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.
License: MIT License
A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.
License: MIT License
I'm just going to use this issue to document this bug, so people know I'm aware of it and looking for fixes. The bug is a visual animation glitch that sometimes happens when the user swipes away a card. I personally think it's related to resetting the anchorPoint of the CardCell, but I'm not sure about it yet.
After some testing I think this bug is caused by calling
self.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
inside of layoutSubviews()
in the CardCell
. We have to do this to reset the anchorPoint (x: 0.5, y: 0.5 is the default anchorPoint).
The problem is that we're manipulating the anchorPoint to animate the card, but need to reset the anchorPoint after calling resetToCenterPosition()
. We can't reset the anchorPoint inside of resetToCenterPosition()
(as far as I'm aware) because that screws up the animation. So I tried putting it in layoutSubviews()
, this worked for the most part, except that it is causing this behaviour (you can test when it's getting called by putting a print statement inside of layoutSubviews).
So I need to find a way to reset the anchorPoint after calling resetToCenterPosition()
and before the user starts scrolling. I'm just not sure where to put it as of now.
edit: After some further testing it looks like the issue is not related to the anchorPoint being reset, looking into it further to find the cause.
As always, any help is always appreciated, if you found a fix or have a solution before I do, feel free to create a Pull Request or respond to this issue.
After following the steps outlined in the readme, I get the following error in viewDidLoad on the line: cardSwiper.datasource = self
Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value
causing the app to crash on startup.
When isStackOnBottom is set to false, I scroll to the last card so I simulate the stack of cards from top and then either score left/right or just skip the card. But if there are cards on bottom and I swipe the focusedCard, card from bottom comes up. Is it possible to change this to when I swipe a card the next card scroll from the top?
Steps to reproduce:
swipeAbleArea
in VerticalCardSwiper.swift
on line 258
Temporary solution for other developers:
When switching between portrait and landscape the layout does not update. If however I remove a card by swiping left or right, it then updates.
Is there a way to force this layout update on orientation change?
Sliding a card all the way to the side and releasing doesn't call "UIGestureRecognizerStateEnded".
This causes the card to be stuck on the side. Reason for this bug is because the finger that is dragging the card is not in the card area anymore.
code inside
if let swipedCardIndex = collectionView.indexPathForItem(at: locationInCollectionView)
is not reached, which is why code inside .ended never gets executed.
Hey,
After following the how to use section, I'm running into an error:
"Type 'XYViewController' does not conform to protocol 'VerticalCardSwiperDatasource'" and wants to add the "cardForItemAt" function, however, its implemented as it was described:
func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {
let cardCell = verticalCardSwiperView.dequeueReusableCell(withReuseIdentifier: "ExampleCell", for: index) as! ExampleCardCel
return cardCell
}
This function has a warning btw: "Cast from 'UICollectionViewCell' to unrelated type 'ExampleCardCell' always fails"
The only difference in my code is that i dont use storyboard, so this is how the viewDidLoad looks like:
override func viewDidLoad() {
super.viewDidLoad()
cardSwiper = VerticalCardSwiper(frame: self.view.bounds)
cardSwiper.datasource = self
cardSwiper.register(ExampleCardCell.self, forCellWithReuseIdentifier: "ExampleCell")
}
I'm experience this in xCode 10 and Swift 4.2
How to Set View and image on the card while card is swipe right or left. i tried but i can'nt set properly after the swipe direction none. please help me to solve out this problem.
[28933:533995] [UICollectionView] Invalid update: invalid number of items in section 0. The number of items contained in an existing section after the update (20) must be equal to the number of items contained in that section before the update (20), plus or minus the number of items inserted or deleted from that section (0 inserted, 1 deleted) and plus or minus the number of items moved into or out of that section (0 moved in, 0 moved out). - will perform reloadData. UICollectionView instance: <VerticalCardSwiper.VerticalCardSwiperView: 0x7f966c912000; baseClass = UICollectionView; frame = (0 0; 414 482.333); clipsToBounds = YES; userInteractionEnabled = NO; gestureRecognizers = <NSArray: 0x6000016ca5b0>; layer = <CALayer: 0x600001888ac0>; contentOffset: {-20, 3921.3333333333335}; contentSize: {374, 4361.3793103448279}; adjustedContentInset: {40, 20, 90, 20}; layout: <VerticalCardSwiper.VerticalCardSwiperFlowLayout: 0x7f966c42d390>; dataSource: <VerticalCardSwiper.VerticalCardSwiper: 0x7f966c452760; frame = (0 0; 414 482.333); layer = <CALayer: 0x600001888900>>>; currentUpdate: [UICollectionViewUpdate - 0x7f966c48e5c0: old:<UICollectionViewData: 0x6000021a5880> new<UICollectionViewData: 0x6000021216c0> items:<(
"D(0,18)"
)>]
Is there anyway I can change the number of visible cards on the stack? The default is 2, the card that is showing and another one behind, and I need more than that. Help would be appreciated.
i have a view struct likes
JPMain(extends VerticalCardSwiperDelegate) --> JPCell(CardCell) --> Canvas(UIView in JPCell)
i try to control the cell gesture, hope to forbid the sliding up or down. then i find a nice solution that modify the below function
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool
but i failed. so i want to know how to forbid the sliding gestures for VerticalCardSwiper. looks like it’s here
extension VerticalCardSwiper: UIGestureRecognizerDelegate
expected:
i want the VerticalCardSwiper can't slide up or down when i handle some gesture in Canvas
Can you help me?
When you are at the end of the stack and still have some cards left, swiping away the last card will cause the animation to glitch. This is probably something that needs to be fixed inside the updateCellAttributes
function.
edit:
Stackoverflow Question
Is there a way i could skip straight to whatever card of the stack? So the user can go back and forth starting from that card.
Thanks!
The document shows that:
Get the current focussed card index
cardSwiper.focussedIndex
But when I use cardSwiper.focussedIndex
, Xcode shows an error:
Value of type 'VerticalCardSwiper' has no member 'focussedIndex'
Is there something wrong with me ?
Is it possible to have multiple types of Cards?
I have problems adding the library to my podfile
I enter pod 'VerticalCardSwiper', '0.1.0-beta6' in my podfile and it gives me an error [!] Unable to find a specification for VerticalCardSwiper (= 0.1.0-beta6)
Right now If I am resizing the cardView the card cells are not adjusting to the new frame.
Steps:
on reloading the CardView it is still giving me some random behavior because of the previous collection view height.
Hello,
I do not have a bug to report but more of a request for help with the use of this project.
I discovered this repo earlier tonight and I love it so far. For my own project, I am trying to get the cards to swipe on a horizontal plane (from left to right and vice versa). I do not need the functionality to swipe away cards, simply to scroll horizontally.
I've been playing around with VerticalCardSwiperFlowLayout
but am getting all kinds of wacky animations. Any help would be appreciated.
medias.observe(.value) { (snapshot) in guard let postsSnapshot = PostMedias(with: snapshot) else { return } self.medias = postsSnapshot.medias self.cardSwiper.reloadData() }
my code is working but when I want to add Card Wiper using reload data, nothing is there.
Hello!
I want to scroll to the specified item, but I read #23 this answer and found that there is no cardSwiper.scrollToCard
method... 🤔
English is not my native language; please excuse typing errors.
Hi,
I have a AVPlayerLayer in CardCell, and when I check different approaches like if the AVPlayerLayer is visible, I get true even if the CardCell is not on top of stack, but behind another card (ex. ImageCardCell).
I would like to pause the video when CardCell goes back when scrolling, but I always get value true or a full height when I check in didEndScroll if the AVPlayerLayer is visible. Is there a way to check this?
I hope my question was clear.
Thanks for your help.
I want to set the view on left or right swipe. in short i need to differentiate like and dislike with Above view
Hello, thanks for sharing this library. Exactly what I was looking for. I found one problem which I can't explain its behaviour and where is it coming from. I need to use the index of the visible cell to save it as a progress, so next time the user loads the collection view with the specific theme, it can scroll to index where it was left last time.
It's straight forward implementation, but the issue is, for whatever reason, the count always ignores index "3" and it goes like this: 1, 2, 2, 4, 5, .... even swiping backwards ...5, 4, 2, 2, 1
Home.swift:
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let visibleIndexPath = collectionView.indexPathsForVisibleItems
let lastCardIndex = visibleIndexPath[0].row + 1
print("visible index: \(lastCardIndex)")
}
Where do I look within the code to tackle this?
Also, the very last card has an offset on Y axe. I couldn't figure out where to disable it. I'd like to animate the last card the same way and keep it in centre of the view as the other cards. The idea is to:
Thank you for your suggestions
Kind regards
A.
I have tried a few different methods, but do you have an entirely programmatic to load (and lazy load) and cardSwipe view controller?
Rather than
@IBOutlet var cardSwiper: VerticalCardSwiper!
It would be something like
var cardSwiper: VerticalCardSwiper = VerticalCardSwiper()
Thanks!
Can no longer install with CocoaPods:
"Unable to find a specification for `VerticalCardSwiper"
Can I off the animation when the previous card goes behind?
I tried to find an option so that I can on/off the scale&fade animation when the cards goes behind but I couldn't.
So I triedn to comment out the codes regards animation and changing scale in the file CardCell.swift
, but it seems disable animation is not working.
I commented out the logic in the function named resetToCenterPosition()
, and animateCard(angle:, horizontalTranslation:)
Please point out if anything wrong, or anything that I missed.
Hello,
I need to know, I am at the end of the collection, is it possible somehow?
BR,
Steps to reproduce:
UIViewController
and add UILabel
inside of it, stretch label to edges with constraintsview
as subview to CardView
, stretch VC's view
to edges of CardView
with constraintsI cloned the project in the attempt to include the stack effect for the vertical collection as in Shazam. I managed to do so except the fact that sometimes the stack displays two cards behind, sometimes three. Did you came across this problem when trying to implement this effect ? I think the problem is the third cell (which should be displayed in the background always when the indexPath is greater or equal to 2) sometimes gets deallocated, sometimes it doesn't. Do you have any guess on this ?
Thank you.
Is it possible to slow down the animation of scrollToCard(at:animated) method ?
I was trying to slow it done with:
UIView.animate(withDuration: 2.0, animations: {
self.view.setContentOffset(point, animated: false)
})
and
UIView.animate(withDuration: 2.0, animations: {
self.view.scrollToCard(at: cards.count, animated: false)
})
and both of the methods don't seem to work for me.
In spite cardSwiper.delegate is set to self correctly, the method willSwipeCardAway and didSwipeCardAway are not called while didEndScroll and didScroll are called.
Is there a dependency on some properties at a base of this behaviour? Any idea?
Add any other context about the problem here.
I'm trying to animate the cardCell with a basic flip animation, with alpha change to show/hide the other view. This works perfectly with UICollectionView.
https://github.com/hemo87/ExampleAnimation
But the same code with this library just won't work, it refuses to do the alpha animation, as shown here.
https://github.com/hemo87/ExampleWithVeticalCardSwiper
Im assuming this is a bug as I'd expect it to still behave like UICollectionView?
Hello,
There is a tiny bug that prevents users to add item at a runtime.
In order to fix this, I have changed
this;
public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.numberOfCards
}
to this:
public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return datasource?.numberOfCards(verticalCardSwiperView: verticalCardSwiperView) ?? 0
}
BR,
Erdem
I want to display 3 cells at a single point of time.
Right now I can display one cell at the background and I want to display 2 or 3 cells.
Is there a method for only scrolling down rather than allowing scrolling both ways? Disabling the last card just swiped to be visible again? Cheers
Is there a way to hide a previous card after scrolling up. I have tried to implement isPreviousCardVisible: Bool = false
both in code and in IB, but previous card is always visible
Thanks!
Hi Joni,
I came across little problem, not a bug. I want to make my app universal using your repo and everything works just fine, except I am not sure if I like the large cells on iPad display. It's too chunky for my app and what it offers. I tried to make the cell smaller just for the iPad in layoutSubviews()
method in the UICollectionViewCell class:
if Device.isIpad() == true{
let screenSize: CGRect = UIScreen.main.bounds
self.frame = CGRect(x: (screenSize.width / 2) - 185, y: 0, width: 370, height: 700)
}
As you can see, I want to keep the cell size on the iPad similar to what's on the iPhone, just slightly larger. It resizes to what I am intending to do, but only the first cell. The rest of the cells are back to the original specs - almost full screen. Where do I need to make the necessary changes in the code, so all the cells will be affected please?
Thank you for your time and advice
A.
It would be cool if we could animate the card off the screen based on a button press. If anyone has done this already, please help.
This would be kind of like scrollToCard.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
A clear and concise description of what you want to happen.
A clear and concise description of any alternative solutions or features you've considered.
Add any other context or screenshots about the feature request here.
Is there a way to disable scrolling to the next card? For instance if tapped the first card, then you are allowed to scroll to next card. After you have scrolled to the second card, you have to tap that card to be able to scroll to third card, etc.
CardSwiper.reloadData() does not work
CardSwiper.reloadData() does not work
Attempt to download data from the database and load before the card number function and do not reload after displaying the number of letters,
Please help !!
Thank you
Is there a possibility to reverse the approach, like have a stack of cards and then either swipe left/right or just scroll card to bottom, and swipe up if you want to bring back the scrolled card?
I’m trying to add a UITapGestureRecognizer to one of the cards in order to present a modal when the card is tapped, but the recognizer isn’t working.
It works fine when VerticalCardSwiper isn’t being used.
Now when I swipe 20-30% then card goes to left and right. But I want ratio of 5%. When I just swipe 5% then card should be goes to left and right.
Where I need to change ?????
How did horizontal achieve this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.