Chrome 自定义选项卡更改默认关闭按钮不起作用

Question

我正在尝试更改自定义 chrome 选项卡的操作栏上的默认关闭按钮。我尝试使用setCloseButtonIcon() 进行设置，但是仍然显示默认关闭按钮。我想将关闭更改为箭头。

我的代码如下：

public void openHomePage() {
    final CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
    builder.setToolbarColor(ContextCompat.getColor(getActivity(), R.color.primary));
    final Bitmap backButton = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_48dp);
    builder.setCloseButtonIcon(backButton);

    builder.setShowTitle(true);
    final CustomTabsIntent customTabsIntent = builder.build();

    customTabsIntent.launchUrl(getActivity(), Uri.parse(mTvHomepage.getText().toString()));
}

Answer 1

我有一个观察。上个月，在通过SO 搜索各种 chrome 自定义选项卡问题时，我发现这个 answer 建议使用 24dp 大小的图标，还发现这个 question 说它可以与 PNG 一起正常工作。

我使用here. 的后退箭头图标检查了您的代码

当我使用 "ic_arrow_back_black_48dp" 时，它并没有将默认关闭按钮更改为箭头（见左图）。

final Bitmap backButton = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_48dp);

但是当我使用 "ic_arrow_back_black_24dp" 时，它完美地将默认关闭按钮更改为箭头（见右图）。

final Bitmap backButton = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_24dp);

由于它对我来说非常有效，您还应该尝试使用 here 中的 "24dp" 大小的后退箭头图标，而不是 "48dp" 大小的后退箭头图标.

屏幕截图：[设备：ASUS_Z00UD；操作系统：6.0.1]

Answer 2

假设您使用的是 Google 库而不是相关库，则图标大小应为 24dp，如 documented here。

这可以通过 BitmapFactory Options 来实现：

BitmapFactory.Options options = new BitmapFactory.Options();
options.outWidth = 24;
options.outHeight = 24;
options.inScaled = true; //already default, just for illustration - ie scale to screen density (dp)
... = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_black_48dp, opts);

Answer 3

你可以直接从Drawable获取BitmapDrawable，但不能从VectorDrawable获取，因为setCloseButtonIcon需要@NonNull Bitmap icon

您也可以按如下方式使用 svg。从这里下载 svg ic_arrow_back_black_24px

以下方法一目了然：

private static Bitmap getBitmapFromDrawable(Context context, int drawableId) {
Drawable drawable = ContextCompat.getDrawable(context, drawableId);
if (drawable instanceof BitmapDrawable) {
  return ((BitmapDrawable) drawable).getBitmap();
} else if (drawable instanceof VectorDrawable) {
  return getBitmapFromVectorDrawable((VectorDrawable) drawable);
} else {
  throw new IllegalArgumentException("Unable to convert to bitmap");
}
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private static Bitmap getBitmapFromVectorDrawable(VectorDrawable vectorDrawable) {
Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
    vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
vectorDrawable.draw(canvas);
return bitmap;
}

您可以将以上内容用作：

builder.setCloseButtonIcon(getBitmapFromDrawable(this, R.drawable.ic_arrow_back_black_24px)); 

Ref from SO

Answer 4

为什么不添加图像资源并存储在 mipmap 中，那么使用 android studio 中内置的默认图标会更容易 Assest Studio

上传后您可以使用 ImageView 中的 src 资源轻松访问 xml 文件中 mipmap 中的图标和图像

android:src="@mipmap/ic_launcher"

Answer 5

要在 Kotlin（使用 Android KTX）和 any 24dp 可绘制资源中完成这项工作：

AppCompatResources.getDrawable(activity, R.drawable.ic_arrow_back_white_24dp)?.let {
    builder.setCloseButtonIcon(it.toBitmap())
}

如果你需要做一些着色：

AppCompatResources.getDrawable(activity, R.drawable.ic_arrow_back_black_24dp)?.mutate()?.let {
    DrawableCompat.setTint(it, Color.WHITE)
    builder.setCloseButtonIcon(it.toBitmap())
}

如果需要调整drawable的大小，则将新的宽度/高度传递给Drawable.toBitmap()函数。

如果您不使用 Kotlin，那么您可以使用相当于 Drawable.toBitmap() 代码：

fun Drawable.toBitmap(
    @Px width: Int = intrinsicWidth,
    @Px height: Int = intrinsicHeight,
    config: Config? = null
): Bitmap {
    if (this is BitmapDrawable) {
        if (config == null || bitmap.config == config) {
            // Fast-path to return original. Bitmap.createScaledBitmap will do this check, but it
            // involves allocation and two jumps into native code so we perform the check ourselves.
            if (width == intrinsicWidth && height == intrinsicHeight) {
                return bitmap
            }
            return Bitmap.createScaledBitmap(bitmap, width, height, true)
        }
    }

    val (oldLeft, oldTop, oldRight, oldBottom) = bounds

    val bitmap = Bitmap.createBitmap(width, height, config ?: Config.ARGB_8888)
    setBounds(0, 0, width, height)
    draw(Canvas(bitmap))

    setBounds(oldLeft, oldTop, oldRight, oldBottom)
    return bitmap
}

更多信息请看this答案。

Answer 6

我也面临同样的问题

解决方案：-

1) 以png 格式获取image(back arrow)。
2) 图片尺寸保持在24dp以下。

Answer 7

虽然这个问题已经得到解答，但由于我也遇到了这个问题，以上建议都没有解决我的问题，我想分享我解决问题的方法。希望对其他人有所帮助。

Ref

  fun Context.openCustomTab(
    url: String,
    @ColorRes toolbarColor: Int,
    @ColorRes iconColor: Int,
    @DrawableRes drawable: Int
) {
    CustomTabsIntent.Builder().let { ctb ->
        AppCompatResources.getDrawable(this, drawable)?.let {
            DrawableCompat.setTint(it, resources.getColor(iconColor))
            ctb.setCloseButtonIcon(it.toBitmap())
        }
        ctb.setDefaultColorSchemeParams(
            CustomTabColorSchemeParams.Builder()
                .setToolbarColor(
                    ContextCompat.getColor(
                        this,
                        toolbarColor,
                    )
                ).build()
        )

        ctb.setShowTitle(true)
    }.build().launchUrl(this, Uri.parse(url))
}

Answer 8

我不得不去这个网站：https://material.io/tools/icons/?icon=keyboard_backspace&style=baseline

我得到了 PNG，然后以这种方式使用它。我知道我参加聚会迟到了，但这是为需要的人准备的。