There are a lot of screenshots in this article. It is recommended that interested friends download demo.

ProHUD = Toast (Notification Banner) + Alert (Progress HUD, Bullet Window) + Action Sheet (Operational Table)

You can view the big picture on the document page.

Documents and source code

• File: https://xaoxuu.com/wiki/prohud/
• Source code: https://github.com/xaoxuu/Pro...

Characteristic

Extremely simple

Send out a bullet window:

Alert.push(scene: .loading, title: "Loading", message: "Please wait a moment")

Send a notice banner:

Toast.push(scene: .warning, title: "Low power consumption of equipment", message: "Please charge the equipment in time to avoid affecting the use.")

Flexible interface

For example, send a bullet window:

Alert.push() { (alert) in
    alert.identifier = "error"
    alert.update { (vm) in
        vm.scene = .error
        vm.title = "Synchronization failure"
        vm.message = "Please check whether the network is connected."
        vm.add(action: .default, title: "retry") {
            // do something
        }
        vm.add(action: .cancel, title: "cancel", handler: nil)
    }
}

Case management

Avoid sending the same instance repeatedly:

Toast.find("aaa", last: { (t) in
    t.update() { (vm) in
        vm.title = "It already exists."
    }
}) {
    Toast.push(title: "This is one item. id by aaa Banner", message: "Avoid repeating the same message") { (t) in
        t.identifier = "aaa"
        t.update { (vm) in
            vm.scene = .warning
            vm.duration = 0
        }
    }
}

Update the results of loading:

Alert.find("loading", last: { (a) in
    a.update { (vm) in
        vm.scene = .success
        vm.title = "Synchronization success"
        vm.message = nil
    }
})

Update to Load Failure, and add Retry button:

Alert.find("loading", last: { (a) in
    a.update { (vm) in
        vm.scene = .error
        vm.title = "Synchronization failure"
        vm.message = "Please check whether the network is connected."
        vm.add(action: .default, title: "retry") {
            // do something
        }
        vm.add(action: .cancel, title: "cancel", handler: nil)
    }
})

1. Call Toast, Alert, Guard with similar interfaces.
2. Configure the custom UI style when the program is initialized and call it quickly.
3. Get published instances in a simple way to avoid repeating them.
4. Data updates can be made to published instances.
5. Horizontal and vertical screens and iPad layout optimization.
6. Easy to expand, can easily add any control, and handle the layout.
7. You can listen for disappearance events for all instances.

Toast

1. Multiple Toast coexistence strategies (tiling).
2. Only one click event is received.
3. Different default values (icons, duration) can be configured for different scenarios in advance.

Alert (Page Center Bullet Window)

1. Multiple Alert coexistence strategies (stacking with depth-of-field effect).
2. Different default values (icons, duration) can be configured for different scenarios in advance.
3. Buttons with pre-configured default styles (Default, Destructive, Cancel) can be created quickly.
4. Update text and buttons for published instances, including adding, modifying, deleting text and buttons.
5. Force the exit button (to prevent page blocking due to timeout).

Guard

1. Quickly create text elements (title, subtitle, body) with default pre-configured styles.
2. Buttons with pre-configured default styles (Default, Destructive, Cancel) can be created quickly.

Design Thought

UI and Logic Separation

This library is designed with the separation of configuration UI and calling interface. This idea draws on the common library of Hehetai. I think it is a design idea which is more convenient to call than traditional UI library and has stronger customizability than traditional UI library.

Simply put, you tell ProHUD in AppDelegate what banners, pop-ups, and action tables you want, and how to display the UI if the parameters are what.
Then the caller doesn't need to set up the UI, just focus on the data, such as:

Alert.push(scene: .loading, title: "Loading", message: "Please wait a moment")

A pop-up window is issued, and the style of the pop-up window is pre-configured in AppDelegate. I use scene as a flexible parameter, and you can extend the scene yourself, for example:

extension ProHUD.Scene {
    static var confirm: ProHUD.Scene {
        var scene = ProHUD.Scene(identifier: "confirm")
        scene.image = UIImage(named: "ProHUDMessage")
        return scene
    }
    static var delete: ProHUD.Scene {
        var scene = ProHUD.Scene(identifier: "delete")
        scene.image = UIImage(named: "ProHUDTrash")
        scene.title = "confirm deletion"
        scene.message = "This operation is irrevocable"
        return scene
    }
    static var buy: ProHUD.Scene {
        var scene = ProHUD.Scene(identifier: "buy")
        scene.image = UIImage(named: "ProHUDBuy")
        scene.title = "Confirm the payment"
        scene.message = "Refund once purchased"
        return scene
    }
}

A scene can be understood as a set of templates.

Extreme Scene

Many libraries do not have multi-instance management, so it is easy to overlap simple and rough views. ProHUD optimizes different scenarios. For banners, it can be displayed flat. Like the notification center of the system, you can drag and drop upward. For the bullet window, I did depth of field treatment for the bottom bullet window, so that it didn't look like BUG.