Code Monkey home page Code Monkey logo

genkernel / treeview Goto Github PK

View Code? Open in Web Editor NEW
54.0 3.0 11.0 1001 KB

"TreeView - sub-cells simplified" (c). Enable subcells in UITableView with a single drop-in extension. CocoaPod:

Home Page: http://cocoapods.org/pods/treeview

License: MIT License

Objective-C 91.18% Ruby 8.82%
treeview objective-c uitableview expandable expandablelistview ios swift indexpath collapsable expand collapse subtree uitableviewcell concept expandabletableview uitableviewdatasource nsindexpath tree-node

treeview's Introduction

TreeView is iOS single-class component written in ObjC that enables cell + subcells support for UITableView-s.

  • Project status
  • Examples
  • Documentation

Current status

TreeView was initially written in 2012 and has been used in multiple projects since then. Development is finalized, component and its public API is considered stable.

The most convenient way to use it is via CocoaPods:

pod 'TreeView'

Aletrnativelly you may simply drop TreeView/TreeTable.h,m into your project.

Examples

Preview on Youtube: http://youtu.be/zS3gQ4pnmBs

You may find demo iOS app with 3 working modules in 'Examples' directory:

  • inSwift-4.2
  • fileSystem-asTree
  • plist-allExpanded-byDefault

Documentation

In basic MVC scenario ViewController is set as DataSource of UITableView.

TreeView package introduces single new class: TreeTable. It is designed to sit in between ViewController and UITableView as a DataSource object that knows how to work with subcells via deeper "nested" indexPaths.

TreeTable implements UITableViewDataSource protocol and represents inner subcells with indexPaths of deeper levels. For instance cell at 0-0 indexPath may contain 3 subcells: 0-0-0, 0-0-1, 0-0-2.

In plan MVC example: TreeTable is a "proxy" object that sits between tableView and a viewController, proxies all calls to data source and converts 2d-like indexPaths (0-0, 0-1, ...) into N-depth indexPaths (0-0, 0-0-1, 0-0-2, 0-1-0-1, ...) to represent subcells.

You usually decide to use TreeTable component when your UITableViewCell wants to contain its own subcells that can be easily expanded or collapsed.

Implementation details

TreeTable adds 2 logical states to every cell: expanded and collapsed.

You should expand a cell to reveal its subcells.

Keeping this in mind helper methods(as UITableView category) were implemented:

func expand(treeIndexPath: IndexPath)
func isExpanded(treeIndexPath: IndexPath) -> Bool
func collapse(treeIndexPath: IndexPath)

Instead of implementing UITableViewDataSource in your controller - implement TreeTableDataSource. TreeTableDataSource protocol extends UITableViewDataSource by introducing 2 new required methods:

func tableView(_ tableView: UITableView, isCellExpandedAt treeIndexPath: IndexPath) -> Bool
func tableView(_ tableView: UITableView, numberOfSubCellsForCellAt treeIndexPath: IndexPath) -> Int

Notice all required dataSource methods are invoked with indexPath of N-depth that uniquely identify cell or subcell.
Hence you should change behaviour of the following methods:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
func tableView(tableView: UITableView, cellForRowAt treeIndexPath: IndexPath) -> UITableViewCell

and use

func tableIndexPathFromTreePath(treeIndexPath: IndexPath) -> IndexPath

if you need to convert N-depth index path into 2d index path.

On the other hand all optional methods are transparently forwarded to your implementations (if you provide any) and indexPath parameter is not changed - it is 2d indexPath. You can convert it into N-depth treeIndexPath with:

func treeIndexPathFromTablePath(indexPath: NSIndexPath) -> NSIndexPath

method.

Concept image

Concept

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.