FUIObjectHeader

@IBDesignable open class FUIObjectHeader: NibDesignable, UIScrollViewDelegate

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

FUIObjectHeader

FUIObjectHeader

FUIObjectHeader

FUIObjectHeader

FUIObjectHeader

Compact (Portrait) Horizontal Size Class: Anatomy & Variations

FUIObjectHeader

FUIObjectHeader

FUIObjectHeader

Views Available in FUIObjectHeader:

  • detailImageView: a UIImageView view added to the view. The image size is set to 45px by 45px in compact mode and 70px by 70px in regular mode. Use detailImage to set image

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

  • subheadlineLabel: an UILabel view is added 4px below headlineLabel to the view. Use subheadlineText to set label text

  • tags: a list of tag labels is a part of AdditionalInfoView added 16px below subheadlineLabel. The view displays no more than 3 tags on screen.

  • bodyLabel: an UILabel view is a part of AdditionalInfoView added 6px below tags to the view. Use bodyText to set label text

  • footnoteLabel: an UILabel view is a part of AdditionalInfoView added 3px below bodyLabel to the view. Use footnoteText to set label text

  • descriptionLabel: an UILabel view tended to display a long text in the view. It always gets displayed in compact view. If detailContentView and AdditionalInfoView are set, regular view does not show descriptionLabel. In compact view, if AdditionalInfoView is not set, the label is displayed below headlineLabel and subheadlineLabel on page1 of the scroll view; otherwise, if DetailContentView is not set, the label is placed to page2 of the scroll view. When both AdditionalInfoView and DetailContentView are set, the label would be placed to page3 of the scroll view. Use descriptionText to set label text

  • statusImageView/statusLabel: an UIImageView/UILabel added to the view for status. statusImageView gets added with size 16px by 16px. The view is right to headlineLabel in compact mode and right to DetailContentView in regular mode. Use cstatusText to set label text or statusImage to set image.

  • substatusImageView/substatusLabel: an UIImageView/UILabel added to the view under status. substatusImageView gets added with size 16px by 16px. Use substatusText to set label text or substatusImage to set image.

  • detailContentView: an UIView added to the view in page2 in compact view and right to headlineLabel in regular mode.

Example Initialization and Configuration:

In table view controller’s viewDidLoad function:


 //Programmatically add an Object header to tableview
 //let objectHeader = FUIObjectHeader() //View height is content driven by default.
 //     //Or if developer wants to explictely set the height, set `isAutoResizingHeight` to false
 //     //let objectHeader = FUIObjectHeader(frame: CGRect(x: 0, y: 0, width: self.tableView.frame.size.width, height: 200))
 //     //objectHeader.isAutoResizingHeight = false
 //Assign objectHeader to tableView's tableHeaderView
 //self.tableView.tableHeaderView = objectHeader

 //If FUIObjectHeader is added to the tableview in the storyboard
 let objectHeader = self.tableView.tableHeaderView as! FUIObjectHeader
 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 = #imageLiteral(resourceName: "ErrorIcon")

 // create a custom `UIView`-subclassing instance, to set to `detailContentView` property.
 let myAnalytics = AnalyticHeaderDetailView()
 myAnalytics.chartImageView.image = #imageLiteral(resourceName: "hogwarts")
 objectHeader.detailContentView = myAnalytics

Note:

FUIObjectHeader added to UITableView as tableHeaderView is compatible with UIRefreshControl added to the same table view. Just 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, 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!)

  • When both FUIObjectHeader and UIRefreshControl are added programmatically in a table view controller class, table view needs to bring the refreshControl to the front only if FUIObjectHeader is added first:

 //set objectHeader to tableHeaderView first
 self.tableView.tableHeaderView = objectHeader
 //set a refresh control next
 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!)

  • When both FUIObjectHeader and UIRefreshControl are added programmatically in the table view controller class, table view does not need to explicitly bring the refreshControl to the front if refreshControl is added first:

 //set a refresh control first
 self.refreshControl = UIRefreshControl()
 self.refreshControl?.addTarget(self, action: #selector(refreshTriggered), for: .valueChanged)
 self.refreshControl?.tintColor = UIColor.white
 //no need to explicitly bring refresh control to the front to make it visible
 //self.tableView.bringSubview(toFront: self.refreshControl!)

 //set objectHeader to tableHeaderView next
 self.tableView.tableHeaderView = objectHeader

  • Detail image view that contains an image with size of 45px x 45px in compact mode or 70px x 70px in regular mode

    Declaration

    Swift

    @IBOutlet open weak var detailImageView: FUIImageView!
  • A headline label in the object name and title view. Use headlineText to set the label’s text value

    Declaration

    Swift

    @IBOutlet open weak var headlineLabel: FUILabel!
  • A sub-headline label in the object name and title view. Use subheadlineText to set the label’s text value

    Declaration

    Swift

    @IBOutlet open weak var subheadlineLabel: FUILabel!
  • A body label in the additional info view. Use bodyText to set the label’s text value

    Declaration

    Swift

    @IBOutlet open weak var bodyLabel: FUILabel!
  • A footnote label in the additional info view. Use footnoteText to set the label’s text value

    Declaration

    Swift

    @IBOutlet open weak var footnoteLabel: FUILabel!
  • A description label displayed in the description view. Use descriptionText to set the label’s text value

    Declaration

    Swift

    @IBOutlet open weak var descriptionLabel: FUILabel!
  • Master view of FUIObjectHeader

    Declaration

    Swift

    @IBOutlet open weak var masterView: UIView!
  • A status label displayed in the status view. Use statusText to set the label’s text value. Status Label and status image can not co-exist in display. When both are set, the last one set gets displayed only.

    Declaration

    Swift

    open var statusLabel: FUILabel
  • A substatus label displayed below statusImageView or statusLabel. Use substatusLabel to set the label’s text value. It’s expected to either set substatusText or substatusImage to display either one as the same position. When both statusText and statusImage are set, the last property set gets displayed only.

    Declaration

    Swift

    open var substatusLabel: FUILabel
  • A status image displayed in the status view. Use stuatsImage to set an image. It’s expected to either set statusText or statusImage to display either one as the same position. When both statusText and statusImage are set, the last property set gets displayed only.

    Declaration

    Swift

    open var statusImageView: UIImageView
  • A substatus image displayed below statusImageView or statusLabel. Use substatusImage to set an image to the view. It’s expected to either set stubsatusText or substatusImage to display either one as the same position. When both substatusText and substatusImage are set, the last property set gets displayed only.

    Declaration

    Swift

    open var substatusImageView: UIImageView
  • A UIView label in the detail view displayed as page2 in the scroll view for compact mode or right to headlineLabel for regular mode.

    Declaration

    Swift

    open var detailContentView: UIView!
  • A list of tags displayed in the tags view. No more than three (3) tags will be displayed

    Declaration

    Swift

    open var tags = [FUITag]()
  • Default main stack right edge is set at midpoint of cell’s readable width, minus 8px. Set to fraction between 0.01 and 0.99, to move the right edge of the mainStack, relative to the cell readable width.

    Important: the percentage of readable width includes area often containing other subviews. So, a valid value is typically between 30% and 70%.

    Only used when horizontalSizeClass of the object cell is .regular.

    Declaration

    Swift

    open var splitPercent: CGFloat
  • A flag to automatically set FUIObjectHeader view height based on view content. Set true to allow content-driven height resizing; otherwise, setting false allows caller to explictely set the height.

    Declaration

    Swift

    open var isAutoResizingHeight: Bool = true