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;
}