Folding cell in swift

A ‘Folding Cell’ is a customized cell subclass for ‘UITableviewCell’. It provides a folding/unfolding animation of a cell to display/hide its content.

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

To begin, create a new Xcode project and follows the following steps: 

Step1: – Installation, To integrate FoldingCell into your Xcode project using CocoaPods, specify it in your Podfile:

Step2:- StoryBoard works

1. Create a new cell inheriting from ‘FoldingCell'
2. Add a UIView to your cell in your storyboard or nib file, inheriting from RotatedView. Connect the outlet from this view to the cell property foregroundView.
   
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 like in the picture:

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

Step3:- Create a new ‘UItableViewController’. And add the below code to it.

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

1 2 3 4 5 6

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

<span class="pl-k">var</span> cellHeights <span class="pl-k">=</span> (<span class="pl-c1">0</span><span class="pl-k">..&lt;</span>CELLCOUNT).<span class="pl-c1">map</span> { <span class="pl-c1">_</span> <span class="pl-k">in</span> C.<span class="pl-smi">CellHeight</span>.<span class="pl-smi">close</span> }

1

<span class="pl-k">var</span> cellHeights <span class="pl-k">=</span> (<span class="pl-c1">0</span><span class="pl-k">..&lt;</span>CELLCOUNT).<span class="pl-c1">map</span> { <span class="pl-c1">_</span> <span class="pl-k">in</span> C.<span class="pl-smi">CellHeight</span>.<span class="pl-smi">close</span> }

Step4:- Override the below method

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { return cellHeights[indexPath.row] }

1 2 3

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {         return cellHeights[indexPath.row]     }

 

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { guard case let cell as FoldingCell = tableView.cellForRowAtIndexPath(indexPath) else { return } var duration = 0.0 let cellIsCollapsed = cellHeights[indexPath.row] == Const.closeCellHeight if cellIsCollapsed { cellHeights[indexPath.row] = C.Cellheight.open cell.unfold(true, animated: true, completion: nil) duration = 0.5 } else { cellHeights[indexPath.row] = C.Cellheight.close 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) }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {         guard case let cell as FoldingCell = tableView.cellForRowAtIndexPath(indexPath) else {           return         }           var duration = 0.0         let cellIsCollapsed = cellHeights[indexPath.row] == Const.closeCellHeight         if cellIsCollapsed {             cellHeights[indexPath.row] = C.Cellheight.open             cell.unfold(true, animated: true, completion: nil)             duration = 0.5         } else {             cellHeights[indexPath.row] = C.Cellheight.close             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)     }

Step5:- Controls 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] == Const.closeCellHeight { cell.unfold(false, animated: false, completion: nil) } else { cell.unfold(true, animated: false, completion: nil) } } }

1 2 3 4 5 6 7 8 9 10

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

Step6:- And the last step to add below code in the new cell

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] }

1 2 3 4 5 6

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]     }

Conclusion

So please follow the above step to integrate the Folding Cell and if you have any issue or suggestion you can leave your query/suggestion in the comment section.