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 hướng dẫn về Thẻ tuỳ chỉnh này, bạn sẽ tìm hiểu cách thay đổi giao diện và hoạt động của một Thẻ tuỳ chỉnh để phù hợp với ứng dụng của mình.

Đặt màu của thanh công cụ

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 đó 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ụ giờ đây có màu nền tuỳ chỉnh và màu nền trước.

Đị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à thoát) 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 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();

Các lựa chọn tuỳ chỉnh khác: tiêu đề, thanh ứng dụng tự động ẩn và biểu tượng đóng tuỳ chỉnh

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

• Ẩn thanh URL khi di chuyển để người dùng có thêm không gian để khám phá nội dung trên web bằng setUrlBarHidingEnabled()(true).
• Hiện 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ụ: hiển thị mũi tên quay lại thay vì biểu tượng X mặc định): setCloseButtonIcon()(myCustomCloseIcon).

Đây là tất cả các tính năng không bắt buộc, nhưng có thể cải thiện trải nghiệm Thẻ tuỳ 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();

Đặt đườ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 khởi 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.