Customize close button

The super app can customize the appearance of the title bar close button in HTML5 mini programs to ensure a consistent user interface. The close button allows users to close a mini program. It can be either an image button or a text button. To customize the close button, the super app must implement the GriverCloseButtonStyleExtension interface. This topic covers the user experience, implementation steps, and interface details.

Note: To control the visibility of the title bar close button, refer to isShowCloseButton.

User experience

By default, the title bar close button in HTML5 mini programs is a cross-shaped icon (×). The following table shows UI examples of both the default and custom close buttons:

Procedure

To customize the close button, take the following two steps:

Step 1: Implement the GriverCloseButtonStyleExtension interface

Create a class that implements the GriverCloseButtonStyleExtension interface. Within the class, override the getType, getContent, and getIconDrawable methods to customize the close button. Refer to the following code for a sample implementation. For more information about the interface and its method, refer to GriverCloseButtonStyleExtension.

class CustomGriverCloseButtonStyleExtensionImpl : GriverCloseButtonStyleExtension {
    override fun getType(): String {
        return "icon"
    }

    override fun getContent(): String {
        return ""
    }

    override fun getIconDrawable(): Drawable {
        return context.getResources().getDrawable(R.drawable.custom_close)
    }
}

Step 2: Register the implementation class

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

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

Structures

GriverCloseButtonStyleExtension interface

The GriverCloseButtonStyleExtension interface defines methods for the super app to customize the title bar close button in HTML5 mini programs, which the SDK then calls to obtain the custom configuration for rendering. Refer to the following code for the interface definition:

interface GriverCloseButtonStyleExtension : GriverButtonStyleExtension {
    
}

interface GriverButtonStyleExtension : GriverExtension {
    
    fun getType(): String

    fun getContent(): String

    fun getIconDrawable(): Drawable
}

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