Android 通过Chrome Custom Tab打开网页

语言: CN / TW / HK

在日常开发中,偶尔会需要在App中打开网页,通常会使用WebView来实现。本文介绍一下另一种实现方式Chrome Custom Tab。

Chrome Custom Tab

Custom Tab是Chrome浏览器引入的一个功能,现在市面上大部分安卓设备的浏览器都已经支持此功能。Custom Tab使App原生内容与网页内容的过渡更加流畅,支持自定义部分样式,可以保持与App一致的风格,支持预加载。

官方文档

添加库

在app module下的build.gradle中添加代码,如下:

dependencies { implementation 'androidx.browser:browser:1.5.0' }

检查Custom Tab是否可用

尽管现在市面上大部分安卓设备的浏览器都已支持Custom Tab,但为了确保部分设备不支持该功能的情况下用户体验正常,可以先检查当前设备是否支持该功能,不支持的话仍然通过WebView实现。代码如下:

fun checkCustomTabAvailable(context: Context): Boolean { val packageManager = context.packageManager val browsableIntent = Intent().apply { action = Intent.ACTION_VIEW addCategory(Intent.CATEGORY_BROWSABLE) data = Uri.fromParts("http", "", null) } // 获取所有浏览器 val browsableResolverInfo = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { packageManager.queryIntentActivities(browsableIntent, PackageManager.ResolveInfoFlags.of(0)) } else { packageManager.queryIntentActivities(browsableIntent, 0) } val supportingCustomTabResolveInfo = ArrayList<ResolveInfo>() browsableResolverInfo.forEach { val serviceIntent = Intent().apply { action = androidx.browser.customtabs.CustomTabsService.ACTION_CUSTOM_TABS_CONNECTION setPackage(it.activityInfo.packageName) } val customTabServiceResolverInfo = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { packageManager.resolveService(serviceIntent, PackageManager.ResolveInfoFlags.of(0)) } else { packageManager.resolveService(serviceIntent, 0) } // 判断是否可以处理Custom Tabs service if (customTabServiceResolverInfo != null) { supportingCustomTabResolveInfo.add(it) } } return supportingCustomTabResolveInfo.isNotEmpty() }

打开网页

通过Custom Tab打开网页代码如下:

fun openCustomTab(context: Context, url: String) { // url 为要打开的网址 CustomTabsIntent.Builder().build().launchUrl(context, url.toUri()) }

需要注意的是,不能通过此方式打开Assets下的H5文件。

调整UI

Custom Tab支持自定义部分样式。

调整视图高度

可以使用CustomTabsIntent.Builder中的setInitialActivityHeightPx方法来调整打开的Custom Tab的高度,同时可以使用setToolbarCornerRadiusDp来设置圆角。具体实现方式有如下两种:

    1. 连接Custom Tab Service(建议使用此方式)。

``` // 辅助类 object CustomTabHelper {

// Custom Tab 可用的包名
private var customTabAvailablePackageName: String = ""
private var customTabsClient: CustomTabsClient? = null
private var customTabsServiceConnection: CustomTabsServiceConnection? = null

fun openCustomTabWithInitialHeight(context: Context, url: String, activityHeight: Int = 0, radius: Int = 0, adjustable: Boolean = false) {
    val customTabsIntentBuilder = CustomTabsIntent.Builder(customTabsClient?.newSession(null))
    if (activityHeight != 0) {
        // 第二个参数配置预期行为
        // ACTIVITY_HEIGHT_ADJUSTABLE 用户可以手动调整视图高度
        // ACTIVITY_HEIGHT_FIXED 用户无法手动调整视图高度
        customTabsIntentBuilder.setInitialActivityHeightPx(activityHeight, if (adjustable) CustomTabsIntent.ACTIVITY_HEIGHT_ADJUSTABLE else CustomTabsIntent.ACTIVITY_HEIGHT_FIXED)
        if (radius != 0) {
            customTabsIntentBuilder.setToolbarCornerRadiusDp(radius)
        }
    }
    customTabsIntentBuilder.build().launchUrl(context, url.toUri())
}

fun checkCustomTabAvailable(context: Context): Boolean {
    val packageManager = context.packageManager
    val browsableIntent = Intent().apply {
        action = Intent.ACTION_VIEW
        addCategory(Intent.CATEGORY_BROWSABLE)
        data = Uri.fromParts("http", "", null)
    }
    // 获取所有浏览器
    val browsableResolverInfo = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
        packageManager.queryIntentActivities(browsableIntent, PackageManager.ResolveInfoFlags.of(0))
    } else {
        packageManager.queryIntentActivities(browsableIntent, 0)
    }
    val supportingCustomTabResolveInfo = ArrayList<ResolveInfo>()
    browsableResolverInfo.forEach {
        val serviceIntent = Intent().apply {
            action = androidx.browser.customtabs.CustomTabsService.ACTION_CUSTOM_TABS_CONNECTION
            setPackage(it.activityInfo.packageName)
        }
        val customTabServiceResolverInfo = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            packageManager.resolveService(serviceIntent, PackageManager.ResolveInfoFlags.of(0))
        } else {
            packageManager.resolveService(serviceIntent, 0)
        }
        // 判断是否可以处理Custom Tabs service
        if (customTabServiceResolverInfo != null) {
            supportingCustomTabResolveInfo.add(it)
        }
    }
    if (supportingCustomTabResolveInfo.isNotEmpty()) {
        customTabAvailablePackageName = supportingCustomTabResolveInfo[0].activityInfo.packageName
    }
    return supportingCustomTabResolveInfo.isNotEmpty()
}

fun bindCustomTabsService(activity: Activity) {
    if (checkCustomTabAvailable(activity)) {
        if (customTabsClient == null) {
            customTabsServiceConnection = object : CustomTabsServiceConnection() {
                override fun onCustomTabsServiceConnected(name: ComponentName, client: CustomTabsClient) {
                    customTabsClient = client
                }

                override fun onServiceDisconnected(name: ComponentName?) {
                    customTabsClient = null
                }
            }
            customTabsServiceConnection?.let {
                CustomTabsClient.bindCustomTabsService(activity, customTabAvailablePackageName, it)
            }
        }
    }
}

fun unbindCustomTabsService(activity: Activity) {
    customTabsServiceConnection?.let { activity.unbindService(it) }
    customTabsClient = null
    customTabsServiceConnection = null
}

}

// 示例Activity class CustomTabExampleActivity : BaseGestureDetectorActivity() {

private val url = "http://go.minigame.vip/"
private var activityHeight = 0
private var topRadius = 16
private var changeHeightAdjustable = false

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding: LayoutCustomTabActivityBinding = DataBindingUtil.setContentView(this, R.layout.layout_custom_tab_activity)
    activityHeight = (resources.displayMetrics.heightPixels * 0.8).toInt()
    binding.btnChangeHeightFixed.setOnClickListener {
        checkCustomTabAvailable()
        changeHeightAdjustable = false
        CustomTabHelper.openCustomTabWithInitialHeight(this, url, activityHeight, topRadius, changeHeightAdjustable)
    }
    binding.btnChangeHeightAdjustable.setOnClickListener {
        checkCustomTabAvailable()
        changeHeightAdjustable = true
        CustomTabHelper.openCustomTabWithInitialHeight(this, url, activityHeight, topRadius, changeHeightAdjustable)
    }
}

private fun checkCustomTabAvailable() {
    if (!CustomTabHelper.checkCustomTabAvailable(this)) {
        startActivity(Intent(this, WebViewActivity::class.java).apply { putExtra(PARAMS_LINK_URL, url) })
        return
    }
}

override fun onStart() {
    super.onStart()
    CustomTabHelper.bindCustomTabsService(this)
}

override fun onDestroy() {
    super.onDestroy()
    CustomTabHelper.unbindCustomTabsService(this)
}

} ```

    1. 使用startActivityForResult

``` class CustomTabExampleActivity : BaseGestureDetectorActivity() {

private val url = "http://go.minigame.vip/"
private var activityHeight = 0
private var topRadius = 16
private var changeHeightAdjustable = false

private val customTabLauncher = registerForActivityResult(object : ActivityResultContract<String, Int>() {
    override fun createIntent(context: Context, input: String): Intent {
        val customTabsIntentBuilder = CustomTabsIntent.Builder()
            .setInitialActivityHeightPx(activityHeight, if (changeHeightAdjustable) CustomTabsIntent.ACTIVITY_HEIGHT_ADJUSTABLE else CustomTabsIntent.ACTIVITY_HEIGHT_FIXED)
            .setToolbarCornerRadiusDp(topRadius)
        return customTabsIntentBuilder.build().intent.apply {
            data = input.toUri()
        }
    }

    override fun parseResult(resultCode: Int, intent: Intent?): Int {
        return resultCode
    }
}) {
    // 页面返回回调
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding: LayoutCustomTabActivityBinding = DataBindingUtil.setContentView(this, R.layout.layout_custom_tab_activity)
    activityHeight = (resources.displayMetrics.heightPixels * 0.8).toInt()
    binding.btnChangeHeightFixed.setOnClickListener {
        checkCustomTabAvailable()
        changeHeightAdjustable = false
        customTabLauncher.launch(url)
    }
    binding.btnChangeHeightAdjustable.setOnClickListener {
        checkCustomTabAvailable()
        changeHeightAdjustable = true
        customTabLauncher.launch(url)
    }
}

private fun checkCustomTabAvailable() {
    if (!CustomTabHelper.checkCustomTabAvailable(this)) {
        startActivity(Intent(this, WebViewActivity::class.java).apply { putExtra(PARAMS_LINK_URL, url) })
        return
    }
}

} ```

效果如图:

device-2023-02-19-09 -middle-original.gif

调整地址栏

可以对Custom Tab的地址栏进行一些配置,代码如下:

``` // 辅助类 object CustomTabHelper {

fun openCustomTabWithCustomUI(context: Context, url: String, @ColorInt color: Int = 0, showTitle: Boolean = false, autoHide: Boolean = false, backIconPosition: Int = CustomTabsIntent.CLOSE_BUTTON_POSITION_START) {
    val customTabsIntentBuilder = CustomTabsIntent.Builder(customTabsClient?.newSession(null))
    if (color != 0) {
        // 设置背景颜色
        customTabsIntentBuilder.setDefaultColorSchemeParams(CustomTabColorSchemeParams.Builder()
            .setToolbarColor(color)
            .build())
    }
    // 是否显示标题
    customTabsIntentBuilder.setShowTitle(showTitle)
    // 地址栏是否自动隐藏 ,此配置仅在Custom Tab全屏显示时生效
    customTabsIntentBuilder.setUrlBarHidingEnabled(autoHide)
    // 调整关闭按钮的位置
    // CustomTabsIntent.CLOSE_BUTTON_POSITION_START 在地址栏的左侧
    // CustomTabsIntent.CLOSE_BUTTON_POSITION_END 在地址栏的右侧
    customTabsIntentBuilder.setCloseButtonPosition(backIconPosition)
    customTabsIntentBuilder.build().launchUrl(context, url.toUri())
}

}

// 示例Activity class CustomTabExampleActivity : BaseGestureDetectorActivity() {

private val url = "http://go.minigame.vip/"

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding: LayoutCustomTabActivityBinding = DataBindingUtil.setContentView(this, R.layout.layout_custom_tab_activity)
    binding.btnCustomUi.setOnClickListener {
        checkCustomTabAvailable()
        CustomTabHelper.openCustomTabWithCustomUI(this, url, ContextCompat.getColor(this, R.color.color_FF2600), showTitle = true, autoHide = true, CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
    }
}

} ```

效果如图:

device-2023-02-19-09 -middle-original.gif

调整显示隐藏动画

当Custom Tab为全屏显示时,可以调整显示与隐藏时的动画,代码如下:

``` // slide_in_right

// slide_out_left

// 辅助类 object CustomTabHelper { fun openCustomTabWithCustomAnimations(context: Context, url: String) { val customTabsIntentBuilder = CustomTabsIntent.Builder(customTabsClient?.newSession(null)) // 自定义动画 customTabsIntentBuilder.setStartAnimations(context, R.anim.slide_in_right, R.anim.slide_out_left) // 系统动画 customTabsIntentBuilder.setExitAnimations(context, android.R.anim.slide_in_left, android.R.anim.slide_out_right) customTabsIntentBuilder.build().launchUrl(context, url.toUri()) } }

// 示例Activity class CustomTabExampleActivity : BaseGestureDetectorActivity() {

private val url = "http://go.minigame.vip/"

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding: LayoutCustomTabActivityBinding = DataBindingUtil.setContentView(this, R.layout.layout_custom_tab_activity)
    binding.btnCustomAnimations.setOnClickListener {
        checkCustomTabAvailable()
        CustomTabHelper.openCustomTabWithCustomAnimations(this, url)
    }
}

} ```

效果如图:

device-2023-02-19-09 -original-original.gif

示例Demo

在示例Demo中添加了相关的演示代码。

ExampleDemo github

ExampleDemo gitee