Progress Banner Message View¶
FUIProgressBannerMessageView
¶
public class FUIProgressBannerMessageView: FUIBannerMessageView
FUIProgressBannerMessageView
shows an overlay message centered in the screen underneath a navigation bar with a progress bar on the top of the message view. FUIProgressBannerMessageView
must be attached to a FUINavigationBar
to make it work properly.
FUIProgressBannerMessageView
is a subclass of FUIBannerMessageView
and FUINavigationBar
can contain only one FUIBannerMessageView
.
Call function show
on a FUIProgressBannerMessageView
instance to show the message.
By default, the message is shown centered on screen.
This message view will stayed on the screen until the progress reached 1.0 even if user navigate to other views.
Developer may choose to dismiss the message view when user navigates to other views by calling the dismissBanner
function of the FUIProgressBannerMessageView
.
Developer should use the update
function to update the progress of the progress bar.
When the progress reaches 1.0, the default behavior is that there will be a check mark and optional message,
the completionMessage
property of the FUIProgressBannerMessageView
, displayed for five seconds.
Then the FUIProgressBannerMessageView
will be dismissed. Developer can use the completion
parameter in
update
function to override this default behavior.
Usage¶
Usually, the creation of FUIProgressBannerMessageView
and attachment to FUINavigationBar
is
in the viewDidAppear
function of a UIViewController
. As the code indicates below:
var syncBanner: FUIProgressBannerMessageView?
override public func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
guard let navBar = self.navigationController?.navigationBar as? FUINavigationBar else {
return
}
let syncBannerView = FUIProgressBannerMessageView()
navBar.bannerView = syncBannerView
syncBannerView.isFadedInAndOut = false
syncBannerView.show(message: "Cancel Sync")
syncBannerView.didSelectHandler = { [unowned self] in
self.cancelSync()
}
syncBannerView.completionMessage = "Sync Complete"
self.syncBanner = syncBannerView
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
syncBanner?.dismissBanner(animated: true)
}
func cancelSync() {
// make call to cancel the sync
// ...
syncBanner?.dismissBanner(animated: true)
}
func advanceProgress(progress: Float) {
syncBanner?.update(progress: progress, animated: true, completion: nil)
}
Theming¶
fdlFUIProgressBannerMessageView_titleLabel {
font-size: 13;
font-name: mediumSystem;
font-color: @tintColorDark;
font-color-highlighted: @tintColorTapStateDark;
}
fdlFUIProgressBannerMessageView_dividerBottom {
background-color: @line;
}
fdlFUIProgressBannerMessageView_messageBannerDividerTop {
background-color: @chart1;
}
fdlFUIProgressBannerMessageView_progressBar {
progress-tint-color: @chart2;
track-tint-color: @line;
}
fdlFUIProgressBannerMessageView_contentViewTapped {
background-color: @primary5;
}
fdlFUIProgressBannerMessageView_completionLabel {
font-size: 13;
font-name: mediumSystem;
font-color: @primary7;
}
fdlFUIProgressBannerMessageView_syncIcon {
tint-color: @tintColorDark;
}
fdlFUIProgressBannerMessageView_completionCheckMark {
image: green-check-mark1;
tint-color: @primary7;
}
fdlFUIProgressBannerMessageView_closeIcon {
tint-color: @primary2_lightBackground;
}