能力中心
产品中心
应用市场
WebOffice
开发者后台

自定义网页容器界面 ​

协作中台SDK 支持网页容器界面的自定义。可以通过实现自定义协议方式来对网页容器进行自定义。

协议方式 ​

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

接口定义 ​

KIMExpBrowserPage :

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

自定义示例 ​

自定义标题栏 ​

网页容器标题栏默认展示了返回按钮、标题及右侧按钮。可通过实现 KIMExpBrowserPage 协议方法来自定义标题栏的展示及点击事件。

效果展示 ​
默认自定义
代码示例 ​
kotlin
//实现 KIMExpBrowserPage 相关协议方法。
class CustomWebContainerTitle : KIMExpBrowserPage() {

    override fun updateTitleBar(titleBar: KWebBrowserTitleBar) {
        // 自定义标题
        val titleView = titleBar.getTitle()
        titleView.apply {
            text = "自定义标题"
            setTextColor(WResourcesUtil.getColor(R.color.kd_color_white))
        }

        // 自定义标题栏背景色
        titleBar.setBackgroundColor(WResourcesUtil.getColor(R.color.navigation_bar_background_color))

        val backBtn = titleBar.getBackBtn()
        backBtn.setColorFilter(WResourcesUtil.getColor(R.color.kd_color_white), PorterDuff.Mode.SRC_IN)

        // 自定义按钮1
        val customBtn1 = titleBar.getMoreBtn()
        customBtn1.apply {
            setImageResource(R.drawable.ic_web_container_menu_right_custom1)
            setColorFilter(WResourcesUtil.getColor(R.color.kd_color_white), PorterDuff.Mode.SRC_IN)
            layoutParams.width = 44.dpToPx()
            setPadding(11.dpToPx(), 0, 11.dpToPx(), 0)
            scaleType = ImageView.ScaleType.CENTER_INSIDE
            setOnClickListener {
                WToastUtil.show("自定义按钮被点击")
            }
            visibility = ImageView.VISIBLE
        }

        // 自定义按钮2
        val customBtn2 = titleBar.getCloseBtn()
        customBtn2.apply {
            layoutParams.width = 44.dpToPx()
            setImageResource(R.drawable.ic_web_container_menu_right_custom1)
            setColorFilter(WResourcesUtil.getColor(R.color.kd_color_white), PorterDuff.Mode.SRC_IN)
            setPadding(11.dpToPx(), 0, 11.dpToPx(), 0)
            scaleType = ImageView.ScaleType.CENTER_INSIDE
            setOnClickListener {
                WToastUtil.show("自定义按钮2被点击")
            }
            visibility = ImageView.VISIBLE
        }
    }
}

配置WebView ​

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

代码示例 ​
kotlin
class CustomPageBrowser : KIMExpBrowserPage() {
        override fun onWebViewSetup(webView: KWebView) {
            webView.addJavascriptInterface(CustomJsapi(), "customJsapi")
        }
    }

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

配置底部弹出菜单 ​

网页容器底部弹出菜单默认包含了“刷新”、“分享”、“复制链接”、“浏览器打开”，“收藏”。可通过实现KIMExpBrowserPage 协议方法来添加/删除/修改菜单项或拦截点击事件

效果展示 ​
默认自定义
代码示例 ​
kotlin
class CustomWebContainerBottomMenu : KIMExpBrowserPage() {

    override fun updateBrowserPopupMenus(
        fragment: KIMBrowserFragment,
        menus: MutableList<KIMBrowserMenuItem>
    ): MutableList<KIMBrowserMenuItem> {
        // 移除菜单第一项
        menus.removeAt(0)
        // 新增菜单item
        menus.add(0, KIMBrowserMenuItem("Custom", R.drawable.ic_web_container_menu_right_custom1, R.string.custom))
        return menus
    }

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

注册自定义实现 ​

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

代码示例 ​

  1. 实现KIMSdkApplication，并注册自定义实现：
kotlin
class AppWorkspaceApplication : KIMSdkApplication() {
    override fun confMeatsOnBone(): KConf<Meat> {
        return kConfOf(
            // 注册自定义应用扩展接口
            KIMExpBrowserPage::class.java confTo CustomWebContainerBottomMenu::class.java
            ...
        )
    }
}
  1. AndroidManifest中声明：
Xml
<meta-data
   android:name="{your-package-name}.AppWorkspaceApplication"
   android:value="@string/kim_sdk_application" />

至此，完成了自定义网页容器的注册。