Skip to content

Timeline Cell

FUITimelineCell

@IBDesignable open class FUITimelineCell: NibDesignableFUIBaseTableViewCell, FUIStyleSheetAttributesApplying

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

Timeline Cell

  • FUITimelineCell is a selectable cell intended for timelines that require open and complete status that displays timeline details. Selecting the cell changes the card background color to the framework-preferred color.
  • It uses a vertical line and nodeImageView as a separator. To the left of the vertical line is the timeline event stack view that contains eventLabel and eventImageView. To the right of the vertical line is the main stack view that contains headlineLabel and subheadlineLabel.
  • Below the main view is an attribute stack view with attributeLabel and subAttributeLabel laid out horizontally.
  • To the right of the main view is a status view that contains statusLabel, statusImage, substatusLabel, and substatusImage laid out vertically.

Usage

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "FUITimelineCell", for: indexPath) as! FUITimelineCell
cell.headlineText = "Planned Downtime Period Identified"
cell.subheadlineText = "Work Package"
cell.nodeType = .open
cell.eventText = "9:45\nAM"
cell.eventImage = #imageLiteral(resourceName: "rain")
cell.statusImage = #imageLiteral(resourceName: "ErrorIcon")
cell.subStatusText = "Active"
return cell
}

Notes

SingleLine Separator Between Timeline Items in the Table

Tableview's default 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
//...
}

Customize the Background Color

Developers may use the backgroundColor property of timelineBackground and cardBackground to set the background color, and use the setTintColor(_:_:) UITableViewCell API to customize the card background in highlighted and completed states.

timelineCell.timelineBackground.backgroundColor = UIColor.orange
timelineCell.cardBackground.backgroundColor = UIColor.yellow // For normal background
timelineCell.setTintColor(UIColor.red, for: .highlighted) // For highlighted state background
timelineCell.setTintColor(UIColor.green, for: .application) // For completed state background

Theming

Supported style classes

fdlFUITimelineCell
fdlFUITimelineCell_headlineLabel
fdlFUITimelineCell_subheadlineLabel
fdlFUITimelineCell_timestampLabel
fdlFUITimelineCell_secondaryTimestampLabel
fdlFUITimelineCell_statusLabel
fdlFUITimelineCell_substatusLabel
fdlFUITimelineCell_attributeLabel
fdlFUITimelineCell_subattributeLabel
fdlFUITimelineCell_nodeImageView
fdlFUITimelineCell_timelineBackground
fdlFUITimelineCell_cardBackground
fdlFUITimelineCell_cardBackground_complete
fdlFUITimelineCell_cardBackground_highlighted
Last update: April 14, 2021