自定义应用容器界面

SDK 支持应用容器界面的自定义。可以通过实现自定义协议方式来对应用容器进行自定义。

协议方式

可以通过实现应用容器自定义扩展接口来完成应用容器界面的自定义，自定义接口定义在KIMExpWebAppPage 中。

接口定义

KIMExpPageWebAppPage :

方法	参数	返回值	说明
configureTitleBar	• titleBar: KWebAppTitleBar 标题视图。	Unit	配置页面导航栏标题视图。可实现该方法，通过 titleBar 参数获取导航栏标题视图控件，对标题视图控件进行配置，如修改标题样式、添加左右侧按钮等。
updateTitleBar	• titleBar: KWebAppTitleBar 标题视图。	Unit	更新导航栏标题视图。SDK内部有相关修改标题视图的逻辑，如更新标题展示等，当标题视图发生更新时会调用该代理方法，可通过实现该方法对titleBar 内部变化进行监听，以便对 titleBar 进行必要的二次处理。
onWebViewSetup	• webView: KWebView WebView视图。	Unit	完成设置webView。当webview设置完成后会调用该代理方法，你可以实现该方法来对webview进行额外的自定义配置，如注入JavaScriptInterface等。
updateWebAppPopupMenus	• fragment: KIMWebAppFragment 应用容器Fragment。 • menus: MutableList<KIMWebAppMenuItem> 应用容器底部弹出面板默认数据源。	Unit	更新应用容器底部弹出面板数据源。弹窗面板界面数据刷新时会调用该方法，可实现该方法对弹窗面板数据进行二次加工，items 为弹窗面板列表默认数据，可基于默认 items 进行改造，如修改排序、插入、删除元素，返回新的 KIMWebAppMenuItem 数组。
onClickedWebAppMenuItem	fragment: KIMWebAppFragment 应用容器Fragment。 item: KIMWebAppMenuItem 被点击的item。 defaultHandler: () -> Unit 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Unit	应用容器底部弹出面板item点击事件拦截。每当用户点击底部菜单项时，该方法会被调用，允许您根据点击的菜单项执行相应的操作。如果需要执行SDK内部默认点击行为，可以调用 defaultHandler 闭包实现。

自定义示例

自定义标题栏

应用容器标题栏默认展示了标题及右侧按钮。可通过实现KIMExpWebAppPage 协议方法来自定义标题栏的展示及点击事件。

效果展示

默认	自定义

代码示例

kotlin

//实现 KIMExpWebAppPage 相关协议方法。
class CustomWebAppTitle : KIMExpWebAppPage() {

    override fun configureTitleBar(titleBar: KWebAppTitleBar) {
        // 隐藏原来的胶囊按钮
        titleBar.getCapsuleView().visibility = View.GONE

        // 自定义右侧第一个按钮（从右往左数）
        val right1Btn = titleBar.rightIcon1
        right1Btn.visibility = View.VISIBLE
        right1Btn.setImageResource(R.drawable.ic_web_container_menu_right_custom1)
        right1Btn.setColorFilter(WResourcesUtil.getColor(R.color.kd_color_white), PorterDuff.Mode.SRC_IN)
        right1Btn.setOnClickListener {
            WToastUtil.show("自定义按钮2被点击")
        }

        // 自定义右侧第二个按钮（从右往左数）
        val right2Btn = titleBar.rightIcon2
        right2Btn.visibility = View.VISIBLE
        right2Btn.setImageResource(R.drawable.ic_web_container_menu_right_custom1)
        right2Btn.setColorFilter(WResourcesUtil.getColor(R.color.kd_color_white), PorterDuff.Mode.SRC_IN)
        right2Btn.setOnClickListener {
            WToastUtil.show("自定义按钮被点击")
        }
    }

    override fun updateTitleBar(titleBar: KWebAppTitleBar) {
        val context = titleBar.context
        WStatusBarUtil.setDarkMode(context as Activity)
        // 增加返回按钮
        titleBar.setBackIconVisibility(View.VISIBLE)
        // 清除颜色滤镜
        titleBar.titleBackIcon.colorFilter = null
        titleBar.titleBackIcon.setColorFilter(WResourcesUtil.getColor(R.color.kd_color_white), PorterDuff.Mode.SRC_IN)

        // 自定义标题
        titleBar.setTitleText("自定义标题栏")
        titleBar.titleText.setTextColor(WResourcesUtil.getColor(R.color.kd_color_white))
        titleBar.setBackgroundColor(WResourcesUtil.getColor(R.color.navigation_bar_background_color))
    }
}

配置WebView

可通过实现KIMExpWebAppPage 协议方法来配置WebView，如注入自定义JSAPI

代码示例

kotlin

class CustomPageWebApp : KIMExpWebAppPage() {
        override fun onWebViewSetup(webView: KWebView) {
            webView.addJavascriptInterface(CustomJsapi(), "customJsapi")
        }
    }

    private class CustomJsapi {
        @JavascriptInterface
        fun test() {
            Toast.makeText(getContext(), "Test", Toast.LENGTH_SHORT).show()
        }
    }

配置底部弹出菜单

应用容器底部弹出菜单默认包含了“刷新”、“分享”、“下载”、“机器人”，“重新启动”。可通过实现KIMExpWebAppPage 协议方法来添加/删除/修改菜单项或拦截点击事件

效果展示

默认	自定义

代码示例

kotlin

class CustomWebAppPopMenu : KIMExpWebAppPage() {
    override fun updateWebAppPopupMenus(
        fragment: KIMWebAppFragment,
        menus: MutableList<KIMWebAppMenuItem>
    ): List<KIMWebAppMenuItem> {
        // 移除菜单第一项
        menus.removeAt(0)
        // 新增菜单item
        menus.add(0, KIMWebAppMenuItem("Test", R.drawable.ic_web_container_menu_right_custom1, R.string.custom))
        //返回新菜单
        return menus
    }

    override fun onClickedWebAppMenuItem(
        fragment: KIMWebAppFragment,
        item: KIMWebAppMenuItem,
        defaultHandler: () -> Unit
    ) {
        when(item.id) {
            "Test" -> {
                //拦截新增菜单item点击事件
                WToastUtil.show("自定义按钮被点击")
            }
            else -> {
                defaultHandler.invoke()
            }
        }
    }
}

注册自定义实现

实现了应用容器自定义相关接口后，可通过以下方式注册自定义实现，达到替换SDK默认实现的效果。

代码示例

1. 实现KIMSdkApplication，并注册自定义实现：

kotlin

class AppWorkspaceApplication : KIMSdkApplication() {
    override fun confMeatsOnBone(): KConf<Meat> {
        return kConfOf(
            // 注册自定义应用扩展接口
            KIMExpWebAppPage::class.java confTo CustomWebAppPopMenu::class.java
            ...
        )
    }
}

2. AndroidManifest中声明：

Xml

<meta-data
   android:name="{your-package-name}.AppWorkspaceApplication"
   android:value="@string/kim_sdk_application" />

至此，完成了自定义应用容器的注册。