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 của thanh công cụ

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 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ụ hiện có màu nền và màu nền trước tuỳ chỉnh.

Định cấu hình ảnh động tuỳ chỉnh để xuất hiện và biến mất

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

Tuỳ chỉnh khác: tiêu đề, tự động ẩn AppBar 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 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 tiêu đề tài liệu thay vì URL 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 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.