คำแนะนำนี้จะอธิบายวิธีเพิ่มการโต้ตอบที่กำหนดเองลงในแท็บที่กำหนดเอง
เปิดใช้การแชร์เริ่มต้น
หากคุณไม่ได้ระบุการดำเนินการแชร์ที่กำหนดเอง คุณควรเปิดใช้การดำเนินการแชร์เริ่มต้นของเบราว์เซอร์ในเมนูรายการเพิ่มเติม เพื่อให้ผู้ใช้สามารถแชร์ลิงก์ไปยังเนื้อหาที่ตนเห็นได้ง่ายขึ้น ดังนี้
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
เพิ่มปุ่มการทำงานที่กำหนดเอง
สำหรับการดำเนินการที่สำคัญ แถบเครื่องมือแท็บที่กำหนดเองจะให้คุณผสานรวมปุ่มการทำงานที่กำหนดเอง ซึ่งอาจจะมีป้ายข้อความหรือไอคอนที่กำหนดเองก็ได้ ไอคอนควรมีความสูง 24dp และกว้าง 24-48 dp
เช่น คุณจะเพิ่มการแชร์ที่กำหนดเองในแถบเครื่องมือได้ โดยสร้าง BroadcastReceiver ซึ่งจะเรียกใช้เมื่อผู้ใช้คลิกการแชร์ในแท็บที่กำหนดเอง
ลงทะเบียน BroadCastReceiver ในไฟล์ AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
จากนั้นเพิ่มชั้นเรียนใหม่ ShareBroadcastReceiver ในเมธอด onReceive() ให้ดึงข้อมูล URL ที่แสดงปัจจุบันจาก 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);
shareIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(shareIntent);
}
}
ตอนนี้ ให้สร้าง PendingIntent สำหรับ ShareBroadcast และลงทะเบียนผ่าน 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();
เพิ่มรายการในเมนูที่กำหนดเอง
แท็บที่กำหนดเองมีการทำงานเริ่มต้นอยู่ 5 อย่างที่เบราว์เซอร์มีให้ ได้แก่ "ส่งต่อ" "ข้อมูลหน้าเว็บ" "รีเฟรช" "ค้นหาในหน้าเว็บ" และ "เปิดในเบราว์เซอร์" นอกจากนี้ คุณยังเพิ่มข้อมูลได้สูงสุดอีก 7 รายการ ระบบจะแทรกรายการเมนูเหล่านี้ระหว่างแถวไอคอนกับรายการที่เบราว์เซอร์มีให้ (ดูภาพด้านล่าง) จำนวนจริงจะขึ้นอยู่กับการใช้งานเบราว์เซอร์ที่สำคัญ (ตัวอย่างเช่น Chrome เวอร์ชัน 117 เพิ่มจำนวนรายการในเมนูจาก 5 เป็น 7 รายการ) ดังนั้นจึงควรเพิ่มรายการที่สำคัญที่สุดก่อน
คุณเข้าถึงการดำเนินการที่กำหนดเองได้ผ่านทางเมนู 3 จุดที่มุมขวาบน ดังนี้
หากต้องการเพิ่มรายการในเมนู ให้โทรหา 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>
ขั้นตอนถัดไปคือการลงทะเบียน BroadcastReceiver ซึ่งจัดการการโต้ตอบกับแถบเครื่องมือในไฟล์ AndroidManifest.xml
<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();
บุ๊กมาร์กและปุ่มดาวน์โหลด
บุ๊กมาร์กและปุ่มดาวน์โหลดในเมนู 3 จุดจะเปิดใช้โดยค่าเริ่มต้น หากต้องการปิดใช้ ให้ใช้รหัสต่อไปนี้ใน CustomTabsIntent.Builder
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();