TYPE ON THE FIELD BELOW AND PRESS ENTER TO SEARCH FOR BLOG POSTS

Folding Cell IOS

  • Mobile Development
Sat Apr 20 by vinod kumar

Expanding content cell with animation inspired by folding paper card material design.

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate FOLDING CELL into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'FoldingCell'
  1. Step 1: Create a new cell inheriting from FoldingCell

  2. Step 2: Add a UIView to your cell in the storyboard or nib file, inheriting from RotatedView. Connect the outlet from this view to the cell property foregroundView. Add constraints from this view to the superview. Connect the outlet from this top constraint to the cell property foregroundViewTop . (This view will be shown when the cell is in its normal state).

  3. Step 3: Add other UIViews to your cell, connect the outlet from this view to the cell property containerView. Add constraints from this view to the superview. Connect the outlet from this top constraint to the cell property containerViewTop. (This view will be shown when the cell is opened)

  4. Step 4: Set @IBInspectable var itemCount: NSInteger property is a count of folding (it IBInspectable you can set in storyboard), range 2 or greater. The default value is 2.

  5. Step 5

    1. Add constants:

    fileprivate struct C { struct CellHeight { static let close: CGFloat = *** // equal or greater foregroundView height static let open: CGFloat = *** // equal or greater containerView height } }

    2. Add property to calculate cell’s height and Override method

    var cellHeights = (0.. CGFloat { return cellHeights[indexPath.row] }

    3. Added code to method

    override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { guard case let cell as FoldingCell = tableView.cellForRowAtIndexPath(indexPath) else { return } var duration = 0.0 if cellIsCollapsed { cellHeights[indexPath.row] = Const.openCellHeight cell.unfold(true, animated: true, completion: nil) duration = 0.5 } else { cellHeights[indexPath.row] = Const.closeCellHeight cell.unfold(false, animated: true, completion: nil) duration = 0.8 } UIView.animateWithDuration(duration, delay: 0, options: .CurveEaseOut, animations: { _ in tableView.beginUpdates() tableView.endUpdates() }, completion: nil) }

    4. Control if the cell is open or closed

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { if case let cell as FoldingCell = cell { if cellHeights![indexPath.row] == C.cellHeights.close { foldingCell.selectedAnimation(false, animated: false, completion:nil) } else { foldingCell.selectedAnimation(true, animated: false, completion: nil) } } }

    5. add this code to your new cell class

    override func animationDuration(itemIndex:NSInteger, type:AnimationType)-> NSTimeInterval { // durations count equal it itemCount let durations = [0.33, 0.26, 0.26] // timing animation for each view return durations[itemIndex] }
    FOUND THIS USEFUL? SHARE IT

Ready to Build Your Projects?

The best companies and startups hire our top dev teams, and so can you.
Start a Project
GSM Plus Infotech