FUIProfileHeader
@IBDesignable
open class FUIProfileHeader : NibDesignable
FUIProfileHeader
extends UIView
to display profile header information. It contains a set of default content views and has different layouts in compact and regular mode.
Scrolling animations are supported if you set up profile header correctly.
Use profile header with or without animation.
Without Animation
Simply set table view’s tableHeaderView
.
tableView.tableHeaderView = profileHeader
With Animation
Scrolling animation will be activated only if all the conditions below are met (otherwise there might be some unexpected behaviors):
- Profile header is added to table view as a subview.
tableView.addSubview(profileHeader)
The table view to which profile header is added has
isScrollEnable
set to true.The table view to which profile header is added is embedded in a navigation controller and the navigation bar is not hidden.
Large title is disabled in this view controller.
Views Available in FUIProfileHeader
:
imageView
: aUIImageView
. The image size is set to80px
by80px
. Useimage
orimageView.image
to set image.headlineLabel
: aUILabel
intended to display a headline text. UseheadlineText
to set label text.subheadlineLabel
: aUILabel
intended to display a subheadline text. UsesubheadlineText
to set label text.descriptionLabel
: aUILabel
intended to display a short text. UsedescriptionText
to set label text.detailContentView
: aUIView
added to the last position in the stack.
Example Initialization and Configuration
In table view controller’s viewDidLoad
method:
let profileHeader = FUIProfileHeader()
profileHeader.imageView.image = #imageLiteral(resourceName: "rw")
// To enable a default gradient layer behind the placeholder text.
profileHeader.imageView.isGradientLayerEnabled = true
// Set placeholder text.
profileHeader.imageView.placeholder.text = "This is a placeholder"
profileHeader.headlineText = "Harry Ford"
profileHeader.subheadlineText = "The boy wizard, the boy wizard"
profileHeader.descriptionLabel.text = "This is a description"
//create an activityControl and set to detail content view.
let activityControl = FUIActivityControl()
activityControl.maxVisibleItems = 5
activityControl.itemSize = CGSize(width: 24, height: 24)
activityControl.spacing = CGFloat(36.0)
let phoneActivity = FUIActivityItem.phone
let msgActivity = FUIActivityItem.message
let emailActivity = FUIActivityItem.email
activityControl.addActivities([phoneActivity, msgActivity, emailActivity])
activityControl.activityItems[phoneActivity]?.setTintColor(UIColor.white, for: .normal)
activityControl.activityItems[msgActivity]?.setTintColor(UIColor.white, for: .normal)
activityControl.activityItems[emailActivity]?.setTintColor(UIColor.white, for: .normal)
profileHeader.detailContentView = activityControl
// If no animation is needed.
self.tableView.tableHeaderView = profileHeader
// If you want the scrolling animation.
// self.tableView.addSubview(profileHeader)
Important: There is no way to add a view as a subview of UITableView
in storyboard/nib file. We highly recommend that developer’s set up the profile header programmatically, but if you really need to use storyboard/nib file, follow the instructions below:
In storyboard/nib file, create a separate
UIView
which is not under the structure of yourUITableView
and set custom class toFUIProfileHeader
.Set up an
IBOutlet
property for your profile header so that you can access it in your controller.In
viewDidLoad()
, programmatically add it to table view as a subview.
@IBOutlet var profileHeader: FUIProfileHeader!
override func viewDidLoad() {
self.tableView.addSubview(self.profileHeader)
}
Theming
Supported style classes
fdlFUIProfileHeader
fdlFUIProfileHeader_background
fdlFUIProfileHeader_imageView
fdlFUIProfileHeader_headlineLabel
fdlFUIProfileHeader_subheadlineLabel
fdlFUIProfileHeader_descriptionLabel
-
Image view that contains an image with size of 80px x 80px.
Declaration
Swift
@IBOutlet public private(set) var imageView: FUIImageView! { get }
-
A headline label in the profile header. Use
headlineText
to set the label’s text value.Declaration
Swift
@IBOutlet public private(set) var headlineLabel: FUILabel! { get }
-
A subheadline label in the profile header. Use
subheadlineText
to set the label’s text value.Declaration
Swift
@IBOutlet public private(set) var subheadlineLabel: FUILabel! { get }
-
A description label displayed in the profile header. Use
descriptionText
to set the label’s text value.Declaration
Swift
@IBOutlet public private(set) var descriptionLabel: FUILabel! { get }
-
A detail content view in the profile header. The view being set will be put into the last position in the stack.
Declaration
Swift
public var detailContentView: UIView? { get set }
-
The text in the headline label.
Declaration
Swift
@IBInspectable public var headlineText: String? { get set }
-
The text in the subheadline label.
Declaration
Swift
@IBInspectable public var subheadlineText: String? { get set }
-
The text in the description label.
Declaration
Swift
@IBInspectable public var descriptionText: String? { get set }
-
The image in the image view.
Declaration
Swift
@IBInspectable public var image: UIImage? { get set }
-
Text of
tags
for IB display purpose only.Declaration
Swift
@IBInspectable public var ibDisplayDetailContentView: String? { get set }
-
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 areas 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
public var splitPercent: CGFloat { get set }
-
The banner view sits underneath
FUIProfileHeader
. Call itsshow
function to display it.Declaration
Swift
open var bannerView: FUIBannerMessageView? { get set }