Android 打开网页之CustomTabs

简介: Android 打开网页之CustomTabs

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

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


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


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


今天主要说说CustomTabs。


效果:

https://ucc.alicdn.com/images/user-upload-01/20201218154520480.gif#pic_center

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


引入

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


dependencies {
    implementation "androidx.browser:browser:1.3.0"
}

使用

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

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

就这么简单。

上面提到效果图中打开网页像打开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)

CustomTabColorSchemeParams支持

  • toolbarColor
  • secondaryToolbarColor
  • navigationBarColor
  • navigationBarDividerColor


看看效果

image.png

菜单

比如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)

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

image.png

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


除此之外还有很多别的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月前
|
Android开发
【安卓版】网页转应用v1.2,生成属于你的专属应用
【安卓版】网页转应用v1.2,生成属于你的专属应用
72 2
|
9天前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
10天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
23天前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
16 1
|
12天前
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
|
6月前
|
XML JavaScript 前端开发
把网页放到安卓app中
把网页放到安卓app中
48 0
|
人工智能 自然语言处理 算法
《花雕学AI》20:ChatGPT使用之体验评测AI EDU的网页版+桌面端+Android+App store组合
AI EDU 是一个基于 ChatGPT 的在线学习与教育平台,可以让用户通过聊天的方式学习各种知识。AI EDU 有网页版、桌面端、Android 和 App store 组合,可以让用户在不同的设备上使用 ChatGPT 学习。AI EDU 的目标是让学习变得更加有趣、便捷和高效。
609 0
《花雕学AI》20:ChatGPT使用之体验评测AI EDU的网页版+桌面端+Android+App store组合
|
Android开发
cocos cc.resource.loadDir在网页端正常安卓端报错的解决
cocos cc.resource.loadDir在网页端正常安卓端报错的解决
232 0
cocos cc.resource.loadDir在网页端正常安卓端报错的解决
|
XML Android开发 数据格式
Android Glide加载网络图片不显示,但用网页打开又正常显示
Android Glide加载网络图片不显示,但用网页打开又正常显示
692 0
Android Glide加载网络图片不显示,但用网页打开又正常显示
|
Android开发
Android实现简单的网页跳转
首先准备Android studio 工具 第二直接上代码
143 0