[Android TV] Phần 3: Xây dựng bố cục cho TV app

Chúng ta cùng quay trở lại phần tiếp theo trong series các bài tìm hiểu về Android TV app. Ở phần này chúng ta cùng xem cách xây dựng bố cục cho 1 ứng dụng Android chạy trên TV device.

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

Phần này chúng ta sẽ tìm hiểu về những yêu cầu tối thiểu về cách phân chia bố cục hiệu quả cho một ứng dụng chạy trên TV device.

Sử dụng giao diện với chủ đề dành cho TV device

Android Themes có thể cung cấp một số các ví dụ cho việc bố trí trong các ứng dụng TV của chúng ta. Chúng ta nên sử dụng một chủ đề nào đó rồi sửa đổi hiển thị các hoạt động ứng dụng theo ý tưởng của chúng ta cho phù hợp hơn để chạy trên một thiết bị truyền hình. Phần này giải thích những chủ đề chúng ta nên sử dụng.

Chủ đề Leanback

Một thư viện hỗ trợ cho giao diện người dùng truyền hình gọi là v17 leanback Thư viện cung cấp một số chủ đề tiêu chuẩn cho hoạt động truyền hình, được gọi là Theme.Leanback. Chủ đề này thiết lập một giao diện trực quan phù hợp cho các ứng dụng truyền hình. Chủ đề này được đề nghị cho hầu hết các ứng dụng TV. Chủ đề này được khuyến khích mạnh mẽ cho bất kỳ ứng dụng truyền hình có sử dụng các lớp con của leanback v17. Các đoạn mã sau đây cho thấy làm thế nào để áp dụng chủ đề này cho một hoạt động cụ thể trong một ứng dụng:

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

Chủ đề NoTitleBar

Các thanh tiêu đề là một yếu tố cơ bản về giao diện người dùng cho các ứng dụng Android Mobile hoặc Tablets, nhưng nó không thích hợp cho các TV devices. Nếu chúng ta không sử dụng các lớp của V17 leanback, chúng ta nên áp dụng chủ đề này trong việc thiết kế một ứng dụng dành cho TV device để ngăn các phần hiển thị không cần thiết như tiêu đề... Sau đây là đoạn mã nguồn từ một manifest trên TV apps cho ta biết làm thế nào để loại bỏ phần 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>

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

Các bố cục cho các thiết bị TV nên tuân theo một số các hướng dẫn cơ bản để có thể sử dụng một cách hiệu quả trên màn hình lớn. Thực hiện theo những chỉ dẫn này để xây dựng một bố cục được tối ưu hóa trên một màn hình TV:

• Xây dựng bố cục với màn hình ngang. Màn hình TV luôn luôn hiển thị ở chế độ màn hình ngang.
• Đặt phần điều khiển, điều hướng ở phía trên bên trái hoặc phải của màn hình và tiết kiệm tối đa phần không gian thẳng đứng.
• Tạo giao diện người dùng chia thành nhiều phần, sử dụng các fragment và sử dụng các nhóm view như GridView thay vì sử dụng ListView để tận dụng tốt hơn các không gian màn hình cho chế độ màn hình ngang
• Sử dụng các nhóm view như RelativeLayout hoặc LinearLayout để sắp xếp các đối tượng view. Cách tiếp cận này cho phép hệ thống điều chỉnh vị trí của các quan ddeierm về kích thước, liên kết, tỉ lệ và mật độ bố cục điểm ảnh trên màn hình TV.
• Căn lề một cách hợp lý để tránh việc bố cục bị lộn xộn.

Overscan

Bố trí các bố cục cho màn hình TV có một số yêu cầu đặc biệt, do sự phát triển của các tiêu chuẩn truyền hình và yêu cầu luôn hiển thị toàn màn hình cho việc sử dụng. Vì lí do này, các thiết bị truyền hình có thể lược bỏ các cạnh ngoài của việc bố trí ứng dụng để đảm bảo luôn hiển thị toàn màn hình. Việc này được định nghĩa là overscan.

Các phần bố cục trên màn hình hiển thị cho người dùng ở tất cả mọi lúc phải được bố trí trong phần giới hạn của overscan. Thêm 5% margin của 48dp ở hai bên left, right và 5% margin của 27dp với phần top và bottomđể đảm bảo luôn nằm trong vùng hiển thị của overscan.

Những phần mà người dùng không tương tác trực tiếp trên màn hình thì chúng ta không cần chú ý tới sự ảnh hưởng của overscan với chúng.

Ví dụ sau cho chúng ta thấy một bố cục bao gồm overscan:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_awidth="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_awidth="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>

**Chú ý: ** Không áp dụng việc căn lề overscan để bố trí các bố cục nếu bạn đang sử dụng v17 leanback, như Browse Fragment hoặc các widgets liên quan.

Xây dựng các Text và Controls có thể sử dụng được trên TV device

Các văn bản và các điều khiển trên bố cục của TV app nên bố trí sao cho dễ dàng nhìn thấy và điều khiển được từ khoảng cách lơn. Thực hiện theo chỉ dẫn sau để làm cho yếu tố giao diện người dùng của chúng ta dễ dàng hơn:

