Android 打開網頁之CustomTabs

一般打開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"
}

使用

簡單使用的話，只要一行代碼

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

看看效果

選單

比如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指定后續操作，比如打開一個頁面或者發送一個廣播，

可以看到右上角多了一個設定的小圖示，

除此之外還有很多別的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()
    }

感謝

• 官方檔案
• 提升體驗-支持Chrome Custom Tabs