Người dùng thường quan sát màn hình TV từ khoảng cách khoảng 3 mét (10 feet), mặc dù màn hình này lớn hơn nhiều so với các màn hình thiết bị khác chạy Android, thì màn hình TV không cung cấp cùng một 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 tạo bố cục ứng dụng bằng thiết bị TV nhằm tạo ra trải nghiệm người dùng hữu ích và thú vị.
Dùng giao diện bố cục cho TV
Các giao diện Android có thể là cơ sở để trong ứng dụng TV của bạn. Dùng một giao diện để sửa đổi chế độ hiển thị các hoạt động trong ứng dụng 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 trên TV
tạo nên phong cách hình ảnh nhất quán. Dùng giao diện này cho mọi ứng dụng truyền hình đã tạo
nhờ 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">
Giao diện NoTitleBar
Thanh tiêu đề là một thành phần 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 thanh này
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
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 dành cho thiết bị di động Android, thao tác này rất phổ biến
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
chẳng hạn như phủ màu 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, không sử dụng
AppCompatActivity, vì các tính năng mà API này bật đã có sẵn 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ể chạy
vào một số thử thách do sắp xếp theo chủ đề. AppCompatActivity và các lựa chọn khác
Các tiện ích của 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 muốn 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
chế độ xem 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
từ 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ư với bất kỳ giao diện nào khác
chủ đề. Ví dụ: nếu bạn muốn thay đổi các giá trị dành riêng cho
Bộ công cụ Leanback UI
OnboardingSupportFragment,
hãy làm 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 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 rằng các 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 để 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 điều hướng trên màn hình ở bên trái hoặc bên phải màn hình và lưu không gian 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. Dùng các nhóm thành phần hiển thị như
GridViewthay vìListViewđể tận dụng không gian màn hình ngang hiệu quả hơn. - Dùng các nhóm thành phần hiển thị như
RelativeLayouthoặcLinearLayoutđể sắp xếp khung hiển thị. Phương pháp này cho phép hệ thống điều chỉnh vị trí của chế độ xem 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 truyền hình 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 để trình bày hình ảnh toàn màn hình cho người xem. Do đó, các thiết bị TV có thể cắt cạnh ngoài của một ứ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 nhìn thấy được người dùng trong vùng an toàn quét quá mức . Thêm lề 5% là 48 dp cho các cạnh bên trái và bên phải, đồng thời thêm 27 dp ở trên cùng và dưới cùng cạnh của 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 phạm vi quét an toàn .
Khô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 và khô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à phần tử lồng nhau bố cục con 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: Khô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ì 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 khác có thể thấy rõ
khi ngồi cách màn hình khoảng 3 mét. Chiến lược phát hành đĩa đơn
cách tốt nhất để làm điều này là sử dụng kích thước bố cục tương đối 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 giá trị
chiều rộng của một tiện ích, hãy sử dụng
wrap_contentthay vì số đ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 pixel có kích thước lớn hơn kích thước màn hình, hãy xem phần Khả năng tương thích với màn hình tổng quan.
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ì hình thức 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, đồng thời 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 màn hình cho bảng điều khiển TV khác nhau độ phân giải đượ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 |
Để 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 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
Một vài phương pháp xây dựng bố cục không hiệu quả trên các 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 để nê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 trên điện thoại hoặc máy tính bảng mà không bị sửa đổi. Bố cục được tạo cho các kiểu dáng thiết bị Android khác không được 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: trong khi bạn nên dùng thanh hành động trên điện thoại và máy tính bảng, chúng không phù hợp với giao diện TV. Sử dụng Bạn không nên sử dụng trình đơn tuỳ chọn thanh tác vụ (action bar) hoặc bất kỳ trình đơn kéo xuống nào đối với các ứng dụng TV do sự khó khăn khi điều hướng 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ử làm cách 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 với các 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 của ứng dụng, nó có thể nhanh chóng gặp phải tình trạng giới hạn bộ nhớ và gây ra lỗi hết bộ nhớ. Đối với hầu hết trong trường hợp khác, bạn nên sử dụng lớp Glide thư viện để tìm nạp, giải mã và hiển thị bitmap trong ứng dụng của bạn. Để biết thêm thông tin về cách nhận 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.
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 giải pháp quảng cáo dạng video hiển thị ở chế độ toàn màn hình và có thể đóng trong vòng 30 giây. Chức năng cho quảng cáo trên Android TV, chẳng hạn như nút đóng và nhấp chuột, phải có thể truy cập 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 cố gắng 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 không phải đượ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.