添加自定义互动

塞巴斯蒂安·本茨
Sebastian Benz

本指南介绍了如何向自定义标签页添加自定义互动功能。

启用默认分享操作

如果您未提供自定义分享操作,最好在溢出菜单中启用浏览器的默认分享操作,以便用户更轻松地分享指向其所见内容的链接:

    CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
    intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);

添加自定义操作按钮

对于重要操作,您可以使用“自定义标签页”工具栏集成自定义操作按钮,该按钮可以具有文本标签或自定义图标。图标高度应为 24dp,宽度应为 24-48dp。

包含自定义分享操作的自定义标签页

例如,您可以向工具栏中添加自定义分享操作。为此,请创建一个 BroadcastReceiver,当用户点击自定义标签页中的共享操作时,系统会调用此变量。

AndroidManifest.xml 文件中注册 BroadCastReceiver

<application …>
  <receiver android:name=".ShareBroadcastReceiver" />
</application>

然后添加一个新类 ShareBroadcastReceiver。在 onReceive() 方法中,从 intent 中提取当前显示的网址并触发发送 intent。

public class ShareBroadcastReceiver extends BroadcastReceiver {

    @Override
    public void onReceive(Context context, Intent intent) {
        String url = intent.getDataString();
        Intent sendIntent = new Intent();
        sendIntent.setAction(Intent.ACTION_SEND);
        sendIntent.putExtra(Intent.EXTRA_TEXT, url);
        sendIntent.setType("text/plain");
        Intent shareIntent = Intent.createChooser(sendIntent, null);
        context.startActivity(shareIntent);
    }
}

现在,为 ShareBroadcast 创建一个 PendingIntent,并通过 setActionButton() 注册它。将待处理 intent 与图标和说明一起传递。

String shareDescription = getString(R.string.label_action_share);
Bitmap shareIcon = BitmapFactory.decodeResource(getResources(),
       android.R.drawable.ic_menu_share);

// Create a PendingIntent to your BroadCastReceiver implementation
Intent actionIntent = new Intent(
       this.getApplicationContext(), ShareBroadcastReceiver.class);
PendingIntent pendingIntent =
       PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);          

//Set the pendingIntent as the action to be performed when the button is clicked.
CustomTabsIntent intentBuilder = new CustomTabsIntent.Builder()
    …
    .setActionButton(shareIcon, shareDescription, pendingIntent)
    .build();

添加自定义菜单项

自定义标签页包含浏览器提供的多达五个默认操作:“前进”“网页信息”“刷新”“在网页中查找”和“在浏览器中打开”。此外,您最多可以再添加七个。这些菜单项会插入图标行和浏览器提供的项之间。(请参见下图。)实际数量取决于浏览器的底层实现。(例如,在版本 117 中,Chrome 将菜单项数量从 5 个增加到了 7 个)。因此,最好先添加最重要的项。

您可以通过右上角的三点状菜单访问自定义操作:

包含五个自定义菜单项的自定义标签页。

如需添加菜单项,请调用 CustomTabsIntent.Builder.addMenuItem(),并传入标题和 PendingIntent。当用户点按菜单项时,浏览器会触发 PendingIntent

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        ...
        .addMenuItem("Menu item 1", pendingIntent)
        .addMenuItem("Menu item 2", pendingIntent)
        .addMenuItem("Menu item 3", pendingIntent)
        .addMenuItem("Menu item 4", pendingIntent)
        .addMenuItem("Menu item 5", pendingIntent)
        .build();

自定义关闭按钮

为使自定义标签页更好地适应应用的流程,请自定义“关闭”按钮。如果您希望用户感觉自定义标签页是模态对话框,请使用默认的 “X” 按钮。如果您希望用户感觉自定义标签页是应用流程的一部分,请使用返回箭头。

CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
    getResources(), R.drawable.ic_arrow_back));

添加底部工具栏

底部工具栏是一种非常灵活的方式,能够为自定义标签页添加更多功能。

带有底部工具栏的自定义标签

通过将 RemoteViews 对象传递给 CustomTabIntent.Builder.setSecondaryToolbarViews(),底部工具栏可以完全自定义并动态更新。

首先,通过创建新的布局文件 res/layout/custom_tab_toolbar.xml 来声明工具栏布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center">

    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ct_toolbar_next"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_margin="8dp"
        android:padding="8dp"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:text="Next" />

    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ct_toolbar_previous"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_margin="8dp"
        android:padding="8dp"
        android:text="Previous" />
</LinearLayout>

下一步是在 AndroidManifest.xml 文件中注册用于处理工具栏互动的 BroadcastReceiver

<application …>
  <receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>

然后,实现 BroadcastReceiver,它会处理与底部工具栏的所有交互:

public class BottomToolbarBroadcastReceiver extends BroadcastReceiver {

    @Override
    public void onReceive(Context context, Intent intent) {
        String url = intent.getDataString();
        int remoteViewId = intent.getIntExtra(EXTRA_REMOTEVIEWS_CLICKED_ID, -1);
        if (remoteViewId == R.id.ct_toolbar_previous) {
          // handle previous
        } else if (remoteViewId == R.id.ct_toolbar_next) {
          // handle next
        }
    }
}

最后,注册工具栏:

// Create the pending intent
Intent actionIntent = new Intent(
       this.getApplicationContext(), BottomToolbarBroadcastReceiver.class);

PendingIntent pendingIntent =
       PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);          

// Pass the toolbar layout to the RemoteViews instance
RemoteViews secondaryToolbarViews = new RemoteViews(getPackageName(), R.layout.custom_tab_toolbar);
// All toolbar buttons
int[] clickableIds = {R.id.ct_toolbar_next, R.id.ct_toolbar_previous};

// Register the bottom toolbar when creating a new custom tab intent
CustomTabsIntent intent = new CustomTabsIntent.Builder()
    .setSecondaryToolbarViews(secondaryToolbarViews, clickableIds, toolbarPendingIntent)
    .build();

书签和下载按钮

默认情况下,三点状菜单中的书签和下载按钮处于启用状态。如需停用这些功能,请在 CustomTabsIntent.Builder 中使用以下代码:

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
    .setBookmarksButtonEnabled(false)
    .setDownloadButtonEnabled(false)
    .build();

接下来:了解如何在自定义标签页中加快 Web 内容加载速度