本指南將說明如何為「自訂」分頁新增自訂互動功能。
啟用預設分享動作
如果您並未提供自訂分享動作,建議您在溢位選單中啟用瀏覽器的預設分享動作,方便使用者分享所見內容的連結:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
新增自訂動作按鈕
對於重要動作,您可以使用「自訂分頁」工具列整合自訂動作按鈕,該按鈕可包含文字標籤或自訂圖示。圖示的高度應為 24dp,寬度應為 24-48 dp。
例如,您可以在工具列中新增自訂共用動作。如要這麼做,請建立 BroadcastReceiver
,在使用者點選「自訂」分頁中的分享動作時呼叫。
在 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 個增加到 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();
下一步:瞭解如何在自訂分頁中加快載入網頁內容。