Skip to content

a UITableView with expandable and collapsable feature for iOS in Swift

License

Notifications You must be signed in to change notification settings

EYDS-CA/FWExpandableTableView

Repository files navigation

FWExpandableTableView

Introduction

FW_ExpandableTableView is easier and less-coding to achieve UITableViewCell expandable and collapsable. Unlikely, it supports as much levels of UITableViewCell expanding as your data structured. You can fully customize FWExpandingTableViewCell as you need.

fwexpandabletv_demo

Requirements

  • Swift 4.0+
  • iOS 8.0+
  • Xcode 8.0+

Installation

CocoaPods

FW_ExpandableTableView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'FW_ExpandableTableView'

and import the library in a page where you use

import FW_ExpandableTableView

Usage

Storyboard

screen shot 2018-11-05 at 4 05 48 pm

screen shot 2018-11-05 at 4 06 00 pm

Programmatically

  lazy var fwTableView : FW_ExpandableTableView = {
        let tv = FW_ExpandableTableView()
        // Require
        tv.register(FWExpandableTVCell.self, forCellReuseIdentifier: String(describing: FWExpandableTVCell.self))
        // Options
        tv.backgroundColor = .white
        tv.separatorStyle = .none
        tv.showsVerticalScrollIndicator = false
        tv.showsHorizontalScrollIndicator = false
        tv.isScrollEnabled = true

        return tv
    }()

Inject data to FW_ExpandableTableView

  • Assign [[String: Any]] type data to the FW_ExpandableTV by calling setUpDataSource().
  • setUpDataSource() requires two parameters; first is data and second is a key to find a child node through dynamic tree.
func setUpDataForTableView(childKeyToFind: String) {
        APIManager.sharedInstance.fetchData { (result) in
            // Pass an array of a dictionary data and a child key to find child node data in data structure.
            fwTableView.setUpDataSource(jsonArray: result, childKeyToFind: childKeyToFind)
            fwTableView.reloadData()
        }
    }
  • Dynamic tree Example
[
	{
		"name": "0-0",
		"children": [
			{
				"name": "0-0-0",
				"children": [
					{
						"name": "0-0-0-0",
						"children": [
							{
								"name": "0-0-0-0-0"
							},
							{
								"name": "0-0-0-0-1"
							},
						]	
					},
					{
						"name": "0-0-0-1"
					},
					{
						"name": "0-0-0-2"
					}
				]	
			}
		]
	}
]
  • Each node in dynamic tree is stored as Node in datasource in FW_ExpandableTableView
public class Node : NSObject {
    // An identifier.
    public let id : String!
    // Child nodes belonging to.
    @objc
    public dynamic var children: [Node]!
    // A boolean whether a cell associated with the node is expanded.
    public var isExpanded: Bool!
    // A Storage of each node data in Dynamic tree.
    public var object: [String: Any]?
}
  • TableViewDelegate and TableViewDataSource are simple enough and highly customizable.
 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fwTableView.datasource.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: FWExpandableTVCell.self), for: indexPath) as? FWExpandableTVCell {
            cell.configureWithChild(fwTableView.datasource[indexPath.row])
            // Customize FWExpandableTVCell here.
            // cell.titleLabel.text = yourData
            // Or
            // cell.customizableView = yourCustomView
            
            // optional methods
            // cell.removeLeftSideInset()
            // cell.removeDefaultViewSetting()
            return cell
        }
        return UITableViewCell()
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if let cell = tableView.cellForRow(at: indexPath) as? FWExpandableTVCell, cell.isExpandable {
            // Expand or collapse children
            if cell.isExpanded {
                fwTableView.collapseChildren(cell: cell, indexPath: indexPath)
            } else {
                fwTableView.expandChildren(cell: cell, indexPath: indexPath)
            }
        }
    }

Author

Gisu Kim (Author)

Tushar Agarwal (Special Thanks for Code Review)

Skyler Smith (Special Thanks for a foundation of a logic)

License

FW_ExpandableTableView is available under the MIT license. See the LICENSE file for more info.

About

a UITableView with expandable and collapsable feature for iOS in Swift

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published