I have a UITableView and would like to have a custom way to delete my cells. When someone swipe on it, the cell would move horizontally on the side and disappear.
Exactly like the multitasking menu on iOS 7 (http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/shared_multitasking/shared_multitasking_2x.mp4), but instead of swiping vertically, it would be horizontal.
Does any one knows how to do that? Should I just detect a swipe and change the frame of my cell with a 1 sec animation? Or are there nice subclasses of UITableViewCell you would recommend?
I just threw together a very basic example of how to do this and posted it here: https://github.com/NSPostWhenIdle/MMSwipeToDeleteCollection. Don't expect to be able to drag and drop this into your project and have it work, because quite frankly it probably won't.
The basic idea to create something like this starts with a subclass of UICollectionViewCell that adds a gesture to the cell. In my example, I used a swipe gesture because I'm lazy :p and there is more overhead involved in setting up a pan gesture (which you'll want in your end product) because there is conflict between that pan gesture, and the pan gesture in the collection view's scroll view.
From there it's basically smooth sailing. When the gesture recognizer gets called you animate the cell out the top of the screen. If you set this up with a pan gesture, you'll need to configure this to drag the cell, and animate up or down upon completion, but in my swiping example, the cell moves to just out the top (of the 4 inch simulator, I used static values).
Then all that's left to do is some clean up. Once the cell has exited the screen you can safely delete it from your datasource and then from the collection view. (I used notification center do alert the collection view, but you should probably make a protocol) The only issue I had with this was that the cell animated back down while fading out as part of the stock deletion animation. Setting its alpha to 0 after it leaves the screen solves this problem.
Related
When I initiate movement for my collectionView cells, the cells do not move. They move only when I pan my finger over another cell. So if I initiate a movement by pressing one of my cells and then pan, the cells do not track my finger. The only time animation occurs is when my finger pans over another cell. At that point the animation is just the reordering. Bonus: One I end my gesture (lift up my finger) the current cell I was moving around disappears from view. I am using a custom flow layout
My custom flowLayout is stopping the animation. In my custom layout I set the frames of my cells (their attribute frames) to a specific position that is hardcoded in my layout. When the long press gesture is initiated I have to change my attributes somehow.
You don't need to update your attributes. Just make sure you are overriding these methods in your custom layout:
layoutAttributesForElements
layoutAttributesForItem
layoutAttributesForSupplementaryView
How do i apply UIRefreshControl(or something similar) on every cell of a UICollectionView.
I need to invoke an event when cell is swiped to left side and released(if not released but swiped back to its original position, then take no action).
Apple uses UIScrollView extensively for this kind of thing.
Add a (horizontally scrolling) UIScrollView to the cell. Then make the cell the delegate of it.
Now you can pick up whenever it is scrolled and do something if it scrolls past a certain point.
So I have a table view and I'd like the user to be able to swipe left to reveal a delete button, identically to how it works in the mail app. My issue is not that I can't get this to work - it does, I can swipe the row left, it reveals a delete button, and the user can click it to delete the cell (I do this by implementing editingStyleForRowAtIndexPath). My issue is that the swipe that is required is extremely insensitive. You have to swipe very fast and perfectly horizontally. It is not nearly as smooth as the swiping in mail. Is this just the way it is or am I overlooking something?
I thought maybe the views in the cell were blocking the swipe gesture somehow, but I went into the xib and set everything to hidden and it still is extremely difficult to swipe. The other thing I tried was to add my own swipe gesture recognizer to trigger the delete show. I tried adding it to the cell (that didn't work), to the table view (nope), and I also tried adding a clear colored UIView as a frontmost subview and putting it on that, but still no. Any ideas?
EDIT:
I just created a new project to test the responsiveness of the editing style delete feature - very very simple table view just to see how it works. It is MUCH easier to swipe than the cell in my actual project. There aren't many differences between my test project and my actual one: actual loads a xib on cellForRowAtIndexPath while in test project it uses default styled cell, actual project has imageviews and uilabels within cell while test project is just a uilabel... what could be making it so unresponsive?
It turns out there was a competing gesture recognizer hidden in a superclass I was completely oblivious to. Once I realized that, it was easily solved by disabling the other recognizer for that screen (although I believe there would be a more correct way of doing it by setting gesture recognizer priorities). Anyway, if you are having similar issues - really strange/ unexpected behavior from a UIGestureRecognizer - I would ensure there is no other gesture recognizer interfering.
You could try to "roll your own". In the built-in UITableView, we are probably responding to a leftward swipe gesture recognizer (the gesture for which, as you say, must be quick and very horizontal in order to recognized). The way this works in Mail, on the other hand, is that the cell contents actually contains a UIScrollView, capable of being scrolled horizontally only - and that is what you are doing when you slide left, just dragging as you would with any scroll view. (That's why you can peek at the Delete button and then drag the message back to the right.)
I am following this excellent small tutorial about drawing on screen in the layer of a UIView (subclass).
http://spritebandits.wordpress.com/
It just works.
There is just one thing. I placed this view as subview of a UITableViewCell which, naturally, is displayed as part of a UITableView.
I guess I would have the same issue when I would place it within an UIScrollView. (UITableView inherits from UIScrollView anyway)
Touches are triggered by my painting view as long as their related movement is horizontal. As soon as I move the finger kinda vertical, even partly, then the UITableView takes over and scrolls the table.
Is there any proper way of stopping the Table to taike control of the touches while the touch is actually within my view?
If it is of importance: I am using storyboard. The cell is a prototype cell with its own subclass of UITableViewCell.
I've implemented this using the same class "Canvas" you're saying and also inside a UITableViewCell. But I didn't use the entire cell for drawing, only a UIView inside of the UITableView as a subview.
I reached the whole user experience by activating and deactivating the UITableView scrolling when that UIView (subview of the cell where I allow the drawing) fires touchesBegan or touchesEnded. So when they touch/move inside the UIView, they're drawing. When it's outside, they're scrolling. So they can't scroll on the UIView because they will be drawing.
The problem in your case is that since the whole cell is the view for drawing, the user cannot scroll in this concrete cell because it's the drawing one.
Hope this will help.
I dont have an answer for that. But there is essentially a work around.
You could get the user in to a drawing mode, where the scrolling for a UItableviewcell is disabled and then
once the user is done with drawing, you could enable scrolling again.
Inclusion of a button anywhere on the screen would help you switch modes.
How would I make the cells, below the one that I drag, go down, making a space for insertion?
Example.
I expect it to behave like following:
This is a pretty good implementation. Basically you have a a gesture recognizer to do a tap and hold and then pan around (the trick begin that you dont move the cell on the pan, you move a UIImageView with a snapshot of the cell)
As the cell moves, you detect which row is beneath, and move the table view's cells accordingly (e.g. with moveRowAtIndexPath:toIndexPath:)