Tuỳ chỉnh giao diện người dùng

Sebastian Benz

Một lợi thế của Thẻ tuỳ chỉnh là có thể tích hợp liền mạch vào ứng dụng của bạn. Trong phần này của hướng dẫn về Thẻ tuỳ chỉnh, bạn sẽ tìm hiểu cách thay đổi giao diện và hoạt động của Thẻ tuỳ chỉnh cho phù hợp với ứng dụng.

Đặt màu cho thanh công cụ

Chế độ sáng

Chế độ tối

Trước tiên, hãy tuỳ chỉnh thanh địa chỉ của Thẻ tuỳ chỉnh cho nhất quán với giao diện của ứng dụng. Đoạn mã dưới đây thay đổi màu mặc định của thanh công cụ bằng cách gọi setDefaultColorSchemeParams(). Nếu ứng dụng của bạn cũng hỗ trợ bảng phối màu tối, hãy thiết lập bảng phối màu đó thông qua .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …).

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

Thanh công cụ hiện có các màu nền trước và nền tuỳ chỉnh.

Lưu ý quan trọng: Giao thức Thẻ tuỳ chỉnh không hỗ trợ việc thay đổi màu của thanh trạng thái.

Định cấu hình ảnh động nhập và thoát tuỳ chỉnh

Tiếp theo, bạn có thể khởi chạy (và rời khỏi) trải nghiệm Thẻ tuỳ chỉnh trong ứng dụng của mình liền mạch hơn, bằng cách xác định ảnh động bắt đầu và thoát tuỳ chỉnh bằng cách sử dụng setStartAnimation và setExitAnimation:

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

Tuỳ chỉnh khác: tiêu đề, tự động ẩn AppBar và biểu tượng đóng tuỳ chỉnh

Bạn có thể thực hiện thêm vài thao tác khác để điều chỉnh giao diện người dùng của một Thẻ tuỳ chỉnh theo nhu cầu của mình.

• Ẩn thanh URL khi cuộn để người dùng có thêm không gian khám phá nội dung web bằng setUrlBarHidingEnabled()(true).
• Hiển thị tiêu đề tài liệu thay vì URL qua setShowTitle()(true).
• Tuỳ chỉnh nút đóng cho phù hợp với luồng người dùng trong ứng dụng của bạn, ví dụ: bằng cách hiển thị mũi tên quay lại thay vì biểu tượng X mặc định): setCloseButtonIcon()(myCustomCloseIcon).

Tất cả đều là không bắt buộc, nhưng có thể cải thiện trải nghiệm Tab tùy chỉnh trong ứng dụng của bạn.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Thiết lập đường liên kết giới thiệu tuỳ chỉnh

Bạn có thể đặt ứng dụng của mình làm đường liên kết giới thiệu khi chạy Tab tuỳ chỉnh. Bằng cách này, bạn có thể cho các trang web biết lưu lượng truy cập của trang web đến từ đâu.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

Tiếp theo: tìm hiểu cách thêm hành động tuỳ chỉnh vào Thẻ tuỳ chỉnh.