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.
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 containseventLabel
andeventImageView
. To the right of the vertical line is the main stack view that containsheadlineLabel
andsubheadlineLabel
. - Below the main view is an attribute stack view with
attributeLabel
andsubAttributeLabel
laid out horizontally. - To the right of the main view is a status view that contains
statusLabel
,statusImage
,substatusLabel
, andsubstatusImage
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_past
fdlFUITimelineCell_cardBackground_highlighted
-
The version to be displayed. The default is
.v2
.Declaration
Swift
public var version: FUITimeline.Version { get set }
-
Reuse identifier @return String a reuse identifier that describes FUITimelineCell
Declaration
Swift
open class var reuseIdentifier: String { get }
-
A headline label in the main view.
Declaration
Swift
@IBOutlet public private(set) var headlineLabel: FUILabel! { get }
-
A subheadline label in the main view.
Declaration
Swift
@IBOutlet public private(set) var subheadlineLabel: FUILabel! { get }
-
A status label in the status stack view.
Declaration
Swift
@IBOutlet public private(set) var statusLabel: FUILabel! { get }
-
A substatus label in the status stack view.
Important
Use the@IBInspectable
substatusText
property to set the label’s text value.
Declaration
Swift
@IBOutlet public private(set) var subStatusLabel: FUILabel! { get }
-
A status image view in the status stack view.
Declaration
Swift
@IBOutlet public private(set) var statusImageView: FUIImageView! { get }
-
A substatus image view in the status stack view.
Important
Use the@IBInspectable
substatusImage
property to set the image view’s image value.
Declaration
Swift
@IBOutlet public private(set) var subStatusImageView: FUIImageView! { get }
-
A timestamp label in the cell’s left column.
Important
Use the@IBInspectable
eventText
property to set the label’s text value.
Declaration
Swift
@IBOutlet public private(set) var timestampLabel: FUILabel! { get }
-
A secondary timestamp label in the cell’s left column.
Declaration
Swift
@IBOutlet public private(set) weak var secondaryTimestampLabel: FUILabel! { get }
-
A separator line in the cell’s top. The default is
separatorLineView.isHidden = false
. UseseparatorLineView.isHidden = true
hide separator line.Declaration
Swift
@IBOutlet public private(set) weak var separatorLineView: UIView! { get }
-
A timestamp image view in the cell’s left column.
Important
Use the@IBInspectable
secondaryTimestampImage
property to set the image view’s image value.
Declaration
Swift
@IBOutlet public private(set) var secondaryTimestampImageView: FUIImageView! { get }
-
A node image view, centered on the cell’s vertical timeline line.
Remark
UsenodeType
to set node.Declaration
Swift
@IBOutlet public private(set) var nodeImageView: FUIImageView! { get }
-
The color of the node when cell is enabled.
Declaration
Swift
public var nodeColor: UIColor? { get set }
-
The color of the node when cell is disabled.
Declaration
Swift
public var nodeColorDisabled: UIColor? { get set }
-
The type of sdk default node icon the timeline cell will use. The default value is
.open
.Declaration
Swift
public var nodeType: NodeType { get set }
-
If false, maintain same layout as open state. The default value is
true
.Declaration
Swift
public var useCompactLayoutInComplete: Bool
-
An attribute label in the footer horizontal stack view.
Declaration
Swift
@IBOutlet public private(set) var attributeLabel: FUILabel! { get }
-
A subAttribute label in the footer horizontal stack view.
Declaration
Swift
@IBOutlet public private(set) var subAttributeLabel: FUILabel! { get }
-
The background view of of the area on the left of timeline.
Declaration
Swift
@IBOutlet public private(set) weak var timelineBackground: UIView! { get }
-
The background view of this
FUITimelineCell
.Declaration
Swift
public private(set) var cardBackground: UIView { get }
-
A Boolean value indicates whether to show a single action button instead of the status stack. The default value is false.
Declaration
Swift
open var isSingleActionEnabled: Bool { get set }
-
The single action button is displayed in top right corner when
isSingleActionEnabled
is set to true.Declaration
Swift
public let singleActionButton: FUIButton
-
A Boolean value indicates whether the timestamp of the timeline cell is in the past. The default value is
false
.Declaration
Swift
public var isPast: Bool { get set }
-
A Boolean value indicates whether the timestamp of the timeline cell is in the present. The default value is
false
.Declaration
Swift
public var isPresent: Bool { get set }
-
Property defining the headline text. An empty string value hides the
headlineLabel
.Declaration
Swift
@IBInspectable public var headlineText: String? { get set }
-
Property defining the subheadline text. An empty string value hides the
subheadlineLabel
.Declaration
Swift
@IBInspectable public var subheadlineText: String? { get set }
-
- Property defining the
statusLabel.text
value. An empty string value hides thestatusLabel
.
* - - Important:
The
statusLabel
andstatusImageView
cannot be displayed simultaneously. When values exist for bothstatusText
andstatusImage
,statusText
will take precedence.
Declaration
Swift
@IBInspectable public var statusText: String? { get set }
- Property defining the
-
- Property defining the substatusLabel text. An empty string value hides the
subStatusLabel
. * - - Important:
The
subStatusLabel
andsubStatusImageView
cannot be displayed simultaneously. When values exist for bothsubStatusText
andsubStatusImage
,subStatusText
will take precedence.
Declaration
Swift
@IBInspectable public var subStatusText: String? { get set }
- Property defining the substatusLabel text. An empty string value hides the
-
Property defining the
statusImageView
image. An empty value hides thestatusImageView
. It’s expected to either setstatusText
orstatusImage
to display either one at the same position. When bothstatusText
andstatusImage
are not set, thesubstatusLabel
orsubstatusImage
takestatusLable
/statusImage
‘s position.Declaration
Swift
@IBInspectable public var statusImage: UIImage? { get set }
-
Property defining the
substatusImageView
image. An empty value hides thesubstatusImageView
. It’s expected to either setsubstatusText
orsubstatusImage
to display either one at the same position.Declaration
Swift
@IBInspectable public var subStatusImage: UIImage? { get set }
-
Property defining the timestamp text. An empty value hides the timestamp label.
Declaration
Swift
@IBInspectable public var timestampText: String? { get set }
-
Property defining the secondary timestamp text. An empty value hides the secondary timestamp label.
Declaration
Swift
@IBInspectable public var secondaryTimestampText: String? { get set }
-
Property defining the
secondaryTimestampImageView
‘s image. An empty value hides thesecondaryTimestampImageView
.Declaration
Swift
@IBInspectable public var secondaryTimestampImage: UIImage? { get set }
-
The image used as node icon.
If the value of this property is not nil, the timeline cell uses the given image as the node icon. It ignores the value of the
nodeType
property.nodeColor
andnodeColorDisabled
properties will also be ignored, so the developer is responsible for providing an image with the desired color.Declaration
Swift
@IBInspectable public var nodeImage: UIImage? { get set }
-
Property defining the timeline width, which is the width of the whole timestamp view to the left of the vertical line in the cell. The default width is
70.0
pxDeclaration
Swift
@IBInspectable public var timelineWidth: CGFloat { get set }
-
Property defining the
attributeLabel
text. An empty value hidesattributeLabel
andsubAttributeLabel
text gets displayed at the originalattributeLabel
position.Declaration
Swift
@IBInspectable public var attributeText: String? { get set }
-
Property defining the
subAttributeLabel
text. An empty value hidessubAttributeLabel
.Declaration
Swift
@IBInspectable public var subAttributeText: String? { get set }
-
Node type for
See moreFUITimelineCell
.Declaration
Swift
public enum NodeType : Int