@@ -12,7 +12,7 @@ A simple iOS swift project demonstrates how to implement collapsible table secti
1212
1313#### Step 1. Prepare the Data ####
1414
15- Let's say we have the following data that is grouped to different sections, each section is a ` Section ` object:
15+ Let's say we have the following data that is grouped into different sections, each section is represented by a ` Section ` object:
1616
1717``` swift
1818struct Section {
@@ -63,7 +63,7 @@ We need to collapse or expand the section when user taps on the header, to achie
6363
6464``` swift
6565protocol CollapsibleTableViewHeaderDelegate {
66- func toggleSection (header : CollapsibleTableViewHeader, section : Int )
66+ func toggleSection (_ header : CollapsibleTableViewHeader, section : Int )
6767}
6868
6969class CollapsibleTableViewHeader : UITableViewHeaderFooterView {
@@ -76,14 +76,14 @@ class CollapsibleTableViewHeader: UITableViewHeaderFooterView {
7676 addGestureRecognizer (UITapGestureRecognizer (target : self , action : #selector (CollapsibleTableViewHeader.tapHeader (_:))))
7777 }
7878 ...
79- func tapHeader (gestureRecognizer : UITapGestureRecognizer) {
79+ func tapHeader (_ gestureRecognizer : UITapGestureRecognizer) {
8080 guard let cell = gestureRecognizer.view as? CollapsibleTableViewHeader else {
8181 return
8282 }
8383 delegate? .toggleSection (self , section : cell.section )
8484 }
8585
86- func setCollapsed (collapsed : Bool ) {
86+ func setCollapsed (_ collapsed : Bool ) {
8787 // Animate the arrow rotation (see Extensions.swf)
8888 arrowLabel.rotate (collapsed ? 0.0 : CGFloat (M_PI_2))
8989 }
@@ -97,7 +97,6 @@ override init(reuseIdentifier: String?) {
9797 ...
9898 // arrowLabel must have fixed width and height
9999 arrowLabel.widthAnchor .constraintEqualToConstant (12 ).active = true
100- arrowLabel.heightAnchor .constraintEqualToConstant (12 ).active = true
101100
102101 titleLabel.translatesAutoresizingMaskIntoConstraints = false
103102 arrowLabel.translatesAutoresizingMaskIntoConstraints = false
@@ -136,26 +135,28 @@ override func layoutSubviews() {
136135
137136#### Step 3. The UITableView DataSource and Delegate ####
138137
138+ Now we implemented the header view, let's get back to the table view controller.
139+
139140The number of sections is ` sections.count ` :
140141
141142``` swift
142- override func numberOfSectionsInTableView (tableView : UITableView) -> Int {
143+ override func numberOfSectionsInTableView (in tableView : UITableView) -> Int {
143144 return sections.count
144145}
145146```
146147
147148and the number of rows in each section is:
148149
149150``` swift
150- override func tableView (tableView : UITableView, numberOfRowsInSection section : Int ) -> Int {
151+ override func tableView (_ tableView : UITableView, numberOfRowsInSection section : Int ) -> Int {
151152 return sections[section].items .count
152153}
153154```
154155
155156We use tableView's viewForHeaderInSection function to hook up our custom header:
156157
157158``` swift
158- override func tableView (tableView : UITableView, viewForHeaderInSection section : Int ) -> UIView? {
159+ override func tableView (_ tableView : UITableView, viewForHeaderInSection section : Int ) -> UIView? {
159160 let header = tableView.dequeueReusableHeaderFooterViewWithIdentifier (" header" ) as? CollapsibleTableViewHeader ?? CollapsibleTableViewHeader (reuseIdentifier : " header" )
160161
161162 header.titleLabel .text = sections[section].name
@@ -169,10 +170,10 @@ override func tableView(tableView: UITableView, viewForHeaderInSection section:
169170}
170171```
171172
172- The normal row cell is pretty straightforward:
173+ Setup the normal row cell is pretty straightforward:
173174
174175``` swift
175- override func tableView (tableView : UITableView, cellForRowAtIndexPath indexPath : NSIndexPath) -> UITableViewCell {
176+ override func tableView (_ tableView : UITableView, cellForRowAtIndexPath indexPath : NSIndexPath) -> UITableViewCell {
176177 let cell = tableView.dequeueReusableCellWithIdentifier (" cell" ) as UITableViewCell? ?? UITableViewCell (style : .Default , reuseIdentifier : " cell" )
177178
178179 cell.textLabel ? .text = sections[indexPath.section ].items [indexPath.row ]
@@ -186,7 +187,7 @@ override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath:
186187The idea is really simple, if a section's ` collapsed ` property is ` true ` , we set the height of the rows inside that section to be ` 0 ` , otherwise ` 44.0 ` !
187188
188189``` swift
189- override func tableView (tableView : UITableView, heightForRowAtIndexPath indexPath : NSIndexPath) -> CGFloat {
190+ override func tableView (_ tableView : UITableView, heightForRowAtIndexPath indexPath : NSIndexPath) -> CGFloat {
190191 return sections[indexPath.section ].collapsed ! ? 0 : 44.0
191192}
192193```
@@ -195,7 +196,7 @@ And here is the toggle function:
195196
196197``` swift
197198extension CollapsibleTableViewController : CollapsibleTableViewHeaderDelegate {
198- func toggleSection (header : CollapsibleTableViewHeader, section : Int ) {
199+ func toggleSection (_ header : CollapsibleTableViewHeader, section : Int ) {
199200 let collapsed = ! sections[section].collapsed
200201
201202 // Toggle collapse
@@ -220,6 +221,10 @@ That's it, please refer to the source code and see the detailed implementation.
220221
221222Sometimes you might want to implement the collapsible cells in a grouped-style table, I have a separate demo at [ https://github.com/jeantimex/ios-swift-collapsible-table-section-in-grouped-section ] ( https://github.com/jeantimex/ios-swift-collapsible-table-section-in-grouped-section ) . The implementation is pretty much the same but slightly different.
222223
223- ![ demo] ( http://jinandsu.net/ios-swift-collapsible-table-section-in-grouped-section/demo.gif ) <br />
224+ ![ demo] ( https://github.com/jeantimex/ios-swift-collapsible-table-section-in-grouped-section/blob/master/screenshots/demo.gif ) <br />
225+
226+ ### License ###
227+
228+ This project is licensed under the MIT license, Copyright (c) 2017 Yong Su. For more information see ` LICENSE.md ` .
224229
225- Author: Yong Su [ Box Inc. ] ( www.box. com)
230+ Author: [ Yong Su] ( https://github. com/jeantimex ) Box Inc.
0 commit comments