Thêm tương tác tuỳ chỉnh

Sebastian Benz

Hướng dẫn này giải thích cách thêm tính năng tương tác tuỳ chỉnh vào Thẻ tuỳ chỉnh.

Bật hành động chia sẻ mặc định

Nếu không cung cấp thao tác chia sẻ tuỳ chỉnh, bạn nên bật thao tác chia sẻ mặc định của trình duyệt trong trình đơn mục bổ sung để giúp người dùng dễ dàng chia sẻ đường liên kết đến nội dung họ đang xem:

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

Thêm nút hành động tuỳ chỉnh

Đối với các thao tác quan trọng, thanh công cụ Thẻ tuỳ chỉnh cho phép bạn tích hợp nút hành động tuỳ chỉnh. Nút này có thể có nhãn văn bản hoặc biểu tượng tuỳ chỉnh. Biểu tượng phải có chiều cao 24 dp và chiều rộng 24-48 dp.

Ví dụ: bạn có thể thêm một thao tác chia sẻ tuỳ chỉnh vào thanh công cụ. Để thực hiện việc này, hãy tạo một BroadcastReceiver sẽ được gọi khi người dùng nhấp vào hành động chia sẻ trong Thẻ tuỳ chỉnh.

Đăng ký BroadCastReceiver trong tệp AndroidManifest.xml:

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

Sau đó, hãy thêm một lớp mới là ShareBroadcastReceiver. Trong phương thức onReceive(), hãy trích xuất URL đang hiển thị từ ý định và kích hoạt một ý định gửi.

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

Bây giờ, hãy tạo PendingIntent cho ShareBroadcast và đăng ký qua setActionButton(). Truyền ý định đang chờ xử lý cùng với biểu tượng và nội dung mô tả.

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

Thêm mục tuỳ chỉnh trên trình đơn

Thẻ tuỳ chỉnh có tối đa 5 thao tác mặc định mà trình duyệt cung cấp: "Chuyển tiếp", "Thông tin trang", "Làm mới", "Tìm trong trang" và "Mở trong trình duyệt". Ngoài ra, bạn có thể thêm tối đa 7 thành phần. Các mục này trong trình đơn sẽ được chèn vào giữa hàng biểu tượng và các mục do trình duyệt cung cấp. (Xem hình ảnh dưới đây.) Con số thực tế phụ thuộc vào cách triển khai cơ bản của trình duyệt. (Ví dụ: với phiên bản 117, Chrome đã tăng số lượng mục trong trình đơn từ 5 lên 7.) Vì vậy, tốt nhất là bạn nên thêm các mục quan trọng nhất trước.

Bạn có thể truy cập vào các thao tác tuỳ chỉnh thông qua trình đơn có biểu tượng ba dấu chấm ở góc trên cùng bên phải:

Để thêm một mục trong trình đơn, hãy gọi CustomTabsIntent.Builder.addMenuItem() kèm theo tiêu đề và PendingIntent. Khi người dùng nhấn vào một mục trong trình đơn, trình duyệt sẽ kích hoạt 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();

Tuỳ chỉnh nút đóng

Để Thẻ tuỳ chỉnh phù hợp hơn với luồng ứng dụng của bạn, hãy tuỳ chỉnh nút đóng. Nếu bạn muốn người dùng cảm thấy Thẻ tuỳ chỉnh là một hộp thoại phương thức, hãy sử dụng nút “X” mặc định. Nếu bạn muốn người dùng cảm thấy Thẻ tuỳ chỉnh là một phần trong quy trình của ứng dụng, hãy sử dụng mũi tên quay lại.

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

Thêm thanh công cụ ở dưới cùng

Thanh công cụ ở dưới cùng là một cách rất linh hoạt để thêm nhiều chức năng khác vào Thẻ tuỳ chỉnh.

Bằng cách truyền một đối tượng RemoteViews đến CustomTabIntent.Builder.setSecondaryToolbarViews(), thanh công cụ dưới cùng có thể được tùy chỉnh hoàn toàn và cập nhật một cách linh động.

Trước tiên, hãy khai báo bố cục của thanh công cụ bằng cách tạo tệp bố cục mới, 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>

Bước tiếp theo là đăng ký BroadcastReceiver (giúp xử lý các hoạt động tương tác với thanh công cụ) trong tệp AndroidManifest.xml:

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

Sau đó, hãy triển khai BroadcastReceiver. Phương thức này sẽ xử lý mọi lượt tương tác với thanh công cụ ở dưới cùng:

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
        }
    }
}

Cuối cùng, hãy đăng ký thanh công cụ:

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

Nút dấu trang và tải xuống

Dấu trang và các nút tải xuống trong trình đơn có biểu tượng ba dấu chấm được bật theo mặc định. Để tắt các tính năng đó, hãy sử dụng mã sau trong CustomTabsIntent.Builder:

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

Tiếp theo: Tìm hiểu cách tăng tốc độ tải nội dung trên web trong Thẻ tuỳ chỉnh.