Skip to content

Timeline Marker Cell

FUITimelineMarkerCell

open class FUITimelineMarkerCell: NibDesignableFUIBaseTableViewCell, FUIStyleSheetAttributesApplying

FUITimelineMarkerCell is a UITableViewCell subclass, designed to present a business object related to an event, in a Timeline view.

Timeline Marker Cell

  • FUITimelineMarkerCell is a non-selectable with selectionStyle set to .none that is intended for timelines with start, inactive, early end, and end status that display timeline information.
  • It uses a vertical line and a node image as a separator. Left to the vertical line is the timeline event section that contains eventLabel and eventImageView; right to the vertical line is titleLabel.
  • The vertical line contains leadingTimeline on the top, nodeImageView in the middle, and a trailingTimeline at the bottom.

Usage

```swift

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "FUITimelineMarkerCell", for: indexPath) as! FUITimelineMarkerCell cell.titleText = "Project Start" cell.nodeType = .start cell.eventText = "12/6/15" cell.showLeadingTimeline = false return cell }

```

Notes

SingleLine Separator Between Timeline Items in the Table

The default table view separatorStyle is .singleLine. Because of this default setting, there can be a 1.0 px divider line or a separator in-between each item on the timeline in the table. This is not an issue in timeline. To get rid of the separator, set separatorStyle to none in the TabelViewController class

override func viewDidLoad() {
   super.viewDidLoad()
   // ...
   self.tableView.separatorStyle = .none
   // ...
}

Theming

Supported style classes

fdlFUITimelineMarkerCell
fdlFUITimelineMarkerCell_titleLabel
fdlFUITimelineMarkerCell_eventLabel
fdlFUITimelineMarkerCell_eventImageView
fdlFUITimelineMarkerCell_nodeImageView
fdlFUITimelineMarkerCell_cardBackground
fdlFUITimelineMarkerCell_timelineBackground

Last update: February 11, 2021