Sepho/SwipyCell

Easy to use UITableViewCell implementing swiping to trigger actions (known from the Mailbox App)

SwipyCell

Swipeable UITableViewCell inspired by the popular Mailbox App, implemented in Swift.

Preview

Exit Mode

The .Exit mode is the original behavior, known from the Mailbox app.

Exit Mode

The .Switch is another behavior where the cell will bounce back after swiping it.

You can also implement a second trigger (shown in the Example below).

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects.

$ gem install cocoapods

To integrate SwipyCell into your project using CocoaPods, add it to your Podfile:

pod 'SwipyCell', :git => 'https://github.com/moritzsternemann/SwipyCell.git', :tag => '2.0.1'

Then run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.

Carthage can be installed with Homebrew using the following commands:

$ brew update
$ brew install carthage

To integrate SwipyCell into your project using Carthage, add it to your Cartfile:

github "moritzsternemann/SwipyCell" >= 2.0.0

Manual

Of course you can also add SwipyCell to your project by hand. To do this clone the repo to your computer and drag the SwipyCell.xcodeproj intp your project in Xcode. Then you have to add the SwipyCell.framework to your Embedded Binaries inside of your project's properties.

Usage

A complete example is available in the Example directory. The following code is a very basic example:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	let cell = SwipyCell(style: UITableViewCellStyle.subtitle, reuseIdentifier: "cell")
    cell.selectionStyle = .gray
    cell.contentView.backgroundColor = UIColor.white

    let checkView = viewWithImageName("check")
    let greenColor = UIColor(red: 85.0 / 255.0, green: 213.0 / 255.0, blue: 80.0 / 255.0, alpha: 1.0)

    let crossView = viewWithImageName("cross")
    let redColor = UIColor(red: 232.0 / 255.0, green: 61.0 / 255.0, blue: 14.0 / 255.0, alpha: 1.0)

    let clockView = viewWithImageName("clock")
    let yellowColor = UIColor(red: 254.0 / 255.0, green: 217.0 / 255.0, blue: 56.0 / 255.0, alpha: 1.0)

    let listView = viewWithImageName("list")
    let brownColor = UIColor(red: 206.0 / 255.0, green: 149.0 / 255.0, blue: 98.0 / 255.0, alpha: 1.0)

    cell.defaultColor = tableView.backgroundView?.backgroundColor
    cell.delegate = self

    cell.textLabel?.text = "Switch Mode Cell"
    cell.detailTextLabel?.text = "Swipe to switch"

    cell.setSwipeGesture(checkView, color: greenColor, mode: .switch, state: .state1, completionHandler: { (cell: SwipyCell, state: SwipyCellState, mode: SwipyCellMode) in
        print("Did swipe \"Checkmark\" cell")
    })

    cell.setSwipeGesture(crossView, color: redColor, mode: .switch, state: .state2, completionHandler: { (cell: SwipyCell, state: SwipyCellState, mode: SwipyCellMode) in
        print("Did swipe \"Cross\" cell")
    })

    cell.setSwipeGesture(clockView, color: yellowColor, mode: .switch, state: .state3, completionHandler: { (cell: SwipyCell, state: SwipyCellState, mode: SwipyCellMode) in
        print("Did swipe \"Clock\" cell")
    })

    cell.setSwipeGesture(listView, color: brownColor, mode: .switch, state: .state4, completionHandler: { (cell: SwipyCell, state: SwipyCellState, mode: SwipyCellMode) in
        print("Did swipe \"List\" cell")
    })
        
    return cell
}

Delegate

SwipyCell provides three delegate methods in order to track the users behaviors.

// MARK: - SwipyCell Delegate

  // When the user starts swiping the cell this method is called
  func swipeableTableViewCellDidStartSwiping(cell: SwipyCell) {}

  // When the user ends swiping the cell this method is called
  func swipeableTableViewCellDidEndSwiping(cell: SwipyCell) {}

  // When the user is dragging, this method is called with the percentage from the border
  func swipeableTableViewCell(cell: SwipyCell, didSwipeWithPercentage percentage: CGFloat) {}

Changing trigger percentages

If the default trigger values do not fit your taste you can change them like shown in the following lines

cell.firstTrigger  = 0.1  // Default: 25% (0.25)
cell.secondTrigger = 0.5  // Default: 75% (0.75)

Resetting the cell position

You can animate the cell back to it's default position when using .Exit mode using the swipeToOrigin(_:) method. This could be useful if your app asks the user for confirmation and the user want's to cancel the action.

cell.swipeToOrigin {
  print("Swiped back")
}

License

SwipyCell is available under the MIT license. See LICENSE file for more info.