Customisable and editable time table grid for showing midi or audio related data with a measure.
Clone or download
Pull request Compare This branch is 15 commits ahead, 1 commit behind cemolcay:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
MIDITimeTableView.xcodeproj
MIDITimeTableView
.gitignore
LICENSE
MIDITimeTableView.podspec
README.md
demo.gif

README.md

MIDITimeTableView

Customisable and editable time table grid for showing midi or audio related data with a measure.

Demo

alt tag

Requirements

  • Swift 3+
  • iOS 9.0+

Install

pod 'MIDITimeTableView'

Features

  • Easy to implement, Delegate/DataSource API similar to UITableView and UICollectionView.
  • Unlimited rows and cells.
  • Cells and Row Headers are fully customisable. You can show any UIView inside them.
  • Shows bar measure (optional).
  • Shows editable playhead that shows current time (optional).
  • Pinch to zoom in/out. (optional).
  • Edit single cell or multiple cells.
  • Drag them around to change row or position.
  • Drag them from right edge to change duration.
  • Long press any cell to show customisable menu.
  • Holds history with a customisable limit and make undo/redo (optional).
  • Customise grid and show bar, beat and subbeat lines with any style (optional).

Usage

Create a MIDITimeTableView either programmatically or from storyboard and implement its MIDITimeTableViewDataSource and MIDITimeTableViewDelegate methods.

You need a data object to store each row and its cells data.

var rowData: [MIDITimeTableRowData] = [
  MIDITimeTableRowData(
    cells: [
      MIDITimeTableCellData(data: "C7", position: 0, duration: 4),
      MIDITimeTableCellData(data: "Dm7", position: 4, duration: 4),
      MIDITimeTableCellData(data: "G7b5", position: 8, duration: 4),
      MIDITimeTableCellData(data: "C7", position: 12, duration: 4),
    ],
    headerCellView: HeaderCellView(title: "Chords"),
    cellView: { cellData in
      let title = cellData.data as? String ?? ""
      return CellView(title: title)
    }),
]

MIDITimeTableViewDataSource is very likely to UITableViewDataSource or UICollectionViewDataSource API. Just feed the row data, number of rows, time signature and you are ready to go.

func numberOfRows(in midiTimeTableView: MIDITimeTableView) -> Int {
  return rowData.count
}

func timeSignature(of midiTimeTableView: MIDITimeTableView) -> MIDITimeTableTimeSignature {
  return MIDITimeTableTimeSignature(beats: 4, noteValue: .quarter)
}

func midiTimeTableView(_ midiTimeTableView: MIDITimeTableView, rowAt index: Int) -> MIDITimeTableRowData {
  let row = rowData[index]
  return row
}

You can customise the measure bar, the grid, each header and data cell. Check out the example project.

MIDITimeTableCellView's are editable, you can move around them on the grid, resize their duration or long press to open a delete menu. Also, you need to subclass yourself to present your own data on it.

You can set the minMeasureWidth and maxMeasureWidth to set zoom levels of the time table.

Documentation

Full documentation are here.

AppStore

This library used in my app ChordBud, check it out!

alt tag