FUIObjectTableViewCell
@IBDesignable
open class FUIObjectTableViewCell : FUIObjectBaseTableViewCell<FUIObjectView>
FUIObjectTableViewCell
is the FUIObjectBaseTableViewCell
subclass for presenting business object data in the Fiori Design Language.
Views Available in FUIObjectTableViewCell
:
detailImageView
: aFUIImageView
view added to the cell unlesscell.preserveDetailImageSpacing
is set tofalse
. The view is right toiconsStackView
and left toheadlineLabel
. The image is scaled to fit with fixed aspect. The image size is set to45px
by45px
. Usecell.detailImage
to set imageheadlineLabel
: anUILabel
view is always displayed and intended to display a headline text in the cell. Usecell.headlineText
to set label textsubheadlineLabel
: anUILabel
view is added3px
belowheadlineLabel
to the cell. Use `cell.subheadlineText" to set label textfootnoteLabel
: anUILabel
view is added3px
belowsubheadLabel
to the cell. Use `cell.footnoteText" to set label textdescriptionLabel
: anUILabel
view tended to display a long text in the cell. The view is just belowmainView
in compact view, but is right toheadlineLabel
and left tostatusImageView
(orstatusLabel
) in regular view. Use `cell.descriptionText" to set label textstatusImageView
-or-statusLabel
: anUIImageView/UILabel
added to the cell for status.statusImageView
gets added with size16px
by16px
. The view is left to accessory view and right todescriptionLabel
. Usecell.statusText
to set label text orcell.statusImage
to set image.substatusImageView
-or-substatusLabel
: anUIImageView/UILabel
added to the cell under status.substatusImageView
gets added with size16px
by16px
. Usecell.substatusText
to set label text orcell.substatusImage
to set image. An error will be logged whenaccessoryType
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.statusDisplayMode = .both
cell.statusText = "Status"
cell.showDescriptionInCompact = true
cell.descriptionText = "Business Object Description (long)"
cell.iconImages = ["1"]
cell.accessoryType = .disclosureIndicator
return cell
}
Remark
The labels’numberOfLines
property is supported, for limiting the number of lines of the text which will be displayed. If the text
or attributedText
includes newline characters (for example: \n
, \r
), then the best practice is to precede those characters by a space, so that the ellipsis indicator does not obscure any text which would otherwise be visible.
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 (for example: 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 directionalLayoutMargins.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)
Supported IMAGE
class paths for groupedAvatarsViews
and footnoteIconsViews
:
fdlFUIObjectTableViewCell_avatar_0 {}: IMAGE theme for first image in `groupedAvatarsViews`
fdlFUIObjectTableViewCell_avatar_1 {}: IMAGE theme for second image in `groupedAvatarsViews`
fdlFUIObjectTableViewCell_footnote_0 {}: IMAGE theme for first image in `footnoteIconsViews`
fdlFUIObjectTableViewCell_footnoteIcon_1 {}: IMAGE theme for second image in `footnoteIconsViews`
fdlFUIObjectTableViewCell_footnoteIcon_2 {}: IMAGE theme for third image in `footnoteIconsViews`
fdlFUIObjectTableViewCell_footnoteIcon: IMAGE theme for the other images in `footnoteIconsViews`
Supported IMAGE
properties for groupedAvatarsViews
and footnoteIconsViews
:
image-name: String;
tint-color: Color;
font-color: Color;
background-color: Color
-
Dimensions of
detailImageView
. Should be with range ofCGSize(width: 32, height: 32)
toCGSize(width: 60, height: 60)
. ‘Profile’ images should always be the defaultCGSize(width: 45, height: 45)
.Declaration
Swift
public var detailImageViewSize: CGSize { get set }