• Tách các văn bản thành nhiều phần nhỏ mà người dùng có thể nhìn thấy chúng một cách nhanh và dễ dàng.
• Sử dụng văn bản với màu sáng trên nền tối. Đây là cách dễ nhất để đọc một thứ gì đó trên màn hình TV
• Hạn chế sử dụng những kiểu chữ mỏng và khoảng cách giữa các ký tự hẹp. Nên sử dụng font chữ san-serif đơn giản và khử răng cưa để tăng khả năng tiếp thu của người dùng.
• Sử dụng kích thước font tiêu chuẩn:

<TextView
      android:id="@+id/atext"
      android:layout_awidth="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceMedium"/>

• Đảm bảo rằng tất cả các widgets của chúng ta đủ kích thước để có thể nhìn thấy rõ ràng từ khoảng cách lớn. Cách tốt nhất để làm điều này là bố trí các kích thước tương đối chứ không sử dụng tuyệt đối và hạn chế sử dụng các kích thước dip độc lập. Chúng ta có thể sử dụng các thuộc tính wrap_content hoặc match_parent thay vì sử dụng kích thước tuyệt đối và chính xác.

Để tìm hiểu thêm về vấn đề này chúng ta có thể đọc thêm Supporting Multiple Screens.

Quản lý tài nguyên trên giao diện của TV device

Các độ nét màn hình TV nằm trong độ phân giải phổ biến là 720p, 1080i, và 1080p. Bố trí bố cục của chúng ta nên nhắm mục tiêu một kích thước màn hình 1920 x 1080 pixel, và sau đó cho phép các hệ thống Android để thu hẹp các yếu tố bố trí của chúng ta đến 720p nếu cần thiết. Nói chung, downscaling (loại bỏ các điểm ảnh) không làm suy giảm chất lượng trình bày bố cục của chúng ta. Tuy nhiên, tỉ lệ ngược có thể gây ra các đối tượng làm giảm chất lượng bố trí của bạn và có một tác động tiêu cực đến kinh nghiệm người dùng của ứng dụng của chúng ta.

Để có được kết quả tốt nhất cho việc co giãn hình ảnh mà không làm ảnh hưởng tới chất lượng hình ảnh, chúng ta có thể sử dụng ảnh 9-patch. Nếu chúng ta có 1 hình ảnh nhỏ so với kích thước cần hiển thị thì việc tất yếu là hình ảnh đó sẽ vỡ hoặc mờ khi hiển thị trên màn hình lớn. 9-patch có thể giúp chúng ta giải quyết vấn đề này.

Để hiểu thêm về tối ưu hóa cách bố trí và nguồn tài nguyên cho các màn hình lớn, chúng ta có thể tham khảo Designing for multiple Screens

Anti-Patterns với bố trí bố cục

Có một vài cách và phương pháp xây dựng bố cục màn hình mà chúng ta nên tránh bởi vì nó không làm việc thực sự tốt trên các TV device và dẫn đến sự khó chịu trong trải nghiệm người dùng. Dưới đây là một số giao diện người dùng tiếp cận và chúng ta đặc biết chú ý tránh khi bố trí một bố của trong ứng dụng của chúng ta.

• Tái sử dụng bố cục thiết kế dành cho thiết bị điện thoại hoặc máy tính bảng

• Action Bar(Thanh tiêu đề của ứng dụng) - Trong khi giao diện người dùng này được sử dụng trên điện thoại và máy tính bảng, thì với một TV device là hoàn toàn không thích hợp. Đặc biệt, sử dụng một lựa chọn trên thanh Action Bar sẽ gây trở ngại trong điều hướng với một chiếc điều khiển từ xa.

• ViewPager: Trượt qua lại giữa các màn hình là lợi thế khi sử dụng trên thiết bị điện thoại hoặc máy tính bảng nhưng nó mang tác dụng hoàn toàn ngược lại với 1 TV device.

Xử lý các ảnh lớn

Thiết bị Android TV cũng giống như các thiết bị Android khác, có một số lượng hạn chế về bộ nhớ, Nếu chúng ta xây dựng và bố trí ứng dụng với mật độ ảnh có chất lượng phân giải cao trong các hoạt động ứng dụng, nó có thể gây rắc rối cho ứng dụng của chúng ta về vấn đề bộ nhớ. Để tránh gặp phải vấn đề này, chúng ta nên tuân theo một số những chỉ dẫn sau:

• Chỉ tải hình ảnh khi chúng đã được hiển thị trên màn hình. Ví dụ, khi hiển thị nhiều hình ảnh trong một GridView hoặc Gallery, chỉ tiến hành tải một hình ảnh khi gọi hàm getView() trên Adapter.
• Sử dụng hàm recycle() cho Bitmap views khi nó không còn cần sử dụng
• Sử dụng WearReference để lưu trữ cache cho các đối tượng Bitmap trong bộ nhớ Collection
• Sử dụng AsyncTask để tải và lưu hình ảnh khi chúng ta sử dụng network. Không bao giờ sử dụng chúng trên nền giao diện người dùng chính.
• Thu nhỏ ảnh lớn cho tới một kích thước phù hợp hơn khi chúng ta tải chúng; nếu không, download những hình ảnh chính nó có thể gây ra một ra lỗi out of memory.