iOS - UIGestureRecognizer In UITableViewCell Similar To Snapchat - ios

Question

I'm trying to implement functionality in my practice app very similar to that of Snapchat, where you drag a UITableViewCell to the right or left, and as you're dragging, an image behind the view is slowly appearing until it reaches a certain point, and after it does, it starts a segue or PageViewController type segue to another view controller that you can use to chat with your friend.
At first, I tried using the screen edge pan gesture recognizer, but that only works if you start swiping from the edge of the screen. I need to be able to swipe from anywhere within the UITableViewCell.
A demonstration of my needed functionality is in Snapchat, where you see it more clearly when you slowly swipe right on one of your friend's table cell's and it slowly shows the image of a messaging icon and eventually leads to another view where you can chat.
So would a pan gesture recognizer be enough for this? If so, what would be the best method to follow to get this done? I've seen tutorials on pan gesture recognizers but I don't see how it could eventually lead to another view controller after swiping a certain distance. I think I could get away with putting the messaging icon behind the displayed table cell content that could appear while swiping right, but how could I implement such smooth functionality?
Learning this would really increase my experience in smooth user experience. Any advice or methods would be greatly appreciated, thanks.
EDIT: Please leave answers in Objective C, please. I don't know Swift.

Answer 1

You can create a custom TableViewCell for this. Code below should do what you're asking. Just need to add the delegate to your ViewController
protocol TableViewCellDelegate {
func something()
}
class TableViewCell: UITableViewCell {
var startSegue = false
var label: UILabel // Or UIView, whatever you want to show
var delegate: TableViewCellDelegate? // Delegate to your ViewController to perform the segue
required init(coder aDecoder: NSCoder) {
fatalError("NSCoding not supported")
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
// Utility method for creating the label / view
func createLabel() -> UILabel {
let label = UILabel(frame: CGRect.nullRect)
// Add label customization here
return label
}
// Create "check" & "cross" labels for context cues
label = createLabel() // Create the label
label.text = "\u{2713}" // Add check symbol as text
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(label)
// Add a pan recognizer
var recognizer = UIPanGestureRecognizer(target: self, action: "handleSwipe:")
recognizer.delegate = self
addGestureRecognizer(recognizer)
}
let cueMargin: CGFloat = 10.0, cueWidth: CGFloat = 50.0
override func layoutSubviews() {
// The label starts out of view
label.frame = CGRect(x: bounds.size.width + cueMargin, y: 0, width: cueWidth, height: bounds.size.height)
}
func handleSwipe(recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translationInView(self)
if recognizer.state == .Changed {
center = CGPointMake(center.x + translation.x, center.y)
startSegue = frame.origin.x < -frame.size.width / 2.0 // If swiped over 50%, return true
label.textColor = startSegue ? UIColor.redColor() : UIColor.whiteColor() // If swiped over 50%, become red
recognizer.setTranslation(CGPointZero, inView: self)
}
if recognizer.state == .Ended {
let originalFrame = CGRect(x: 0, y: frame.origin.y, width: bounds.size.width, height: bounds.size.height)
if delegate != nil {
startSegue ? delegate!.something() : UIView.animateWithDuration(0.2) { self.frame = originalFrame }
}
}
}
// Need this to handle the conflict between vertical swipes of tableviewgesture and pangesture
override func gestureRecognizerShouldBegin(gestureRecognizer: UIGestureRecognizer) -> Bool {
if let panGestureRecognizer = gestureRecognizer as? UIPanGestureRecognizer {
let velocity = panGestureRecognizer.velocityInView(superview!)
if fabs(velocity.x) >= fabs(velocity.y) { return true }
return false
}
return false
}
}
I got this from this tutorial
EDIT:
In your ViewController you'll have to 'register' this TableViewCell by using:
yourTableName.registerClass(TableViewCell.self, forCellReuseIdentifier: "cellIdentifier")
And your TableViewDataSource for cellForRowAtIndexPath would look like:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cellIdentifier", forIndexPath: indexPath) as TableViewCell
cell.delegate = self
// Add stuff for your other labels like:
// "cell.name = item.name" etc
return cell
}
If you want to pass data back to the ViewController, just use the delegate.