การเพิ่มการโต้ตอบที่กำหนดเอง

Sebastian Benz

คู่มือนี้อธิบายวิธีเพิ่มการโต้ตอบที่กำหนดเองลงในแท็บที่กำหนดเอง

เปิดใช้การแชร์เริ่มต้น

หากไม่ระบุการดำเนินการแชร์แบบกำหนดเอง คุณควรเปิดใช้การแชร์เริ่มต้นของเบราว์เซอร์ในเมนูรายการเพิ่มเติม เพื่อให้ผู้ใช้แชร์ลิงก์ไปยังเนื้อหาที่กำลังดูได้ง่ายขึ้น

    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 จุดที่มุมขวาบน

แท็บที่กำหนดเองที่มีรายการเมนูที่กำหนดเอง 5 รายการ

หากต้องการเพิ่มรายการในเมนู ให้โทรหา 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();

ส่วนถัดไป: ดูวิธีเพิ่มความเร็วในการโหลดเนื้อหาเว็บในแท็บที่กำหนดเอง