Bố cục trong bộ công cụ giao diện người dùng Leanback

Tạo dựng ứng dụng hiệu quả hơn bằng Compose
Tạo giao diện người dùng đẹp mắt với mã tối thiểu bằng Jetpack Compose cho hệ điều hành Android TV.
Soạn thư cho TV →

Màn hình TV thường được xem ở khoảng cách khoảng 3 mét và mặc dù lớn hơn nhiều so với hầu hết các màn hình thiết bị chạy Android khác, nhưng màn hình TV không cung cấp mức độ chi tiết và màu sắc như màn hình thiết bị nhỏ hơn. Những yếu tố này đòi hỏi bạn phải tạo bố cục ứng dụng phù hợp với thiết bị TV để mang lại trải nghiệm hữu ích và thú vị cho người dùng.

Sử dụng giao diện bố cục cho TV

Giao diện Android có thể cung cấp cơ sở cho bố cục trong các ứng dụng TV của bạn. Sử dụng một giao diện để sửa đổi cách hiển thị các hoạt động của ứng dụng được thiết kế để chạy trên thiết bị TV. Phần này giải thích những giao diện cần sử dụng.

Giao diện Leanback

Thư viện androidx.leanback không dùng nữa bao gồm Theme.Leanback, một giao diện cho các hoạt động trên TV, cung cấp kiểu trực quan nhất quán cho các ứng dụng của bộ công cụ giao diện người dùng Leanback. Sử dụng giao diện này cho mọi ứng dụng TV được tạo bằng các lớp AndroidX Leanback. Mẫu mã sau đây cho biết cách áp dụng giao diện này cho một hoạt động: 

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

Giao diện NoTitleBar

Thanh tiêu đề là một phần tử giao diện người dùng tiêu chuẩn cho các ứng dụng Android trên điện thoại và máy tính bảng, nhưng không phù hợp với các ứng dụng truyền hình. Nếu bạn không sử dụng các lớp AndroidX Leanback, hãy áp dụng giao diện NoTitleBar cho các hoạt động trên TV để ngăn hiển thị thanh tiêu đề. Ví dụ về mã sau đây trong tệp kê khai ứng dụng truyền hình minh hoạ cách áp dụng giao diện này để xoá việc hiển thị thanh tiêu đề: 

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

Giao diện AppCompat

Trong các ứng dụng di động Android, bạn thường dùng AppCompatActivity cùng với một trong các giao diện Theme.AppCompat. Sự kết hợp này cho phép bạn sử dụng các tính năng như tô màu đối tượng có thể vẽ mà không cần lo lắng về phiên bản Android đang chạy trên thiết bị. Nếu bạn đang phát triển một ứng dụng chỉ chạy trên Android TV, thì đừng dùng AppCompatActivity, vì các tính năng mà thành phần này cho phép đã có trên Android TV hoặc không liên quan.

Nếu đang tạo một ứng dụng có cơ sở mã dùng chung giữa thiết bị di động Android và Android TV, bạn có thể gặp phải một số thách thức do việc tạo giao diện. AppCompatActivity và nhiều tiện ích AppCompat yêu cầu bạn sử dụng Theme.AppCompat, trong khi các mảnh của bộ công cụ giao diện người dùng Leanback yêu cầu bạn sử dụng FragmentActivity và Theme.Leanback.

Nếu bạn cần sử dụng cùng một hoạt động cơ sở cho thiết bị di động Android và Android TV, hoặc nếu bạn muốn sử dụng các khung hiển thị tuỳ chỉnh dựa trên các tiện ích AppCompat như AppCompatImageView, hãy sử dụng các giao diện Theme.AppCompat.Leanback. Các giao diện này cung cấp cho bạn tất cả các giao diện từ AppCompat và cả các giá trị dành riêng cho Leanback.

Bạn có thể tuỳ chỉnh giao diện Theme.AppCompat.Leanback theo cách tương tự như cách bạn tuỳ chỉnh mọi giao diện khác. Ví dụ: nếu bạn muốn thay đổi các giá trị dành riêng cho OnboardingSupportFragment của bộ công cụ Leanback UI, hãy làm theo cách tương tự như sau: 

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

Xây dựng bố cục cơ bản cho TV

