FUITimelineCell

open class FUITimelineCell: NibDesignableTableViewCell

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

• 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: FUIColorStyle.line.
• It uses a vertical line and nodeImageView as a separator. Left to the vertical line is the timeline event stack view that contains eventLabel and eventImageView; right to 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 layed out horizontally.
• To the right of the main view is a status view that contains statusLabel, statusImage, substatusLabel, and substatusImage layed 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.nodeImage = FUITimelineNode.open
        cell.eventText = 9:45se>\ns>AM
        cell.eventImage = #imageLiteral(resourceName: rain)
        cell.statusImage = #imageLiteral(resourceName: ErrorIcon)
        cell.subStatusText = Active
        return cell
    }

Notes

SingleLine Sepatator 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
        //...
    }