Object Header¶
FUIObjectHeader
¶
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 to45px
by45px
in compact mode and70px
by70px
in regular mode. UsedetailImage
to set image -
headlineLabel
: anUILabel
view is always displayed and intended to display a headline text in the view. UseheadlineText
to set label text -
subheadlineLabel
: anUILabel
view is added4px
belowheadlineLabel
to the view. UsesubheadlineText
to set label text -
tags
: a list of tag labels is a part ofAdditionalInfoView
added16px
belowsubheadlineLabel
. The view displays no more than 3 tags on screen. -
bodyLabel
: anUILabel
view is a part ofAdditionalInfoView
added6px
belowtags
to the view. UsebodyText
to set label text -
footnoteLabel
: anUILabel
view is a part ofAdditionalInfoView
added3px
belowbodyLabel
to the view. UsefootnoteText
to set label text -
descriptionLabel
: anUILabel
view tended to display a long text in the view. It always gets displayed in compact view. IfdetailContentView
andAdditionalInfoView
are set, regular view does not showdescriptionLabel
. In compact view, ifAdditionalInfoView
is not set, the label is displayed belowheadlineLabel
andsubheadlineLabel
on page 1 of the scroll view; otherwise, ifDetailContentView
is not set, the label is placed to page 2 of the scroll view. When bothAdditionalInfoView
andDetailContentView
are set, the label would be placed to page 3 of the scroll view. UsedescriptionText
to set label text -
statusImageView
/statusLabel
: anUIImageView/UILabel
added to the view for status.statusImageView
gets added with size16px
by16px
. The view is right toheadlineLabel
in compact mode and right toDetailContentView
in regular mode. UsecstatusText
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. -
detailContentView
: anUIView
added to the view in page 2 in compact view and right toheadlineLabel
in regular mode.
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.bodyLabel.text = "1000-Hamburg, MECHANIK."
objectHeader.footnoteLabel.text = "Due on 12/31/16."
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#>
// 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:
1 |
|
Supported ObjectHeader
attributes:
1 2 3 |
|
Supported Text
class paths:
1 2 3 4 5 6 7 8 9 |
|
Supported Text
attributes:
1 2 3 4 5 6 |
|
Supported ImageView
class paths:
1 2 3 |
|
Supported ImageView
attributes:
1 2 |
|