Customize title bar favorite/unfavorite button

The super app can customize the appearance of the title bar favorite/unfavorite button to ensure a consistent user interface. This button allows user to add or remove a mini program from their favorites. To customize the button, the super app must implement the TitleBarInfoExtension interface. This topic covers the default user experience, implementation steps, and interface details.

Default user experience

By default, the title bar favorite/unfavorite button is a star-shaped icon. Refer to the following table for UI examples:

Before you begin

To customize the user interface for the title bar favorite/unfavorite button, ensure that the integrated iOS IAPMiniProgram SDK is version 2.65.7 or later. For more information, see SDK release notes.

Procedure

To customize the title bar favorite/unfavorite button, take the following two steps:

Step 1: Implement the TitleBarInfoExtension interface

Create a class that implements the TitleBarInfoExtension interface. Within the class, override the getTitleBarItemInfo method to customize the title bar favorite/unfavorite button. Refer to the following code for a sample implementation. For more information about the interface and the method, refer to TitleBarInfoExtension.

class CustomTitleBarInfoExtensionImpl : TitleBarInfoExtension {
    override fun getTitleBarItemInfo(type: String, status: String): TitleBarItemInfo {
        var titleBarItemInfo: TitleBarItemInfo? = null
        when (type) {
            TitleBarInfoExtension.MenuType.TYPE_COLLECT -> titleBarItemInfo =
                if (TextUtils.equals(TitleBarInfoExtension.MenuStatus.STATUS_COLLECT_OFF, status)) {
                    // The mini program is unfavorited.
                    TitleBarItemInfo(R.mipmap.icon_extension, R.mipmap.icon_browser_offline)
                } else {
                    // The mini program is favorited.
                    TitleBarItemInfo(R.mipmap.icon_more, R.mipmap.icon_browser_online)
                }
        }
        return titleBarItemInfo!!
    }
}

Step 2: Register the implementation class

After initializing the SDK, call the registerExtension API to register the implementation class (for example, CustomTitleBarInfoExtensionImpl in the sample) with the SDK. Refer to the following sample registration code:

IAPConnect.init(application, initConfig, object : InitCallback {
    override fun onSuccess() {
        //···
        Griver.registerExtension(
            GriverExtensionManifest(
                TitleBarInfoExtension::class.java,
                CustomTitleBarInfoExtensionImpl()
            )
        )
    }
})

Structures

TitleBarInfoExtension interface

The TitleBarInfoExtension interface defines a method for the super app to customize the title bar favorite/unfavorite button, which the SDK then calls to render the custom button. Refer to the following code for the interface definition:

interface TitleBarInfoExtension : GriverExtension {
    @StringDef(TitleBarInfoExtension.MenuType.TYPE_COLLECT)
    annotation class MenuType {
        companion object {
            const val TYPE_COLLECT: String = "TitleBarCollect"
        }
    }

    @StringDef(
        TitleBarInfoExtension.MenuStatus.STATUS_NONE,
        TitleBarInfoExtension.MenuStatus.STATUS_COLLECT_ON,
        TitleBarInfoExtension.MenuStatus.STATUS_COLLECT_OFF
    )
    annotation class MenuStatus {
        companion object {

            const val STATUS_NONE: String = ""

            const val STATUS_COLLECT_ON: String = "TitleBarCollect_On"

            const val STATUS_COLLECT_OFF: String = "TitleBarCollect_Off"
        }
    }

    fun getTitleBarItemInfo(
        @TitleBarInfoExtension.MenuType type: String,
        @TitleBarInfoExtension.MenuStatus status: String?
    ): TitleBarItemInfo
}

Based on the definition, this interface provides the following methods:

getTitleBarItemInfo method

Parameters

This method has the following input parameters:

Return value

The method returns a TitleBarItemInfo object, which contains the following parameters for the super app to customize the favorite/unfavorite button: