Android 打开网页之CustomTabs_custom tabs

一般打开url有以下几种方式：

• 调用默认浏览器
• 用WebView
• 用CustomTabsIntent

默认浏览器的话，是跳转到别的app，我方app就切换到后台了，至于什么时候返回回来就不确定了，且在后台有被回收的风险，不利于业务开展，如果是打开浏览器之后就完成任务的情况，可以使用。

WebView是我们比较常用的，如果页面可控，且需要交互的，还是建议使用webview的。

CustomTabs在用户的默认浏览器中显示网页，相当于在自己的app中用默认浏览器打开网页，效果类似WebView，但使用起来比WebView轻量，也更安全，性能更好。

今天主要说说CustomTabs。

效果：

这是打开应用宝的一个App下载链接。可以看到加载速度还是很快的，就像打开activity一样。

引入

customtabs其实是browser包下的，browser是jetpack下的，现在统一纳入到androidx。

dependencies {
    implementation "androidx.browser:browser:1.3.0"
}
1
2
3

使用

简单使用的话，只要一行代码

CustomTabsIntent.Builder().build().launchUrl(context, uri)
1

就这么简单。

上面提到效果图中打开网页像打开activity一样，如果更像呢，主题一直是不是更像了。

定制ui

CustomTabsIntent也支持定制ui

//设置颜色方案
val schemeParams = CustomTabColorSchemeParams.Builder()
                .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
                .setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
                .build()
                
CustomTabsIntent.Builder()
                .setDefaultColorSchemeParams(schemeParams)
                .build().launchUrl(context, uri)
1
2
3
4
5
6
7
8
9

CustomTabColorSchemeParams支持

• toolbarColor
• secondaryToolbarColor
• navigationBarColor
• navigationBarDividerColor

看看效果

菜单

比如setActionButton

val bitmap = BitmapFactory.decodeResource(this.resources, R.mipmap.ic_setting)
val intent = Intent(context, LoginActivity::class.java)
val activity = PendingIntent.getActivity(context, 0, intent, 0)
//内置启动
CustomTabsIntent.Builder()
    .setActionButton(bitmap, "自定义Action", activity)
    .setDefaultColorSchemeParams(schemeParams)
    .build().launchUrl(context, uri)
1
2
3
4
5
6
7
8

这里用PendingIntent指定后续操作，比如打开一个页面或者发送一个广播。

可以看到右上角多了一个设置的小图标。

除此之外还有很多别的api，比如：

• addMenuItem(String label, PendingIntent pendingIntent)
• setCloseButtonIcon(Bitmap icon)
• setShowTitle(boolean showTitle)
• 等等

完整代码

    btn_launch.setOnClickListener {
        openWebPage(this, Uri.parse("https://www.baidu.com"))
    }
 
	...

    private fun openWebPage(context: Context, uri: Uri) {
        if (context.isChromeSupported()) {
            //设置颜色方案
            val schemeParams = CustomTabColorSchemeParams.Builder()
                .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
                .setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
                .build()

            val bitmap = BitmapFactory.decodeResource(this.resources, R.mipmap.ic_setting)
            val intent = Intent(context, LoginActivity::class.java)
            val activity = PendingIntent.getActivity(context, 0, intent, 0)

            //内置启动
            CustomTabsIntent.Builder()
                .setActionButton(bitmap, "自定义Action", activity)
                .setDefaultColorSchemeParams(schemeParams)
                .build().launchUrl(context, uri)
        } else {
            //启动默认浏览器
            context.startActivity(Intent(Intent.ACTION_VIEW, uri))
        }
    }

    private fun Context.isChromeSupported(): Boolean {
        val serviceIntent = Intent(CustomTabsService.ACTION_CUSTOM_TABS_CONNECTION)
        serviceIntent.setPackage("com.android.chrome")
        val resolveInfos = packageManager.queryIntentServices(serviceIntent, 0)
        return !resolveInfos.isNullOrEmpty()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

感谢

• 官方文档
• 提升体验-支持Chrome Custom Tabs