Contact views
-
FUIContactCell
is a variant ofUITableViewCell
defined in SAPFiori. It contains aUIImageView
, severalUILabel
s, and aFUIActivityControl
component.It supports three activity items by default. You can change this by setting
maxVisibleItems
on theactivityControl
property.Code usage:
//Create a FUIContactCell in a TableView override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: FUIContactCell.reuseIdentifier) as! FUIContactCell let activities: [ActivityItem] = [ActivityItem.phone, ActivityItem.message] let contact = DataSource.contact[indexPath.row] cell.detailImage = contact.image // To enable a default gradient layer behind the placeholder text. cell.detailImageView.isGradientLayerEnabled = true // Set placeholder text. cell.detailImageView.placeholder.text = "This is a placeholder" cell.headlineText = contact.name cell.subheadlineText = contact.title cell.descriptionText = contact.address cell.activityControl.addActivities(activities) // Optionally, adjust activity item size (defaults to `CGSize(width: 25.0, height: 25.0)`) self.activityControl.itemSize = CGSize(width: 25, height: 25) // Optionally, adjust limit on visible items in activity control (defaults to `3`) self.activityControl.maxVisibleItems = 3 // Optionally, adjust activity control spacing (defaults to `29.0`) self.activityControl.stackView.spacing = 29.0 // Implement onActivitySelectedHandler. cell.onActivitySelectedHandler = { activityItem in switch activityItem { case ActivityItem.phone: let _ = contact.call() case ActivityItem.message: let _ = contact.sendMessage() case ActivityItem.videoCall: let _ = contact.video() default: break } } }
## Theming Supported style classes
See morefdlFUIContactCell fdlFUIContactCell_headlineLabel fdlFUIContactCell_subheadlineLabel fdlFUIContactCell_descriptionLabel
Declaration
Swift
@IBDesignable open class FUIContactCell : NibDesignableFUIBaseTableViewCell, FUIActivityControlDelegate, FUIContentCopyable
-
See moreFUIActivityItem
is a activity object that activity control supports. Activities supported by default including: phone, email, message, videoCall and detailDeclaration
Swift
public struct FUIActivityItem : Equatable, Hashable
-
FUIActivityControl
is a stand-alone component supporting user activities. By default, it supports phone, email, message, videoCall.FUIContactCell
embed with aFUIActivityControl
by default.Code usage:
//You can create your own activity object if you want. let myCustomActivity = FUIActivityItem(icon: UIImage(named: "asset"), identifier: "mycustomer.twilio") let activities: [FUIActivityItem] = [FUIActivityItem.phone, FUIActivityItem.message, myCustomActivity] //Create a FUIActivityControl object. let activityControl = FUIActivityControl() activityControl.addActivities(activities) activityControl.delegate = self //Optionally, set an item size (if nil, intrinsic size of image will be used) activityControl.itemSize = CGSize(width: 44.0, height: 44.0) //Optionally, set a limit to visible items (useful for hiding items in `.compact` horizontal mode) activityControl.maxVisibleItems = 3 //Optionally, set the inter-item spacing (useful for showing more items in `.compact` horizontal mode) activityControl.spacing = 10.0 //Implement this method in your class to handle action. func activityControl(_ activityControl: FUIActivityControl, didSelectActivity activityItem: FUIActivityItem) { switch activityItem { case FUIActivityItem.phone: //do something case FUIActivityItem.message: //do something case myCustomActivity: //do something default: break } }
## Attention
The delegate object with type
See moreFUIActivityControlDelegate
is declared as a weak reference. So on deallocation it will be automatically set to nil. To keep it alive as expected, developer should retain the delegate object during its whole execution scope.Declaration
Swift
open class FUIActivityControl : NibDesignable, FUIBackgroundSchemeSupporting
-
This protocol provides method for handling activity action in a activity control component.
See moreDeclaration
Swift
public protocol FUIActivityControlDelegate : AnyObject
-
FUIProfileHeader
extendsUIView
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
See morefdlFUIProfileHeader fdlFUIProfileHeader_background fdlFUIProfileHeader_imageView fdlFUIProfileHeader_headlineLabel fdlFUIProfileHeader_subheadlineLabel fdlFUIProfileHeader_descriptionLabel
Declaration
Swift
@IBDesignable open class FUIProfileHeader : NibDesignable