如何实现可收展的UITableView Section

Swiftjeantimex • 于 2016-05-31 13:10:50 +0800 • 5055 阅读

iOS Collapsible Table Section

A simple iOS swift project demonstrates how to implement collapsible table section.

Demo

demo

How to implement collapsible table sections?

Step 1. Prepare the Data

Let's say we have the following data that is grouped to different sections, each section is a Section object:


struct Section {
  var name: String!
  var items: [String]!
  var collapsed: Bool!
    
  init(name: String, items: [String]) {
    self.name = name
    self.items = items
    self.collapsed = false
  }
}
    
var sections = [Section]()

sections = [
  Section(name: "Mac", items: ["MacBook", "MacBook Air", "MacBook Pro", "iMac", "Mac Pro", "Mac mini", "Accessories", "OS X El Capitan"]),
  Section(name: "iPad", items: ["iPad Pro", "iPad Air 2", "iPad mini 4", "Accessories"]),
  Section(name: "iPhone", items: ["iPhone 6s", "iPhone 6", "iPhone SE", "Accessories"])
]

collapsed indicates whether the current section is collapsed or not, by default is false.

Step 2. Design the Header and Cell

Select the Table View in the story board, choose Dynamic Prototypes and set Prototype Cells to 2, one for the custom header and one for the row cell, and assign the Identifier to header and cell respectively.

cell

Add a UIButton (the toggler) and a Label to the header prototype cell, create a swift file which extends UITableViewCell and name it CollapsibleTableViewHeader.swift. The file is super simple, it defines two IBOutlets for the toggle button and label. Finally set the header cell class to our custom header CollapsibleTableViewHeader and link the IBOutlets.

Now the file should look like this:


import UIKit

class CollapsibleTableViewHeader: UITableViewCell {
    
  @IBOutlet var titleLabel: UILabel!
  @IBOutlet var toggleButton: UIButton!
    
}

By creating a prototype cell and subclassing UITableViewCell, we have the following benefits: * We can visually design the custom header * We shouldn't need to create a nib and register it to the the tableView like the following, personally I don't like having a nib in my project and if we use dequeueReusableHeaderFooterViewWithIdentifier, seems like we can't have 0 rows in that section dynamically:


let nib = UINib(nibName: "TableSectionHeader", bundle: nil)
tableView.registerNib(nib, forHeaderFooterViewReuseIdentifier: "TableSectionHeader")

Step 3. The UITableViewDelegate

First the number of sections is sections.count:


override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
  return sections.count
}

For the number of rows in each section, we use collapsed property to control it, if collapsed is true, then return 0, otherwise return items count:


override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return (sections[section].collapsed!) ? 0 : sections[section].items.count
}

We use tableView's viewForHeaderInSection function to hook up our custom header:


override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
  let header = tableView.dequeueReusableCellWithIdentifier("header") as! CollapsibleTableViewHeader
        
  header.titleLabel.text = sections[section].name
  header.toggleButton.tag = section
  header.toggleButton.addTarget(self, action: #selector(CollapsibleTableViewController.toggleCollapse), forControlEvents: .TouchUpInside)
        
  header.toggleButton.rotate(sections[section].collapsed! ? 0.0 : CGFloat(M_PI_2))
        
  return header.contentView
}

noticed that we register the touch up inside event for the toggler, once it's tapped, it will trigger the toggleCollapse function.

Last, the normal row cell is pretty straightforward:


override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell!
    
  cell.textLabel?.text = sections[indexPath.section].items[indexPath.row]
    
  return cell
}

And here is the toggle function:


func toggleCollapse(sender: UIButton) {
  let section = sender.tag
  let collapsed = sections[section].collapsed
    
  // Toggle collapse
  sections[section].collapsed = !collapsed
    
  // Reload section
  tableView.reloadSections(NSIndexSet(index: section), withRowAnimation: .Automatic)
}

That's it, please refer to the source code and see the detailed implementation.

源码https://github.com/jeantimex/ios-swift-collapsible-table-section

Author: jeantimex

回复: 0
暂无评论~~
  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,见 Emoji cheat sheet
  • @name 会链接到用户页面,并会通知他
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
Ctrl+Enter