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

Sebastian Benz

Một ưu điểm của Thẻ tuỳ chỉnh là bạn có thể tích hợp liền mạch các thẻ này vào ứng dụng của mình. 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à hành vi 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 để nhất quán với giao diện của ứng dụng. Đoạn mã bên dưới thay đổi màu thanh công cụ mặc định 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 đặt 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ó màu nền và màu nền trước tuỳ chỉnh.

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

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

Tiếp theo, bạn có thể tạo trải nghiệm khởi chạy (và thoát) Thẻ tuỳ chỉnh trong ứng dụng của mình một cách 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 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ể làm thêm một vài việc để điều chỉnh giao diện người dùng của Thẻ tuỳ chỉnh cho phù hợp với 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 thông qua setShowTitle()(true).
• Tuỳ chỉnh nút đóng để phù hợp với luồng người dùng trong ứng dụng, 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).

Đây đều là những tính năng không bắt buộc, nhưng có thể cải thiện trải nghiệm của Thẻ tuỳ chỉnh trong ứng dụng.

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 tệp giới thiệu tuỳ chỉnh

Bạn có thể đặt ứng dụng làm trình giới thiệu khi chạy Thẻ 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 họ đế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 thao tác tuỳ chỉnh vào Thẻ tuỳ chỉnh.