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`:

target 'MyAPP' do 
    pod 'FoldingCell'
end

target 'MyAPP' do

pod 'FoldingCell'

end

Step2:- StoryBoard works

Create a new cell inheriting from ‘FoldingCell'
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.
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:

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

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">..<</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">..<</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]
    }

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

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

}

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

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.

Vicky Kumar 31 August 2020

. . .

Folding cell in swift

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

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

Step4:- Override the below method

Step5:- Controls if the cell is open or closed

Conclusion

Leave a Comment Cancel Reply

Message Sent!

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