FUIProfileHeader

@IBDesignable
open class FUIProfileHeader : NibDesignable

FUIProfileHeader extends UIView for showing information of an profile header. It contains a set of default content views and has different layouts in compact and regular mode.

Scrolling animation are supported if you setup 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 which profile header is added to has isScrollEnable set to true.

• The table view which profile header is added to is embeded in a navigation controller and navigation bar is not hidden.

Views Available in FUIProfileHeader:

• imageView: a UIImageView. The image size is set to 80px by 80px. Use image or imageView.imageto set image.

• headlineLabel: an UILabel intended to display a heandline text. Use headlineText to set label text.

• subheadlineLabel: an UILabel intended to display a subheandline text. Use subheadlineText to set label text.

• descriptionLabel: an UILabel intended to display a short text. Use descriptionText to set label text.

• detailContentView: an UIView 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")
profileHeader.headlineText = "Harry Potter"
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 recommand setup profile header programmatically, but if you really need to use storyboard/nib file, follow the instructions below:

1. In storyboard/nib file, create a separate UIView which is not under the structure of your UITableView and set custom class to FUIProfileHeader.

2. Setup an IBOutlet property for your profile header so that you can access it in your controller.

3. In viewDidLoad(), add it to table view as a subview programmatically.

@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