Làm nhiều việc cùng lúc với các thẻ tuỳ chỉnh một phần

Sebastian Benz

Theo mặc định, Thẻ tuỳ chỉnh sẽ chạy dưới dạng một hoạt động ở chế độ toàn cửa sổ. Đang bắt đầu trong Chrome 107, bạn có thể sử dụng một phần Thẻ tuỳ chỉnh để chỉ định chiều cao khởi chạy khác trong chế độ dọc để người dùng có thể làm nhiều việc cùng lúc bằng cách tương tác với ứng dụng của bạn trong khi xem nội dung web. Người dùng có thể mở rộng Tab Tuỳ chỉnh ra toàn màn hình bằng cách kéo xử lý thanh công cụ và khôi phục chiều cao khởi chạy ban đầu bằng cách kéo xử lý.

Ảnh chụp màn hình về thẻ Một phần của bảng dưới cùng
Thẻ tuỳ chỉnh một phần trong bảng dưới cùng.

Đối với màn hình lớn hoặc thiết bị ở chế độ ngang, kể từ Chrome 120, bạn có thể chỉ định, chiều rộng khởi chạy tối đa để hiển thị một phần Tab tuỳ chỉnh ở một bên trang tính. Bằng cách đặt điểm ngắt, bạn có thể quyết định thời điểm khởi chạy một phần tuỳ chỉnh Thẻ ở dưới cùng hoặc bảng bên.

Ảnh chụp màn hình trang tính bên cạnh Thẻ một phần
Một phần thẻ tuỳ chỉnh trong một trang tính bên.

Điều kiện tiên quyết

Để có thể sử dụng một phần Thẻ tuỳ chỉnh, bạn cần:

Kết hợp cả hai cách tiếp cận nếu bạn muốn khởi động nhanh trong trường hợp dịch vụ chưa thiết lập kết nối.

Định cấu hình bảng dưới cùng

Để chuyển một Thẻ tuỳ chỉnh thành một Thẻ tuỳ chỉnh một phần, hãy xác định chiều cao khởi chạy ban đầu tính theo pixel bằng cách gọi lớp CustomTabBuilder setInitialActivityHeightPx() . Theo mặc định, một phần Thẻ tuỳ chỉnh có thể đổi kích thước, nhưng bạn có thể chuyển ACTIVITY\_HEIGHT\_FIXED để vô hiệu hoá hành vi này:

new CustomTabsBuilder().setInitialActivityHeightPx(
    400,
    ACTIVITY_HEIGHT_FIXED
);

Định cấu hình trang tính bên

Để định cấu hình hoạt động của trang tính bên, hãy xác định chiều rộng khởi chạy ban đầu tính bằng pixel theo đang gọi lớp CustomTabBuilder setInitialActivityWidthPx() .

Theo mặc định, một phần Thẻ tuỳ chỉnh có thể đổi kích thước, nhưng bạn có thể chuyển ACTIVITY\_HEIGHT\_FIXED để vô hiệu hoá hành vi này:

  CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(session)
        .setInitialActivityHeightPx(400)
        .setInitialActivityWidthPx(400);
        .setActivitySideSheetBreakpointDp(800);

Thẻ tùy chỉnh sẽ hoạt động như một trang tính bên nếu chiều rộng của màn hình lớn hơn giá trị điểm ngắt được đặt bởi setActivitySideSheetBreakpointDp(). Nếu chiều rộng của màn hình lớn hơn x, Thẻ tuỳ chỉnh sẽ hoạt động như một cạnh bên trang tính, nếu không trang tính này sẽ chỉ hoạt động như một bảng dưới cùng. Nếu không có điểm ngắt nào là đã chỉ định, hãy thiết lập phương thức triển khai trình duyệt sẽ được đặt làm giá trị mặc định 840dp. Nếu bạn đặt x thành <600dp thì quá trình triển khai của trình duyệt sẽ mặc định là 600dp.

Khởi chạy một phần Thẻ tuỳ chỉnh với phiên hiện có

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
   .setInitialActivityHeightPx(500)
    .setInitialActivityWidthPx(400);
    .setActivitySideSheetBreakpointDp(800);
   .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
   // ...
   .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

Chạy một phần Thẻ tuỳ chỉnh thông qua startActivityForResult

private ActivityResultLauncher<String> mCustomTabLauncher = registerForActivityResult(new ActivityResultContract<String, Integer>() {
    @Override
    public Integer parseResult(int statusCode, @Nullable Intent intent) {
        return statusCode;
    }

    @NonNull
    @Override
    public Intent createIntent(@NonNull Context context, String url) {
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(customTabsSession)
                .setInitialActivityHeightPx(500)
                .setInitialActivityWidthPx(400);
                .setActivitySideSheetBreakpointDp(800);
                .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
                .setToolbarCornerRadiusDp(10);
        Intent customTabsIntent = builder.build().intent;
        customTabsIntent.setData(Uri.parse(url));
        return customTabsIntent;
    }
}, new ActivityResultCallback<Integer>() {
    @Override
    public void onActivityResult(Integer statusCode) {
       // ...
    }
});

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    Button selectButton = findViewById(R.id.select_button);
    selectButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            mCustomTabLauncher.launch(customTabsIntent.intent);
        }
    });
}

Tiếp theo: tìm hiểu cách đo lường mức độ tương tác của người dùng trong Thẻ tuỳ chỉnh.