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ý.

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.

Một phần thẻ tuỳ chỉnh trong một trang tính bên.

Lưu ý quan trọng:

• Việc chỉ định chiều cao hoạt động ban đầu sẽ không có hiệu lực nếu trình duyệt mặc định không hỗ trợ một phần Thẻ tuỳ chỉnh. Trong trường hợp này, ý định bổ sung sẽ bị bỏ qua và Thẻ tuỳ chỉnh sẽ kéo dài chiều cao hiển thị đầy đủ.
• Các thuộc tính CustomTabColorScheme.navigationBarColor và CustomTabColorScheme.navigationBarDividerColor không hoạt động khi tạo ý định cho một phần Thẻ tuỳ chỉnh. Điều này là do các lớp này kế thừa bảng phối màu của ứng dụng lưu trữ đối với các thuộc tính giao diện người dùng ở trên. Bạn sẽ chịu trách nhiệm đảm bảo tính nhất quán về mặt hình ảnh cho các thuộc tính này trước khi khởi chạy Thẻ tuỳ chỉnh.

Đ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:

• bắt đầu một phiên trình duyệt mới bằng CustomTabsServiceConnection rồi chuyển đến ý định của Thẻ tuỳ chỉnh, hoặc

• bắt đầu hoạt động Thẻ tùy chỉnh bằng cách sử dụng startActivityForResult().

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

Lưu ý quan trọng: Chiều cao tối thiểu một phần của thẻ tuỳ chỉnh là 50% chiều cao màn hình. Nếu bạn đặt chiều cao màn hình thành một giá trị nhỏ hơn 50% chiều cao màn hình, thì Chrome sẽ tự động điều chỉnh Thẻ tuỳ chỉnh thành 50% chiều cao màn hình.

Đị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.