UICollectionViewCell position wrong after animating - ios

So I'm trying to build an open source library combo between Shazam Discover and Tinder based on a UICollectionView with a custom UICollectionViewFlowLayout.
I'm having an issue where, after animating a cell the the side (e.g. swiping it away to the side), the cell will stay in that position when it is being reused by the UICollectionView. (I'm guessing that cell reuse is the issue here since it only seems to happen after scrolling a couple of cells)
Is there any simple way to fix this behavior? Or am I doing something else wrong here? Been looking at it for a couple of days but can't seem to find a fix myself.
You can try/check out the code on Github
I tried posting some code snippets but I'm not sure which ones I should post here since it's a lot of code. If I should post code on here, let me know.
Any help is much appreciated. Have a nice day :)
Here's a demo of what's happening:

Outside of the cell class, in HomeVC, where you handle panning to swipe the card away you manipulate also the layer's anchorPoint - you need to reset that to make drawing work as before:
override func prepareForReuse() {
super.prepareForReuse()
// reset to default value (https://developer.apple.com/documentation/quartzcore/calayer/1410817-anchorpoint)
self.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
}

Related

Ios Swift Adding UIImageView with a transition / effect

I added multiple UIImageView to a Viewcontroller with Swift Code like that:
let imageView_pergament = UIImageView(image: UIImage(named: "pergament.png")!)
...
...
view.addSubview(imageView_pergament)
And I would like that they shows up with an transition like effect (pixel in etc.)
Can someone please help with that did not find a solution yet. Same would be good for removing / hiding them. Maybe, I just need to put a view around it?
Thanks a lot for any help.
In iOS, the easy way to perform animation as a view is added or removed is by calling animate:
https://developer.apple.com/reference/uikit/uiview/1622451-animate
One typical strategy is to add the view with alpha of 0 and animate the change of alpha to 1, thus causing the view to "fade in". However, by animating the transform you can achieve vastly more interesting effects if you wish.

How to make this kind of animation?

I need some kind of start point or concept advise on how to get this kind of animation, like in stock iOS calendar app.
I need infinite scrolling view, animating day numbers and date. If there is some Calendar app clone where this part presents, I would appreciate link. I have searched a lot in Github, but couldn't find particularly this part. Is it only page control on scrollable area and just labels on top? How I get the circle part to invert font? Or is it 2 sets of pictures from 1 to 31?
Not enough rep to comment, but I think I might be able to shed at least a little bit of light. I just had a similar problem with the scroll view part. To get it to switch the date at the top, implement scrollViewDidScroll inside your scrollView class. Like this:
func scrollViewDidScroll(scrollView: UIScrollView){
let xOffset = scrollView.contentOffset.x;
if xOffset >= currentViewsFarRightSide
{
//move date to the next date
}
}
So you are checking the xOffset of the scroll view and once it has reached the next multiple of the screen width, it jumps to the next date above. Now for the inverting and stuff, there might be a better way, but having two images would also work like you suggested. You can even create a transition and inside the if statement you could do a
UIView.animateWithDuration
With your image transition and it could look pretty nice. Hope I helped in some way. Good luck!

Facebook Paper-like table cells animation

I'm trying to implement transition used in settings menu in Facebook's Paper app: http://blog.brianlovin.com/design-details-paper-by-facebook/#1. I'm using my custom UIViewControllerAnimatedTransitioning object, but I can't achieve the same effect, no matter what type of animation I'm using. So I have some questions:
1) Which animation is used? It looks like cells start to move really fast, and then halt to their final position. Looks like I need POPDecayAnimation, but the result isn't even close.
2) Is delay between animations achieved with setting animation's beginTime depending on cell's index? Or first cells have bigger velocity than last cells?
As Injectios suggested AMWaveTransition is kinda close to Paper's animation. I ended up using it with some adjustments.
I also asked this question on pop github page, you can view it here. Their answer might be useful if you want to implement this animation yourself:
Hey! I implemented that in Paper. The animations on each cell are POPSpringAnimations, and they're connected together by (every frame) updating the toValue of each animation to point to the current value of the one before. Hope that helps!
In cellForRowAtIndexPath, use UIViewAnimation block.
Set cell properties as per your requirement:
indentationLevel
indentationWidth
shouldIndentWhileEditing
Then in animation block, change frame position.
For example for first cell, indetationLevel = 1, and indentationWidth = cell.frame.size.width, then update it to indetationLevel = 0 and indentationWidth = 0 in that animation block. And for the further cells you can multiply this values by (cellIndexPath+1)
For more details visit : https://developer.apple.com/library/ios/Documentation/UIKit/Reference/UITableViewCell_Class/index.htm
P.S.: Update the logic as per your requirement

How to make SWTableViewCell swipe more sticky

I've implemented the SWTableViewCell code in order to allow side swipes to reveal more UI, such as buttons.
Which is working fine, except that the UIScrollview it subclasses is really just too touchy, flicking back and forth like a manic game of ping pong.
I went to make changes to the class, but realised UIScrollView didn't seem to give me the ability to say change the way the scrolling animations work in the way I wanted.
Leaving me thinking that I either need to create my own version of the a Swipe cell, with a pan gesture and a overlay view, instead of a scrollview or find someone who has already solved this problem.
Please check it out sample: https://github.com/runmad/RMSwipeTableViewCell
May be it will helpful to you, Sir
:)
Not sure if this will give you the effect you desire, but you can make it less "jumpy" by altering the decelerationRate. Try:
someScrollView.decelerationRate = UIScrollViewDecelerationRateFast;
If that's the right idea, you can jump-to-definition in Xcode, and checkout the float value, then try your own.

iOS table cells with fixed images

I'm developing an ios app and am trying to achieve an effect in a tableview like the following website: http://www.poormet.com/
There is a couple of ways I have thought about this. I know you can set the background of the tableview which remains fixed and then you could possibly swap the images as the text box covers the image. This is limited though as you can only have one image on the screen at a time which is not what I'm after.
I also thought about pushing the image down for each cell as the cell moves up, but for this case I couldn't set the frames position in the scrollViewDidScroll method(which I used to obtain the frames actual position in the tableview).
I was also wondering if there was anything similar in ios to what you have with div's in html where you can specify an image to be fixed.
How would I go about doing this? If you guys need any more information let me know, I'm new to posting on this site.
Thanks.
I think you should be able to do this through scrollViewDidScroll. I'm guessing you already have subclassed UITableViewCell and made your own, so heres a thought:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
for(UITableViewCell *cell in [yourTableView visibleCells])
{
//I haven't tried this `convertRect` method, and the views might be in the
//wrong order, but I'm sure you'll figure it out. It should solve this.
CGRect position = [yourTableView convertRect:cell.frame toView:self.view]
[((YourCustomCell*)cell) updateImage:position];
}
}
Then in your custom cell class, add a method named -(void)updateImage:(CGRect)position; which will now contain the location of the cell, and you can move the image whatever way you want, as I'm guessing you already have a method for. I.E:
-(void)updateImage:(CGRect)position
{
//change the location of the image inside self.imageView here
}

Resources