FUIObjectTableViewCell

@IBDesignable
open class FUIObjectTableViewCell : FUIBaseDrawingTableViewCell<FUIObjectView>

FUIObjectTableViewCell is the default UITableViewCell subclass for presenting business object data in the Fiori Design Language.

Views Available in FUIObjectTableViewCell:

• detailImageView: a FUIImageView view added to the cell unless cell.preserveDetailImageSpacing is set to false. The view is right to iconsStackView and left to headlineLabel. The image is scaled to fit with fixed aspect. The image size is set to 45px by 45px. Use cell.detailImage to set image

• headlineLabel: an UILabel view is always displayed and intended to display a heandline text in the cell. Use cell.headlineText to set label text

• subheadlineLabel: an UILabel view is added 3px below headlineLabel to the cell. Use `cell.subheadlineText" to set label text

• footnoteLabel: an UILabel view is added 3px below subheadLabel to the cell. Use `cell.footnoteText" to set label text

• descriptionLabel: an UILabel view tended to display a long text in the cell. It gets displayed only in regular view. The view is right to headlineLabel and left to statusImageView(or statusLabel). Use `cell.descriptionText" to set label text

• statusImageView -or- statusLabel: an UIImageView/UILabel added to the cell for status. statusImageView gets added with size 16px by 16px. The view is left to accessory view and right to descriptionLabel. Use cell.statusText to set label text or cell.statusImage to set image.

• substatusImageView -or- substatusLabel: an UIImageView/UILabel added to the cell under status. substatusImageView gets added with size 16px by 16px. Use cell.substatusText to set label text or cell.substatusImage to set image. An error will be logged when accessoryType is not .none nor .disclosureIndicator, then setting a substatus label text or substatus image as this setting breaks Fiori Design Language pattern.

Usage

Data Binding:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: FUIObjectTableViewCell.reuseIdentifier, for: indexPath as IndexPath) as! FUIObjectTableViewCell
    cell.detailImage = UIImage(named: "image.png")
    cell.headlineText = "Business Object Title"
    cell.subheadlineText = "Business Object Subtitle"
    cell.footnoteText = "Business Object Footnote"
    cell.statusImageView.image = FUIIconLibrary.indicator.veryHighPriority.withRenderingMode(.alwaysTemplate)
    cell.substatusText = "Status Description"
    cell.descriptionText = "Business Object Description (long)"
    cell.iconImages = ["1"]
    cell.accessoryType = .disclosureIndicator
    return cell
}

Icons layout:

Icons may be supplied to the iconImages property which conform to the FUIGlyphImage protocol. These include: UIImage, FUIAttributedGlyphImage, and String. It is recommended when supplying image types, to ensure that the rendering mode is alwaysTemplate, so that the default tint color will be applied.

The default dimensions of the icon images are 12 x 12pts. It is possible to increase the width allocated to the icons by increasing the value of the iconsColumnWidth: CGFloat property, though this is generally discouraged, unless it is necessary to support multiple digits of a String type (e.g.: iconImages = ["24"] may require iconsColumnWidth = 20.0).

In SDK version 3.0, the Fiori Design Guidelines are updated, and now direct that when possible, the icons should be displayed within the leading margin. This will occur automatically, when the leading margin is >= 10 + iconsColumnWidth. As a result, most device/orientation layouts will apply this by default; to ensure that all view controllers enforce this minimum layout margin, a developer choose to set the layout margin directly on a parent UITableView, or, override the systemMinimumLayoutMargins: NSDirectionalEdgeInsets property.

override var systemMinimumLayoutMargins: NSDirectionalEdgeInsets {
    var system = super.systemMinimumLayoutMargins
    system.leading = 22
    system.trailing = 22
    return system
}

The preserveIconStackSpacing: Bool property may be used to ensure that the insertion point of the view to the right of the icons layout (detailImageView, or headlineLabel) has a consistent x-coordinate, regardless of whether a particular cell contains icons. This property is ignored, if the icons are displayed within the margins, as the insertion point of the subsequent view will always be layoutMargins.left.

AccessoryView and EditingAccessoryView

Standard UITableViewCell accessoryView, accessoryType, and editingAccessoryView are still supported.

The actionAccessoryView is a specialized view that takes the place of the usual accessoryView. This view is a FUISingleActionAccessoryView that shows an interactable button or progressView. Changing the actionAccessoryType changes the view that is shown. By default, the actionAccessoryType is set to .none.

The actionAccessoryView can be visible during editing mode when isActionAccessoryAlsoEditingActionAccessory is set to true. By default, isActionAccessoryAlsoEditingActionAccessory is true.

cell.isActionAccessoryAlsoEditingActionAccessory = false
cell.actionAccessoryType = .button
cell.actionAccessoryView?.button.style = .fuiRounded
cell.actionAccessoryView?.button.titleLabel?.preferredMaxLayoutWidth = 75
cell.actionAccessoryView?.button.setTitle("Follow", for: .normal)
cell.actionAccessoryView?.button.setTitle("Unfollow", for: .selected)
cell.actionAccessoryView?.button.isPersistentSelection = true
cell.actionAccessoryView?.button.isPreservingPreferredMaxLayoutWidth = true
cell.actionAccessoryView?.button.didSelectHandler = { button in <#selection handler#> }

Theming

Support TableViewCell class paths:

fdlFUIObjectTableViewCell {}

Supported TableViewCell attributes:

tint-color (Color)
background-color (Color)
background-color-selected (Color)

Supported Text class paths:

fdlFUIObjectTableViewCell_headlineLabel {}
fdlFUIObjectTableViewCell_subheadlineLabel {}
fdlFUIObjectTableViewCell_footnoteLabel {}
fdlFUIObjectTableViewCell_statusLabel {}
fdlFUIObjectTableViewCell_substatusLabel {}
fdlFUIObjectTableViewCell_descriptionLabel {}

Supported Text attributes:

font-color (Color)
font-name (FontName)
font-style (UIFontTextStyle)
font-size (Number)
text-align (TextAlign)
text-line-clamp (Integer)

Supported ImageView class paths:

fdlObjectTableViewCell_detailImageView {}
fdlObjectTableViewCell_statusImageView {}
fdlObjectTableViewCell_substatusImageView {}

Supported ImageView attributes:

image-name (Image)
tint-color (Color)