Topbar Icon

Topbar Icon can be configured and modified in a set of different ways:

1️⃣ Change the icon for your own custom icon.
2️⃣ Trigger action from the icon.
3️⃣ Change the icon for a View, left or right of the topbar.
4️⃣ Remove the icon.
5️⃣ Example on animation.

1. Custom Icon Left

Out of the box you can override the property that has the topbar icon and change for your own icon.

    override var appIcon: UIImage? {
        return UIImage(named: "IconBlue")

This would look like this:

Topbar Icon Left Blue

2. Trigger Action

The appIcon includes a trigger action that can be overrided directly in the KeyboardViewController.

    override func triggerOpenApp() {
        // Do whatever you want

Be aware that, when you configure your own View, this trigger action does not work anymore and it depends on you to implement your own buttons or actions inside your View.

3. View left or right as Icon

Apart from adding a UIImage as Icon, Fleksy KeyboardSDK also enables you to add a View for your own specific requirements. This View might be added to the left of the topbar or to the right part of it.

One of the use cases is to add an animated icon to notify the user about an specific change in the keyboard.

For example:

    override var leadingTopBarView: UIView? {
        let iconViewLeading = UIView()
        return iconViewLeading

Topbar Icon Left Blue

Adding the view on the right side:

    override var trailingTopBarView: UIView? {
        let trailingTopBarView = UIView()
        return trailingTopBarView

4. Remove Icon

Finally you can get rid of any icon on the left side of the topbar. By returning nil overriding the leadingTopBarView will inform the SDK that you do not want any view or Icon.

    override var leadingTopBarView: UIView? {
        return nil

5. Example

You can change the Icon when you want:

Topbar Icon Configuration

If something needs to be added or if you find an error in our documentation, please let us know either on our GitHub or Discord.

Last updated on July 25, 2023