Bố cục cho thiết bị TV phải tuân theo một số nguyên tắc cơ bản để đảm bảo rằng bố cục đó có thể sử dụng được và hiệu quả trên màn hình lớn. Hãy làm theo các mẹo sau để tạo bố cục được tối ưu hoá cho màn hình TV:

  • Tạo bố cục theo hướng ngang. Màn hình TV luôn hiển thị ở chế độ ngang.
  • Đặt các nút điều khiển thao tác trên màn hình ở bên trái hoặc bên phải màn hình và tiết kiệm không gian dọc cho nội dung.
  • Tạo giao diện người dùng được chia thành các phần bằng cách sử dụng mảnh. Sử dụng các nhóm khung hiển thị như GridView thay vì ListView để tận dụng không gian màn hình ngang một cách hiệu quả hơn.
  • Sử dụng các nhóm thành phần hiển thị như RelativeLayout hoặc LinearLayout để sắp xếp các thành phần hiển thị. Phương pháp này cho phép hệ thống điều chỉnh vị trí của các khung hiển thị theo kích thước, căn chỉnh, tỷ lệ khung hình và mật độ pixel của màn hình TV.
  • Thêm khoảng lề vừa đủ giữa các thành phần điều khiển bố cục để tránh giao diện người dùng lộn xộn.

Quét quá

Bố cục cho TV có một số yêu cầu riêng do sự phát triển của các tiêu chuẩn TV nhằm mang đến cho người xem hình ảnh toàn màn hình. Vì lý do này, các thiết bị TV có thể cắt cạnh ngoài của bố cục ứng dụng để đảm bảo toàn bộ màn hình được lấp đầy. Hành vi này thường được gọi là overscan (quét dư).

Đặt các phần tử trên màn hình mà người dùng phải nhìn thấy mọi lúc trong vùng an toàn khi quét quá mức. Việc thêm một lề 5% gồm 48 dp ở các cạnh bên trái và bên phải, cùng 27 dp ở các cạnh trên cùng và dưới cùng vào bố cục sẽ giúp đảm bảo rằng các phần tử trên màn hình trong bố cục nằm trong vùng an toàn khi quét quá mức.

Đừng điều chỉnh các phần tử màn hình nền mà người dùng không tương tác trực tiếp và đừng cắt các phần tử vào vùng an toàn khi quét quá mức. Phương pháp này giúp đảm bảo rằng các phần tử màn hình nền trông chính xác trên tất cả các màn hình.

Ví dụ sau đây cho thấy một bố cục gốc có thể chứa các phần tử nền và một bố cục con lồng nhau có lề 5% và có thể chứa các phần tử trong vùng an toàn khi quét quá mức: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

Thận trọng: Đừng áp dụng lề quét quá mức cho bố cục nếu bạn đang sử dụng các lớp AndroidX Leanback, chẳng hạn như BrowseSupportFragment hoặc các tiện ích liên quan, vì những bố cục đó đã kết hợp lề an toàn khi quét quá mức.

Tạo văn bản và chế độ điều khiển hữu ích

Hãy làm theo những mẹo sau để giúp người dùng dễ dàng nhìn thấy văn bản và các chế độ điều khiển trong ứng dụng truyền hình từ xa:

  • Chia văn bản thành các đoạn nhỏ để người dùng có thể quét nhanh.
  • Sử dụng văn bản sáng trên nền tối. Kiểu này dễ đọc hơn trên TV.
  • Tránh dùng phông chữ có nét mảnh hoặc phông chữ có cả nét rất hẹp và rất rộng. Sử dụng phông chữ sans-serif đơn giản và tính năng khử răng cưa để tăng khả năng đọc.
  • Sử dụng cỡ chữ tiêu chuẩn của Android: 
    <TextView
      android:id="@+id/atext"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceMedium"/>
  • Hãy làm cho tất cả các tiện ích xem của bạn đủ lớn để người ngồi cách màn hình 10 feet (khoảng 3 mét) có thể nhìn thấy rõ. Cách tốt nhất để thực hiện việc này là sử dụng kích thước tương đối của bố cục thay vì kích thước tuyệt đối, đồng thời sử dụng đơn vị pixel không phụ thuộc vào mật độ (dp) thay vì đơn vị pixel tuyệt đối. Ví dụ: để đặt chiều rộng của một tiện ích, hãy sử dụng wrap_content thay vì phép đo bằng pixel và để đặt lề cho một tiện ích, hãy sử dụng giá trị dp thay vì giá trị px.

Để biết thêm thông tin về pixel không phụ thuộc vào mật độ và cách tạo bố cục để xử lý kích thước màn hình lớn hơn, hãy xem bài viết Tổng quan về khả năng tương thích với màn hình.

