Skip to content

Commit 28806f7

Browse files
authored
Update README.md
1 parent 8acd2ba commit 28806f7

File tree

1 file changed

+9
-33
lines changed

1 file changed

+9
-33
lines changed

README.md

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# How to Implement Collapsible Table Section in iOS
22

3+
[![Language](https://img.shields.io/badge/swift-3.0-brightgreen.svg?style=flat)]()
4+
35
A simple iOS swift project demonstrates how to implement collapsible table section programmatically, that is no main storyboard, no XIB, no need to register nib, just pure Swift!
46

57
In this project, the table view automatically resizes the height of the rows to fit the content in each cell, and the custom cell is also implemented programmatically.
68

79
![rocket](docs/images/cover.gif)
810

9-
[![Language](https://img.shields.io/badge/swift-3.0-brightgreen.svg?style=flat)]()
10-
1111
### How to implement collapsible table sections? ###
1212

1313
#### Step 1. Prepare the Data ####
@@ -26,32 +26,13 @@ struct Section {
2626
self.collapsed = collapsed
2727
}
2828
}
29-
30-
struct Item {
31-
var name: String
32-
var detail: String
33-
34-
init(name: String, detail: String) {
35-
self.name = name
36-
self.detail = detail
37-
}
38-
}
3929

4030
var sections = [Section]()
4131

4232
sections = [
43-
Section(name: "Mac", items: [
44-
Item(name: "MacBook", detail: "Apple's ultraportable laptop"),
45-
Item(name: "MacBook Air", detail: "A very light ultraportable laptop.")
46-
]),
47-
Section(name: "iPad", items: [
48-
Item(name: "iPad Pro", detail: "iPad Pro delivers epic power."),
49-
Item(name: "iPad Air 2", detail: "The second-generation of iPad Air tablet.")
50-
]),
51-
Section(name: "iPhone", items: [
52-
Item(name: "iPhone 7", detail: "The latest iPhone."),
53-
Item(name: "iPhone 6", detail: "The 6th-generation of iPhone.")
54-
])
33+
Section(name: "Mac", items: ["MacBook", "MacBook Air"]),
34+
Section(name: "iPad", items: ["iPad Pro", "iPad Air 2"]),
35+
Section(name: "iPhone", items: ["iPhone 7", "iPhone 6"])
5536
]
5637
```
5738
`collapsed` indicates whether the current section is collapsed or not, by default is `false`.
@@ -211,18 +192,13 @@ Setup the normal row cell is pretty straightforward:
211192

212193
```swift
213194
override func tableView(_ tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
214-
let cell: CollapsibleTableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell") as? CollapsibleTableViewCell ?? CollapsibleTableViewCell(style: .default, reuseIdentifier: "cell")
215-
216-
let item: Item = sections[(indexPath as NSIndexPath).section].items[(indexPath as NSIndexPath).row]
217-
218-
cell.nameLabel.text = item.name
219-
cell.detailLabel.text = item.detail
220-
195+
let cell = tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell? ?? UITableViewCell(style: .Default, reuseIdentifier: "cell")
196+
cell.textLabel?.text = sections[indexPath.section].items[indexPath.row]
221197
return cell
222198
}
223199
```
224200

225-
Of course you can use a plain `UITableViewCell`, our `CollapsibleTableViewCell` is a subclass of `UITableViewCell` that adds the name and detail labels, and the most important thing is that it supports autosizing feature, the key is to setup the autolayout constrains properly, please refer to the source code for more details.
201+
In the above code, we use the plain `UITableViewCell`, if you would like to see how to make a autosizing cell, please take a look at our `CollapsibleTableViewCell` in the source code. The `CollapsibleTableViewCell` is a subclass of `UITableViewCell` that adds the name and detail labels, and the most important thing is that it supports autosizing feature, the key is to setup the autolayout constrains properly, make sure the subviews are proplery stretched to the top and bottom in the `contentView`.
226202

227203
#### Step 5. How to Toggle Collapse and Expand ####
228204

@@ -253,7 +229,7 @@ extension CollapsibleTableViewController: CollapsibleTableViewHeaderDelegate {
253229

254230
After the sections get reloaded, the number of cells in that section will be recalculated and redrawn.
255231

256-
That's it, please refer to the source code and see the detailed implementation.
232+
That's it, we have implemented the collapsible table section! Please refer to the source code and see the detailed implementation.
257233

258234
### More Collapsible Demo ###
259235

0 commit comments

Comments
 (0)