Trang này được dịch bởi Cloud Translation API.

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

Người dùng thường quan sát màn hình TV từ khoảng 3 mét. Mặc dù màn hình 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 giống như 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 để mang lại trải nghiệm hữu ích và thú vị cho người dùng.

Dùng giao diện bố cục cho TV

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

Giao diện Leanback

Thư viện androidx.leanback bao gồm Theme.Leanback, một giao diện dành cho các hoạt động truyền hình mang lại phong cách hình ảnh nhất quán. Sử dụng giao diện này cho mọi ứng dụng truyền hình được xây dựng 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">

Thận trọng: Giao diện Leanback không có thanh ứng dụng vì bạn không nên dùng thanh ứng dụng trong các ứng dụng trên Android TV. Nếu ứng dụng dùng các mảnh hỗ trợ, chẳng hạn như BrowseSupportFragment, thì hoạt động của bạn phải mở rộng FragmentActivity. Không sử dụng AppCompatActivity vì ứng dụng này cố gắng tạo giao diện cho thanh ứng dụng và gây ra lỗi sau:

java.lang.RuntimeException: Unable to start activity ComponentInfo{...} :
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

Giao diện NoTitleBar

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

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ố khó khăn do việc sắp xếp theo 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 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 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. Các giao diện này cung cấp cho bạn tất cả giao diện trên AppCompat, đồng thời 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 theo cách tương tự 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 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 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 để đảm bảo có thể sử dụng và phát huy hiệu quả trên màn hình lớn. Hãy làm theo các mẹo sau để xây dựng 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à dành 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 dùng các 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 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 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 để giao diện người dùng không bị 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 truyền hình để 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 ngoài của một bố cục ứng dụng để đảm bảo rằng toàn bộ màn hình đều lấp đầy màn hình. 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 nhìn thấy được người dùng trong khu vực an toàn quét quá mức. Việc thêm lề 5% (48 dp) cho cạnh trái và phải cũng như 27 dp ở cạnh trên cùng và dưới cùng vào một bố cục 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 quét quá mức.

Đừng điều chỉnh các phần tử trên màn hình nền mà người dùng không trực tiếp tương tác cũng như đừ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 các thành phần màn hình nền hiển thị 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ử nằm 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: Không áp dụng lề khi 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ì các bố cục đó đã tích hợp lề an toàn khi quét quá mức.

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

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

Chia văn bản thành các phần nhỏ để người dùng có thể nhanh chóng quét tìm.
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 phông chữ hoặc phông chữ nhẹ có cả nét chữ rất hẹp và rất rộng. Sử dụng phông chữ Sans Serif đơn giản và khử răng cưa để tăng khả năng đọc.

Sử dụng các kích thước phông 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"/>

Làm cho tất cả tiện ích chế độ xem của bạn đủ lớn để người ngồi cách màn hình khoảng 3 mét. 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 theo 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ì phép đo pixel và để đặt lề cho 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 xây dựng để 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 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 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 các pixel không phụ thuộc vào mật độ (dp) thay vì pixel. Mật độ pixel 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 trên 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 vài 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: không dùng lại bố cục trong ứng dụng trên đ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 đơn giản hoá để thao tác 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 thanh tác vụ lại không phù hợp cho giao diện TV. Bạn không nên sử dụng trình đơn tuỳ chọn thanh thao tác (action bar) hoặc trình đơn kéo xuống bất kỳ đối với các ứng dụng TV do khó di chuyển một trình đơn như vậy bằng điều khiển từ xa.
Sử dụng ViewPager: tính năng 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ử tính năng 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 về thiết kế TV.

Xử lý các bitmap lớn

Các thiết bị TV (như các thiết bị Android khác) đều có dung lượng 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 ứng dụng có thể nhanh chóng bị giới hạn bộ nhớ và gây ra lỗi hết bộ nhớ. Trong 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 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. Chức năng quảng cáo trên Android TV, chẳng hạn như nút đóng và nhấp, phải có thể truy cập được bằng D-pad thay vì bằng 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 các 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

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