Quản lý tài nguyên bố cục cho TV

Giống như mọi thiết bị Android khác, TV có nhiều kích thước màn hình và hỗ trợ nhiều độ phân giải, bao gồm nhưng không giới hạn ở 720p, 1080p và 4K. Đảm bảo ứng dụng của bạn hỗ trợ nhiều kích thước màn hình.

Các kích thước và độ phân giải màn hình khác nhau sẽ có mật độ pixel khác nhau. Để duy trì giao diện người dùng trên các kích thước màn hình, độ phân giải và mật độ pixel, hãy xác định các phép đo giao diện người dùng bằng pixel không phụ thuộc vào mật độ (dp) thay vì pixel. Mật độ điểm ảnh màn hình cho nhiều độ phân giải của bảng điều khiển TV được trình bày bên dưới.

Độ phân giải của bảng điều khiển Mật độ pixel màn hình
720p tvdpi
1080 xhdpi
4K xxxhdpi
Hãy xem bài viết Hỗ trợ nhiều mật độ pixel để biết thêm thông tin.

Để biết thêm thông tin về cách tối ưu hoá bố cục và tài nguyên cho màn hình lớn, hãy xem bài viết Tổng quan về khả năng tương thích với màn hình.

Các mẫu bố cục cần tránh

Có một số phương pháp xây dựng bố cục không hoạt động hiệu quả trên các thiết bị TV. Sau đây là một số phương pháp về giao diện người dùng cần tránh khi phát triển bố cục cho TV.

  • Sử dụng lại bố cục của điện thoại hoặc máy tính bảng: không sử dụng lại bố cục của ứng dụng điện thoại hoặc máy tính bảng mà không sửa đổi. Bố cục được tạo cho các hệ số hình dạng thiết bị Android khác không phù hợp với thiết bị TV và phải được đơn giản hoá để hoạt động trên TV.
  • Sử dụng ActionBar: mặc dù bạn nên dùng thanh thao tác trên điện thoại và máy tính bảng, nhưng thanh thao tác không phù hợp với giao diện TV. Bạn không nên dùng trình đơn tuỳ chọn trên thanh thao tác hoặc bất kỳ trình đơn kéo xuống nào cho các ứng dụng truyền hình do khó điều hướng trình đơn như vậy bằng điều khiển từ xa.
  • Sử dụng ViewPager: thao tác trượt giữa các màn hình có thể hoạt động hiệu quả trên điện thoại hoặc máy tính bảng, nhưng đừng thử thao tác này trên TV!

Để biết thêm thông tin về cách thiết kế bố cục phù hợp với TV, hãy xem hướng dẫn thiết kế cho TV.

Xử lý bitmap lớn

Giống như các thiết bị Android khác, thiết bị TV có bộ nhớ hạn chế. Nếu bạn tạo bố cục ứng dụng bằng hình ảnh có độ phân giải rất cao hoặc sử dụng nhiều hình ảnh có độ phân giải cao trong quá trình hoạt động của ứng dụng, thì ứng dụng có thể nhanh chóng vượt quá giới hạn bộ nhớ và gây ra lỗi hết bộ nhớ. Trong hầu hết các trường hợp, bạn nên sử dụng thư viện Glide để tìm nạp, giải mã và hiển thị bitmap trong ứng dụng của mình. Để biết thêm thông tin về cách đạt được hiệu suất tốt nhất khi làm việc với bitmap, hãy tham khảo các phương pháp hay nhất về đồ hoạ trên Android nói chung của chúng tôi.

Cung cấp quảng cáo hiệu quả

Đối với môi trường phòng khách, bạn nên sử dụng các giải pháp quảng cáo dạng video toàn màn hình và có thể đóng trong vòng 30 giây. Người dùng phải truy cập được vào chức năng quảng cáo trên Android TV (chẳng hạn như nút đóng và lượt nhấp qua) bằng D-pad thay vì thao tác chạm.

Android TV không cung cấp trình duyệt web. Quảng cáo của bạn không được tìm cách chạy một trình duyệt web hoặc chuyển hướng đến nội dung trên Cửa hàng Google Play chưa được phê duyệt cho thiết bị Android TV.

Lưu ý: Bạn có thể sử dụng lớp WebView để đăng nhập vào các dịch vụ mạng xã hội.

Tài nguyên khác

Thiết kế cho TV

Trước
Các phương pháp hay nhất để thúc đẩy mức độ tương tác trên Google TV
Tiếp
Di chuyển sang Compose cho TV