FUIObjectHeader
@IBDesignable
open class FUIObjectHeader : FUIBaseHeaderView<FUIObjectHeaderView>, FUIContentCopyable
FUIObjectHeader
extends UIView
for showing information of an object header. It contains a set of default content views which are common to Fiori Design Language Object Cell types, with the associated constraint implementations and handling for size classes.
Regular (Landscape) Horizontal Size Class: Anatomy & Variations
Compact (Portrait) Horizontal Size Class: Anatomy & Variations
Views Available in FUIObjectHeader
:
detailImageView
: aUIImageView
view added to the view. The image size is set to44px
by44px
in both compact and regular mode. UsedetailImage
to set imageheadlineLabel
: an UILabel view is always displayed and intended to display a headline text in the view. UseheadlineText
to set label textsubheadlineLabel
: an UILabel view is added4px
belowheadlineLabel
to the view. UsesubheadlineText
to set label texttags
: a list of tag labels is added4px
belowsubheadlineLabel
. There can be up to 3 tags as a default. App teams can add more tags if needed.labelItems
: an array of FUILabelItem added16px
belowtags
to the view. There can be up to 6 label items. In compact mode, 6 label items are recommended to be fit in 2 rows.descriptionLabel
: an UILabel view tended to display a longer text in the view. Description is advised to be concise and not longer than 3 lines in compact mode.statusImageView
/statusLabel
: anUIImageView/UILabel
added to the view for status.statusImageView
gets added with size16px
by16px
. The view is right toheadlineLabel
. UsestatusText
to set label text orstatusImage
to set image.substatusImageView
/substatusLabel
: anUIImageView/UILabel
added to the view under status.substatusImageView
gets added with size16px
by16px
. UsesubstatusText
to set label text orsubstatusImage
to set image.kpiView
: aFUIKPIView
added to the right accessory. Only 1 right accessory can be used in an object header. When status and KPIs are both selected, KPI has its priority and the status will move to the status row.detailContentView
: aFUIObjectHeaderChartView
in page 2.
Example Initialization and Configuration:
//Programmatically add an Object header to tableview
let objectHeader = FUIObjectHeader()
self.tableView.tableHeaderView = objectHeader
objectHeader.detailImageView.image = #imageLiteral(resourceName: "ProfilePic")
objectHeader.headlineLabel.text = "Inspect Electric Pump Motor Long Job Title Example Will Wrap Max# of Lines in the HeadlineLabel"
objectHeader.subheadlineLabel.text = "Job 819701."
objectHeader.tags = [FUITag(title: "Started"), FUITag(title: "PM01"), FUITag(title: "103-Repair")]
objectHeader.labelItems = [
FUILabelItem(text: "Los Altos, CA", image: <#my image#>),
FUILabelItem(text: "12/31/2022", image: <#my image#>),
FUILabelItem(text: "Natasha Giotra", image: <#my image#>, alignment: .leading)]
objectHeader.descriptionLabel.text = "Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions. Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions."
objectHeader.statusLabel.text = "High"
objectHeader.substatusImageView.image = <#my image#>
objectHeader.kpiView = {
let kpiView = FUIKPIView()
let unit = FUIKPIUnitItem(string: "$")
let metric = FUIKPIMetricItem(string: "294")
let unit2 = FUIKPIUnitItem(string: "M")
kpiView.items = [unit, metric, unit2]
kpiView.captionlabel.text = "Sales"
return kpiView
}()
// create a custom `UIView`-subclassing instance, to set to `detailContentView` property.
let myAnalytics = AnalyticHeaderDetailView()
myAnalytics.chartImageView.image = #imageLiteral(resourceName: "hogwarts")
objectHeader.detailContentView = myAnalytics
Background Color Scheme:
The color scheme ofFUIObjectHeader
can be configured by changing its inner view’s backgroundColorScheme
property. Once changed, the text color, background color and page indicator color will be updated based on the new setting. Developer should configure backgroundColorScheme
before overriding these color settings.
let objectHeader = FUIObjectHeader()
objectHeader.backgroundColorScheme = .darkConstant
objectHeader._innerView.pageControl.currentPageIndicatorTintColor = .white
objectHeader._innerView.pageControl.pageIndicatorTintColor = .lightGray
Note:
FUIObjectHeader
added to UITableView
as tableHeaderView
is compatible with UIRefreshControl
added to the same table view. Note that if an UIRefreshControl
object is set after adding an FUIObjectHeader
object as tableHeaderView
, the UIRefreshControl
object must be moved to the front in the table view; otherwise, the UIRefreshControl
object wouldn’t be visible.
When FUIObjectHeader
is added to a table view in a storyboard and UIRefreshControl
is added later in a table view controller class’ viewDidLoad
function, the Developer should bring the refreshControl
to the front:
self.refreshControl = UIRefreshControl()
self.refreshControl?.addTarget(self, action: #selector(refreshTriggered), for: .valueChanged)
self.refreshControl?.tintColor = UIColor.white
//bring refresh control to the front to make it visible
self.tableView.bringSubview(toFront: self.refreshControl!)
## Theming
Supported ObjectHeader
class paths:
fdlFUIObjectHeader {}
Supported ObjectHeader
attributes:
tint-color (Color)
background-color (Color)
background-color-scheme (FUIBackgroundColorScheme)
Supported Text
class paths:
fdlFUIObjectHeader_headlineLabel {}
fdlFUIObjectHeader_subheadlineLabel {}
fdlFUIObjectHeader_bodyLabel {}
fdlFUIObjectHeader_footnoteLabel {}
fdlFUIObjectHeader_descriptionLabel {}
fdlFUIObjectHeader_statusLabel {}
fdlFUIObjectHeader_substatusLabel {}
fdlFUIObjectHeader_labelItem_label {}
fdlFUIObjectHeader_statusView_statusLabel {} // deprecated
fdlFUIObjectHeader_statusView_substatusLabel {} // deprecated
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:
fdlFUIObjectHeader_detailImageView {}
fdlFUIObjectHeader_statusImageView {}
fdlFUIObjectHeader_substatusImageView {}
fdlFUIObjectHeader_labelItem_imageView {}
Supported ImageView
attributes:
image-name (Image)
tint-color (Color)
-
current version of FUIObjectHeader
Declaration
Swift
public var version: FUIObjectHeaderView.Version { get set }
-
status layout
Declaration
Swift
public var statusLayout: FUIObjectHeaderView.StatusLayout { get set }
-
Property to set image of
DetailImageView
Declaration
Swift
@IBInspectable public var detailImage: UIImage? { get set }
-
Text of
headlineLabel
Declaration
Swift
@IBInspectable public var headlineText: String? { get set }
-
Text of
subheadlineLabel
Declaration
Swift
@IBInspectable public var subheadlineText: String? { get set }
-
Text of
bodyLabel
Declaration
Swift
@IBInspectable public var bodyText: String? { get set }
-
Text of
footnoteText
Declaration
Swift
@IBInspectable public var footnoteText: String? { get set }
-
Text of
statusLabel
Declaration
Swift
@IBInspectable public var statusText: String? { get set }
-
Image of
statusImageView
Declaration
Swift
@IBInspectable public var statusImage: UIImage? { get set }
-
Text of
substatusLabel
Declaration
Swift
@IBInspectable public var substatusText: String? { get set }
-
Image of
substatusImageView
Declaration
Swift
@IBInspectable public var substatusImage: UIImage? { get set }
-
Text of
descriptionLabel
Declaration
Swift
@IBInspectable public var descriptionText: String? { get set }
-
Text of
tags
for IB display purpose onlyDeclaration
Swift
@IBInspectable public var ibDisplayTagsText: String? { get set }
-
Deprecated property
Declaration
Swift
@available(*, deprecated, message: "The component design has been updated, to allocate content frames based upon the content intrinsic sizes. The value `splitPercent` will be ignored at runtime.") public var splitPercent: CGFloat { get set }
-
Deprecated property
Declaration
Swift
@available(*, deprecated, message: "The component design has been updated, to allocate content frames based upon the content intrinsic sizes. The value `isApplyingSplitPercent` will be ignored at runtime.") public var isApplyingSplitPercent: Bool { get set }