sections example

FoldingCell/FoldingCell-Demo/Base.lproj/Main.storyboard

@@ -1,37 +1,26 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="0cn-rv-Emg">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="F7s-7m-uhL">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
-    <customFonts key="customFonts">
-        <array key="OpenSans-Light.ttf">
-            <string>OpenSans-Light</string>
-        </array>
-        <array key="OpenSans-Regular.ttf">
-            <string>OpenSans</string>
-        </array>
-        <array key="OpenSans-Semibold.ttf">
-            <string>OpenSans-Semibold</string>
-        </array>
-    </customFonts>
     <scenes>
         <!--Main Table View Controller-->
         <scene sceneID="Q2d-BE-geS">
             <objects>
                 <tableViewController storyboardIdentifier="MainTableViewController" id="0cn-rv-Emg" customClass="MainTableViewController" customModule="FoldingCell_Demo" customModuleProvider="target" sceneMemberID="viewController">
-                    <tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="prototypes" style="plain" separatorStyle="none" rowHeight="667" sectionHeaderHeight="28" sectionFooterHeight="28" id="MwZ-K3-six">
+                    <tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="prototypes" style="grouped" separatorStyle="none" rowHeight="667" sectionHeaderHeight="18" sectionFooterHeight="18" id="MwZ-K3-six">
                         <rect key="frame" x="0.0" y="0.0" width="600" height="708"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
                         <color key="sectionIndexBackgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="custom" customColorSpace="sRGB"/>
                         <prototypes>
                             <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="none" indentationWidth="10" reuseIdentifier="FoldingCell" rowHeight="667" id="fgm-B1-nUi" customClass="DemoCell" customModule="FoldingCell_Demo" customModuleProvider="target">
-                                <rect key="frame" x="0.0" y="28" width="600" height="667"/>
+                                <rect key="frame" x="0.0" y="55.5" width="600" height="667"/>
                                 <autoresizingMask key="autoresizingMask"/>
                                 <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="fgm-B1-nUi" id="MxP-E5-nua">
                                     <rect key="frame" x="0.0" y="0.0" width="600" height="667"/>
@@ -381,7 +370,7 @@
                                                             <rect key="frame" x="79" y="50.5" width="97" height="17"/>
                                                         </imageView>
                                                         <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="photo" translatesAutoresizingMaskIntoConstraints="NO" id="Nm8-JU-yEj" userLabel="photo">
-                                                            <rect key="frame" x="22" y="28" width="49" height="49"/>
+                                                            <rect key="frame" x="22" y="28" width="49.000000000000028" height="49.000000000000028"/>
                                                             <constraints>
                                                                 <constraint firstAttribute="height" constant="49" id="JNu-y1-BLY"/>
                                                                 <constraint firstAttribute="width" constant="49" id="qpi-cG-s4a"/>
@@ -693,19 +682,38 @@
                             <outlet property="delegate" destination="0cn-rv-Emg" id="o83-eX-gao"/>
                         </connections>
                     </tableView>
+                    <navigationItem key="navigationItem" id="Nrx-NB-MRU"/>
                     <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
                     <size key="freeformSize" width="600" height="708"/>
                 </tableViewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="WxO-6i-Q9B" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="43" y="296"/>
+            <point key="canvasLocation" x="980.79999999999995" y="295.95202398800603"/>
+        </scene>
+        <!--Navigation Controller-->
+        <scene sceneID="vcD-Fk-7r9">
+            <objects>
+                <navigationController automaticallyAdjustsScrollViewInsets="NO" id="F7s-7m-uhL" sceneMemberID="viewController">
+                    <toolbarItems/>
+                    <navigationBar key="navigationBar" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="sRx-TU-YI7">
+                        <rect key="frame" x="0.0" y="20" width="375" height="44"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                    </navigationBar>
+                    <nil name="viewControllers"/>
+                    <connections>
+                        <segue destination="0cn-rv-Emg" kind="relationship" relationship="rootViewController" id="ibO-U9-Alo"/>
+                    </connections>
+                </navigationController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="XoX-zC-yNs" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="42.399999999999999" y="295.50224887556226"/>
         </scene>
     </scenes>
     <resources>
         <image name="arrow" width="16" height="25"/>
         <image name="burger" width="38" height="29"/>
         <image name="dots" width="14" height="84"/>
-        <image name="image" width="340" height="165"/>
+        <image name="image" width="340.5" height="165"/>
         <image name="photo" width="98" height="98"/>
         <image name="stars" width="97" height="17"/>
     </resources>

FoldingCell/FoldingCell-Demo/MainTableViewController.swift

@@ -30,19 +30,20 @@ class MainTableViewController: UITableViewController {
         static let closeCellHeight: CGFloat = 179
         static let openCellHeight: CGFloat = 488
         static let rowsCount = 10
+        static let sectionCount = 5
     }
     
-    var cellHeights: [CGFloat] = []
+    private var cellHeights: [[CGFloat]] = (0..<Const.sectionCount).map { _ in Array(repeating: Const.closeCellHeight, count: Const.rowsCount) }
 
     // MARK: Life Cycle
     override func viewDidLoad() {
         super.viewDidLoad()
         setup()
+        tableView.sectionFooterHeight = 0
     }
 
     // MARK: Helpers
     private func setup() {
-        cellHeights = Array(repeating: Const.closeCellHeight, count: Const.rowsCount)
         tableView.estimatedRowHeight = Const.closeCellHeight
         tableView.rowHeight = UITableView.automaticDimension
         tableView.backgroundColor = UIColor(patternImage: #imageLiteral(resourceName: "background"))
@@ -67,9 +68,23 @@ class MainTableViewController: UITableViewController {
 // MARK: - TableView
 
 extension MainTableViewController {
+    
+    override func numberOfSections(in tableView: UITableView) -> Int {
+        return cellHeights.count
+    }
 
-    override func tableView(_: UITableView, numberOfRowsInSection _: Int) -> Int {
-        return 10
+    override func tableView(_: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return cellHeights[section].count
+    }
+    
+    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
+        let view =  UIView()
+        view.backgroundColor = .red
+        return view
+    }
+    
+    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
+        return 44
     }
 
     override func tableView(_: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
@@ -79,7 +94,7 @@ extension MainTableViewController {
 
         cell.backgroundColor = .clear
 
-        if cellHeights[indexPath.row] == Const.closeCellHeight {
+        if cellHeights[indexPath.section][indexPath.row] == Const.closeCellHeight {
             cell.unfold(false, animated: false, completion: nil)
         } else {
             cell.unfold(true, animated: false, completion: nil)
@@ -97,7 +112,7 @@ extension MainTableViewController {
     }
 
     override func tableView(_: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
-        return cellHeights[indexPath.row]
+        return cellHeights[indexPath.section][indexPath.row]
     }
 
     override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
@@ -109,13 +124,13 @@ extension MainTableViewController {
         }
 
         var duration = 0.0
-        let cellIsCollapsed = cellHeights[indexPath.row] == Const.closeCellHeight
+        let cellIsCollapsed = cellHeights[indexPath.section][indexPath.row] == Const.closeCellHeight
         if cellIsCollapsed {
-            cellHeights[indexPath.row] = Const.openCellHeight
+            cellHeights[indexPath.section][indexPath.row] = Const.openCellHeight
             cell.unfold(true, animated: true, completion: nil)
             duration = 0.5
         } else {
-            cellHeights[indexPath.row] = Const.closeCellHeight
+            cellHeights[indexPath.section][indexPath.row] = Const.closeCellHeight
             cell.unfold(false, animated: true, completion: nil)
             duration = 0.8
         }