新增自訂互動元素

Sebastian Benz

本指南說明如何為「自訂分頁」新增自訂互動功能。

啟用預設分享動作

如果未提供自訂分享動作，建議您在溢位選單中啟用瀏覽器的預設分享動作，方便使用者分享所看到內容的連結：

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

新增自訂動作按鈕

如果是重要動作，您可以使用「自訂分頁」工具列整合自訂動作按鈕，該按鈕可以加上文字標籤或自訂圖示。圖示的高度應為 24dp，寬度應為 24 至 48 dp。

舉例來說，您可以在工具列新增自訂分享動作。方法是建立 BroadcastReceiver，並在使用者點擊「Custom」分頁中的共用動作時呼叫。

在 AndroidManifest.xml 檔案中註冊 BroadCastReceiver：

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

然後新增 ShareBroadcastReceiver 類別。在 onReceive() 方法中，從意圖擷取目前顯示的網址，並觸發傳送意圖。

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);
        shareIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(shareIntent);
    }
}

現在，請為 ShareBroadcast 建立 PendingIntent，並透過 setActionButton() 註冊。傳遞待處理意圖、圖示和說明。

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();

新增自訂菜單品項

自訂分頁最多可提供瀏覽器提供的五種預設動作：「轉寄」、「網頁資訊」、「重新整理」、「在網頁中尋找」和「在瀏覽器中開啟」。此外，您最多可以再新增七個。這些選單項目會插入圖示列和瀏覽器提供的項目之間。(請參閱下圖)。實際數字取決於基礎瀏覽器實作方式。(舉例來說，Chrome 117 版將選單項目數量從 5 個增加為七項)。因此，最佳做法是先新增最重要的項目。

您可以透過右上角的三點圖示選單存取自訂動作：

如要新增菜單項目，請使用標題和 PendingIntent 呼叫 CustomTabsIntent.Builder.addMenuItem()。使用者輕觸選單項目時，瀏覽器就會觸發 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();

接下來：瞭解如何在自訂分頁中加快網頁內容載入速度。