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

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

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 dự định chạy trên thiết bị TV. Phần này giải thích các giao diện cần sử dụng.

Chủ đề Leanback

Thư viện Android Leanback có Theme.Leanback, một giao diện dành cho các hoạt động trên TV cung cấp kiểu hình ảnh nhất quán. 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ã mẫu 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">

Chủ đề NoTitleBar

Thanh tiêu đề là thành phần giao diện người dùng tiêu chuẩn cho ứ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 ứng dụng truyền hình. Nếu bạn không dùng các lớp AndroidX Leanback, hãy áp dụng giao diện NoTitleBar cho các hoạt động của TV để ngăn chặn việc hiển thị thanh tiêu đề. Ví dụ về mã sau đây trong một tệp kê khai ứng dụng truyền hình minh hoạ cách áp dụng giao diện này để xoá chế độ hiển thị của 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 ứng dụ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ư phủ màu có thể vẽ mà không phải lo lắng về việc 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 sử dụng AppCompatActivity vì các tính năng mà ứng dụng này kích hoạt đã có sẵn trên Android TV hoặc không phù hợp.

Nếu đang xây dựng 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ố khó khăn do việc tuỳ chỉnh 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 trong 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 khung hiển thị tuỳ chỉnh dựa trên các tiện ích AppCompat như AppCompatImageView, hãy dùng giao diện Theme.AppCompat.Leanback. Những giao diện này cung cấp cho bạn tất cả giao diện từ AppCompat cũng như cung cấp các giá trị dành riêng cho Leanback.

Bạn có thể tuỳ chỉnh giao diện Theme.AppCompat.Leanback tương tự như cách bạn thực hiện với 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ụ Giao diện người dùng Leanback, hãy thực hiện 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>

Tạo bố cục TV cơ bản

Bố cục cho thiết bị TV phải tuân theo một số nguyên tắc cơ bản để giúp đảm bảo sử dụng được và hiệu quả trên màn hình lớn. Làm theo những mẹo sau đây để xây dựng bố cục được tối ưu hoá cho màn hình TV:

• Xây dựng 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 theo chiều dọc cho nội dung.
• Tạo giao diện người dùng được chia thành nhiều phần bằng cách sử dụng mảnh. Sử dụng các nhóm thành phần hiển thị như GridView thay vì ListView để tận dụng không gian màn hình ngang.
• 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 thành phần 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 đủ lề giữa các thành phần điều khiển bố cục để tránh tình trạng 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 hiển thị hình ảnh toàn màn hình cho người xem. Vì lý do này, các thiết bị TV có thể cắt cạnh bên ngoài của bố cục ứng dụng để đảm bảo rằng toàn bộ màn hình được lấp đầy. Hành vi này thường được gọi là quét quá mức.

Đặt các phần tử màn hình phải luôn hiển thị cho người dùng trong vùng an toàn quét quá mức. Việc thêm khoảng cách lề 5% (48 dp) cho cạnh trái/phải và 27 dp ở cạnh trên và cạnh dưới vào một bố cục sẽ giúp đảm bảo rằng các thành phầ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 thành phần màn hình nền mà người dùng không tương tác trực tiếp cũng như không cắt các thành phần đó vào vùng an toàn quét quá mức. Phương pháp này giúp đảm bảo các thành phần màn hình nền hiển thị chính xác trên mọi 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ó biên lợi nhuận 5% và có thể chứa các phần tử trong vùng an toàn 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 có liên quan, vì những bố cục đó đã tích hợp lề an toàn quét quá mức.

Xây dựng các chế độ điều khiển và văn bản dễ sử dụng

Hãy làm theo các mẹo sau để khiến văn bản và các nút điều khiển trong ứng dụng TV dễ nhìn hơn từ xa:

• Chia văn bản thành các phần nhỏ mà người dùng có thể quét nhanh chóng.
• Sử dụng văn bản sáng trên nền tối. Kiểu này sẽ dễ đọc hơn trên TV.
• Tránh sử dụng phông chữ hoặc phông chữ nhẹ có cả nét chữ rất hẹp và nét chữ 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 kích thước phông chữ 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"/>
  

• Đặt 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 khoảng 3 mét có thể nhìn thấy rõ ràng. Cách tốt nhất để làm việc này là sử dụng kích thước tương đối với bố cục thay vì kích thước tuyệt đối và đơ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ì số đo pixel. Để đặ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ề các pixel không phụ thuộc vào mật độ và bố cục bản dựng nhằm xử lý các 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ư tất cả các 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 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 của 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 cách sử dụng pixel không phụ thuộc vào mật độ (dp) thay vì pixel. Mật độ pixel trên màn hình cho các độ phân giải khác nhau 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 phần 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 tốt trên thiết bị TV. Dưới đây là một số phương pháp tiếp cận 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 trên điện thoại hoặc máy tính bảng: đừng dùng lại bố cục của ứng dụng dành cho điện thoại hoặc máy tính bảng khi chưa sửa đổi. Bố cục được tạo cho các kiểu dáng thiết bị Android khác không phù hợp với các 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 sử dụng thanh thao tác trên điện thoại và máy tính bảng, nhưng chúng không phù hợp với giao diện TV. Bạn không nên sử dụng trình đơn tuỳ chọn của thanh thao tác hoặc bất kỳ trình đơn kéo xuống nào đối với các ứng dụng TV do khó di chuyển trong một trình đơn như vậy bằng điều khiển từ xa.
• Sử dụng ViewPager: trượt giữa các màn hình có thể hoạt động tốt trên điện thoại hoặc máy tính bảng, nhưng đừng thử điều 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ế TV.

Xử lý các bitmap lớn

Thiết bị TV, giống như các thiết bị Android khác, đều 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ì bố cục đó có thể nhanh chóng bị giới hạn bộ nhớ và gây ra lỗi hết bộ nhớ. Đối với hầu hết 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 chung hay nhất về đồ hoạ Android.

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. 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, phải truy cập được bằng D-pad thay vì 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 chưa được phê duyệt trên Cửa hàng Google Play 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