FUITimelineCollectionViewCell

@IBDesignable
open class FUITimelineCollectionViewCell : NibDesignableCollectionViewCell

FUITimelineCollectionViewCell is an Interface-Builder-designable UI component that extends NibDesignableCollectionViewCell for showing information of an task. FUITimelinePreviewView embeds a collection view which displays a set of FUITimelineCollectionViewCell.

Views Available in FUITimelineCollectionViewCell:

  • titleLabel: an UILabel showing a short description of the task.

  • footnoteLabel: a UILabel showing extra infomation about the task. When cell is used with a FUITimelinePreviewView, the textual representation of due date of FUITimelineItem is put here.

  • nodeImageView: a UIImageView contains a node image showing the status of the task. You change the node type by setting ‘nodeType’ on FUITimelineCollectionViewCell.

Example Initialization and Configuration:

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUITimelineCollectionViewCell.reuseIdentifier, for: indexPath) as! FUITimelineCollectionViewCell

cell.title = "Development Kick-off"
cell.footnote = Date()
cell.nodeType = .open

return cell
}

theming

fdlFUITimelineCollectionViewCell_titleLabel {
font-style: subheadline;
font-color: primary1;
}

fdlFUITimelineCollectionViewCell_footnoteLabel {
font-style: footnote;
font-color: primary3;
}

  • Reuse identifier @return String a reuse identifier that describes FUITimelineCollectionViewCell

    Declaration

    Swift

    open class var reuseIdentifier: String { get }

  • A title label that displays a text as title. Use title to set the label’s text value.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var titleLabel: UILabel!

  • A image view that contains a node indicating the status of the task. Use nodeType to select the node of the nodeImageView.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var nodeImageView: UIImageView!

  • A footnote label that displays a text as footnote. Use footnote to set the label’s text value.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var footnoteLabel: UILabel!

  • A horizontal line of FUITimelineCollectionViewCell.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var timeline: UIView!

  • The gradient color of timeline. Default value is primary4(Hex: CCCCCC) in Fiori Design Language.

    Declaration

    Swift

    public var timelineColor: UIColor

  • The opacity of start point and end point of timeline color. (e.g. [1.0, 0.5] means opacity of start point is 1.0 and opacity of end point is 0.5) By default, this property is set to [1.0, 1.0] when cell is initialized.

    Declaration

    Swift

    public var gradientAlphas: [CGFloat]?

  • The text of title label.

    Declaration

    Swift

    @IBInspectable
public var title: String? { get set }

  • The text of footnote label.

    Declaration

    Swift

    @IBInspectable
public var footnote: String? { get set }

  • The node type of node image view.

    Declaration

    Swift

    public var nodeType: FUITimelineStatus { get set }