Git Product home page Git Product logo

raclette's Introduction

🧀 Raclette

Raclette is a simple UITableView extension to add sections and rows on-the-fly.

Raclette (pronounced ruck-lett in English) is a national dish of Switzerland. The traditional dish can be described as melted cheese eaten with boiled (or roasted) potatoes with small gherkins and pickled onions.

Contents

Quickstart

Raclette makes it easy for you to mutate your UITableView in seconds.

Example

The first thing to do is to wrap your UITableView with Raclette

let raclette = Raclette(tableView: tableView)

Done. You're good to go! 🎉

raclette.isRowHighlightingEnabled = true
raclette.createSection { section in 
  section.headerTitle = "My section header"
  section.footerTitle = "My section footer"
  section.createRow { row in
    row.configuration = { cell in
      cell.textLabel?.text = "Hello World!"
    }
    row.shouldHighlight = { cell, _ in
      return false // overrides global setting
    }
    row.didSelect = { cell, tableInfo in
      cell.textLabel?.text = "Selected"
      tableInfo.tableView.deselectRow(at: tableInfo.indexPath, animated: true)
    }
  }
}

Result

quickstart_result

For more examples please take a look at the example project.

Features

  • Integrates easily as an extension for your existing UITableView
  • Support for dynamic row height
  • Support for inline closures to reduce code
  • Use your own cells which inherit from UITableViewCell
  • Reusing cells by it's identifier is magically managed for you ✨
  • Redirection for UIScrollViewDelegate available
  • No need to worry about UITableViewDelegate and UITableViewDataSource implementation

Installation

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

pod 'Raclette'

Documentation

  • Enable/disable row highlighting globally with tableView.isRowHighighlightingEnabled
  • Enable/disable dynamic row height globally with tableView.isDynamicRowHeightEnabled
  • Enable/disable automatic row deselection with tableView.isAutomaticRowDeselectionEnabled
  • Redirect the scroll view delegate to the calling instance with tableView.scrollViewDelegate = self (note that UIScrollViewDelegate must be implemented in the class header)

Rows

Rows can either be added to a table with or without specifying a section. If you don't specify a section, Raclette adds the row to the last section of the table. If you didn't add a section before, Raclette creates a default one for you.

raclette.createRow { row in
  row.height = 50
}

Available Delegate Methods

  • shouldHighlight
  • didHighlight
  • didUnhighlight
  • willSelect
  • willDeselect
  • didSelect
  • didUnselect

Cells

Cells are the actual UI representation of a row.

Dynamic Height

Dynamic height is globally enabled for all cells by default. Here's an example of how to use and benefit from the dynamic height feature (using the default UITableViewCell class):

raclette.createRow { row in
  row.configuration = { cell in
    cell.textLabel?.numberOfLines = 0
    cell.textLabel?.text = "Very long text..."
  }
}

You can turn off dynamic height for specific rows.

raclette.createRow { row in
  row.dynamicHeight = false
}

Or you can turn off dynamic row height globally.

raclette.isDynamicRowHeightEnabled = false

In order to get dynamic height working with customized cells, you have to get your constraints right.

Getting your constraints right is definitely the hardest and most important part of getting dynamic cell heights working with Auto Layout. If you make a mistake here, it could prevent everything else from working -- so take your time!

To determine the actual height for each row, the table view automatically asks each cell what height its contentView needs to be based on the known fixed width of the content view (which is based on the table view's width, minus any additional things like a section index or accessory view) and the auto layout constraints you have added to the cell's content view and subviews. Source

Custom Cells

Custom cells must inherit from UITableViewCell and can be used like this:

class CustomCell: UITableViewCell {
  @IBOutlet weak var testLabel: UILabel!
}

raclette.createRow { (row: Row<CustomCell>) in
  row.configuration = { cell in
    cell.testLabel.text = "My Test Label"
  }
}

Sections

Adding a section is as easy as adding a row.

raclette.createSection { section in
  section.headerTitle = "My Section Title"
}

Credits

Raclette was heavily inspired by Shoyu and TableManager.

License

Raclette is released under the MIT license. See LICENSE for details.

raclette's People

Contributors

rmnblm avatar

Stargazers

Sofiane Beors avatar  avatar Hyuk Hur avatar Phil Schilter avatar Tamás Tímár avatar  avatar Carabineiro avatar

Watchers

Phil Schilter avatar Carabineiro avatar  avatar

Forkers

carabina morbix

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.