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

  • The current progress value (between 0.0 and 1.0) of the progress indicator.

    Declaration

    Swift

    public var progress: Float { get }
  • Optional handler, to respond to tap events on the view.

    Declaration

    Swift

    public var didSelectHandler: (() -> (Void))?
  • The message to be displayed when sync is complete

    Declaration

    Swift

    public var completionMessage: String?
  • A flag to indicate if the top divider bar is using a progress bar or not.

    If this is true, the progress bar will show the current progress. Otherwise, the top divider bar is showing a solid color.

    The default is false.

    Declaration

    Swift

    public var isUsingProgressBar: Bool { get set }
  • The progress bar in this FUIProgressBannerMessageView. This property is not used if isUsingProgressBar is false.

    Declaration

    Swift

    public let progressBar: UIProgressView
  • The Close icon image view. Tap this icon image to dismiss the banner but not to cancel the sync.

    Declaration

    Swift

    @IBOutlet
    public private(set) var closeIcon: UIImageView!
  • The Sync icon image view.

    Declaration

    Swift

    @IBOutlet
    public private(set) var syncIcon: UIImageView!
  • The duration to show the completion view.

    If this value is 0, the completion banner view will not be dismissed automatically. In that case, developer needs to invoke the dismissBanner function to dismiss the completion banner view.

    The default is 5 seconds.

    Declaration

    Swift

    open var completionViewDuration: TimeInterval
  • Updates the progress value. Updating the progress value can be animated. Values for progress should be between 0.0 and 1.0.

    Declaration

    Swift

    open func update(progress: Float, animated: Bool = false, completion: (() -> Void)? = nil)

    Parameters

    progress

    The value the progress indicator should be set to.

    animated

    Indicates if the progress update should be animated or not.

    completion

    Completion block called once progress value reached 1.0 or greater. This will be called regardless of whether animated is true or false. If this is not set, the default behavior is to display a check mark with the message in the completionMessage property for one second, then this banner is dismissed.

  • Show the banner with a message under navigation bar for a certain duration.

    Declaration

    Swift

    override open func show(message: String, withDuration duration: TimeInterval = 0, animated: Bool = true)

    Parameters

    message

    The message which will show on the banner.

    duration

    The duration in seconds for which the toast message is shown. The default is 0, which means it will not be automatically dismissed.

    animated

    Whether the banner is shown with an animation. The default is true.