Tiện ích ứng dụng (đôi khi chỉ là "tiện ích") là một tính năng ra mắt trong Android 1.5 và được cải thiện đáng kể trong Android 3.0 và 3.1. Tiện ích có thể hiển thị nhanh thông tin kịp thời nhất hoặc có liên quan nhất của ứng dụng trên Màn hình chính của người dùng. Hình ảnh hệ thống Android tiêu chuẩn bao gồm một số tiện ích, trong đó có tiện ích cho Đồng hồ kim, Nhạc và các ứng dụng khác.
Hình 1. Ví dụ về tiện ích ứng dụng trong Android 4.0.
Tài liệu này mô tả cách thiết kế một tiện ích sao cho tiện ích đó phù hợp với hình ảnh đồ hoạ với các tiện ích khác và với các phần tử khác trên Màn hình chính của Android, chẳng hạn như biểu tượng trình chạy và lối tắt. Hướng dẫn này cũng mô tả một số tiêu chuẩn cho hình minh hoạ tiện ích cũng như một số mẹo và thủ thuật đồ hoạ tiện ích.
Để biết thông tin về cách phát triển các tiện ích, hãy xem phần Tiện ích ứng dụng trong Hướng dẫn dành cho nhà phát triển.
Phân tích tiện ích chuẩn
Các tiện ích thông thường của ứng dụng Android có 3 thành phần chính: Hộp giới hạn, khung, các nút điều khiển đồ hoạ của tiện ích và các thành phần khác. Tiện ích ứng dụng có thể chứa một tập hợp con các tiện ích Chế độ xem trong Android; các chế độ điều khiển được hỗ trợ bao gồm nhãn văn bản, nút và hình ảnh. Để biết danh sách đầy đủ các Khung hiển thị có sẵn, hãy xem phần Tạo bố cục tiện ích ứng dụng trong Hướng dẫn cho nhà phát triển. Các tiện ích được thiết kế hợp lý sẽ để lại một số lề giữa các cạnh của hộp giới hạn và khung, cũng như khoảng đệm giữa các cạnh trong của khung và các chế độ điều khiển của tiện ích.
Hình 2. Các tiện ích thường có lề giữa hộp giới hạn và khung, cũng như khoảng đệm giữa khung và các thành phần điều khiển tiện ích.
Lưu ý: Kể từ Android 4.0, các tiện ích ứng dụng sẽ tự động được tạo lề giữa khung tiện ích và hộp giới hạn của tiện ích ứng dụng để căn chỉnh tốt hơn với các tiện ích và biểu tượng khác trên màn hình chính của người dùng. Để tận dụng hành vi được đề xuất này, hãy đặt targetSdkVersion của ứng dụng thành 14 trở lên.
Các tiện ích được thiết kế để hiển thị vừa với các tiện ích khác trên Màn hình chính sẽ lấy tín hiệu từ các phần tử khác trên Màn hình chính để căn chỉnh; các tiện ích này cũng sử dụng các hiệu ứng đổ bóng tiêu chuẩn. Tất cả thông tin chi tiết nêu trên được mô tả trên trang này.
Xác định kích thước cho tiện ích
Mỗi tiện ích phải xác định minWidth và minHeight, cho biết
lượng dung lượng tối thiểu cần sử dụng theo mặc định. Khi người dùng thêm một tiện ích vào Màn hình chính, tiện ích đó thường sẽ chiếm nhiều hơn chiều rộng và chiều cao tối thiểu mà bạn chỉ định. Màn hình chính của Android cung cấp cho người dùng một lưới các không gian có sẵn để đặt các tiện ích và biểu tượng. Lưới này có thể thay đổi tuỳ theo thiết bị; ví dụ: nhiều điện thoại di động có lưới 4x4 và máy tính bảng có thể cung cấp lưới 8x7 lớn hơn. Khi bạn thêm tiện ích, tiện ích sẽ được kéo giãn để chiếm số ô tối thiểu (theo chiều ngang và chiều dọc) cần thiết để đáp ứng các quy tắc ràng buộc minWidth và minHeight. Như chúng ta thảo luận trong phần Thiết kế bố cục tiện ích và đồ hoạ nền bên dưới, việc sử dụng nền 9 bản vá và bố cục linh hoạt cho các tiện ích ứng dụng sẽ cho phép tiện ích của bạn thích ứng linh hoạt với lưới Màn hình chính của thiết bị, đồng thời vẫn sử dụng được và đẹp mắt.
Mặc dù chiều rộng và chiều cao của ô (cũng như số lượng lề tự động áp dụng cho các tiện ích) có thể thay đổi theo thiết bị, nhưng bạn có thể sử dụng bảng dưới đây để ước tính gần đúng kích thước tối thiểu của tiện ích, dựa trên số lượng ô lưới được chiếm sẵn mong muốn:
| Số ô (Cột hoặc Hàng) |
Kích thước có sẵn (dp) ( minWidth hoặc
minHeight) |
|---|---|
| 1 | 40dp |
| 2 | 110dp |
| 3 | 180dp |
| 4 | 250dp |
| … | … |
| n | 70 × n − 30 |
Bạn nên thận trọng với minWidth và minHeight, trong đó chỉ định kích thước tối thiểu để hiển thị tiện ích ở trạng thái mặc định tốt. Để xem ví dụ về cách cung cấp minWidth và minHeight, giả sử bạn có tiện ích trình phát nhạc hiển thị nghệ sĩ và tên bài hát đang phát (xếp chồng theo chiều dọc), nút Phát và nút Tiếp theo:
Hình 3. Ví dụ về tiện ích trình phát nhạc.
Chiều cao tối thiểu phải là chiều cao của hai Chế độ xem văn bản cho nghệ sĩ và tiêu đề, cộng với một số lề văn bản. Chiều rộng tối thiểu phải là chiều rộng tối thiểu có thể sử dụng của nút Play và Next (Tiếp theo), cộng với chiều rộng văn bản tối thiểu (ví dụ: chiều rộng là 10 ký tự), cộng với mọi lề văn bản theo chiều ngang.
Hình 4. Ví dụ về kích thước và lề cho các phép tính minWidth/minHeight. Chúng tôi đã chọn 144dp làm ví dụ về chiều rộng tối thiểu
phù hợp cho nhãn văn bản.
Dưới đây là ví dụ về các phép tính:
minWidth= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight= 48dp + (2 × 4dp) = 56dp
Nếu đã có bất kỳ khoảng đệm nội dung nào trong nền của tiện ích 9-patch, bạn nên thêm vào minWidth và minHeight tương ứng.
Tiện ích có thể thay đổi kích thước
Bạn có thể đổi kích thước các tiện ích theo chiều ngang và/hoặc theo chiều dọc kể từ Android 3.1, nghĩa là minWidth và minHeight sẽ trở thành kích thước mặc định của tiện ích. Bạn có thể chỉ định kích thước tối thiểu của tiện ích bằng cách sử dụng minResizeWidth và minResizeHeight; các giá trị này phải chỉ định kích thước mà tiện ích sẽ không đọc được hoặc không sử dụng được.
Đây thường là một tính năng được ưu tiên cho các tiện ích bộ sưu tập, chẳng hạn như các tiện ích dựa trên ListView hoặc GridView.
Thêm lề vào tiện ích ứng dụng
Như đã đề cập trước đó, Android 4.0 sẽ tự động thêm lề nhỏ, chuẩn vào mỗi cạnh của tiện ích trên Màn hình chính, đối với các ứng dụng chỉ định targetSdkVersion từ 14
trở lên. Điều này giúp cân bằng hình ảnh của Màn hình chính và do đó, bạn không nên thêm bất kỳ lề nào bên ngoài hình dạng nền của tiện ích ứng dụng trong Android 4.0.
Bạn có thể dễ dàng viết một bố cục có lề tuỳ chỉnh áp dụng cho các phiên bản nền tảng cũ và không có thêm lề cho Android 4.0 trở lên. Xem phần Thêm lề vào tiện ích ứng dụng trong Hướng dẫn dành cho nhà phát triển để biết thông tin về cách đạt được điều này bằng XML bố cục.
Thiết kế bố cục tiện ích và đồ hoạ nền
Hầu hết các tiện ích đều có nền hình chữ nhật đồng nhất hoặc hình chữ nhật bo tròn. Phương pháp hay nhất là xác định hình dạng này bằng cách sử dụng 9 bản vá; mỗi bản vá cho một mật độ màn hình (xem phần Hỗ trợ nhiều màn hình để biết chi tiết). Bạn có thể tạo 9-patch bằng công cụ draw9patch hoặc đơn giản là bằng một chương trình chỉnh sửa đồ hoạ như Adobe® Photoshop. Điều này sẽ cho phép hình dạng nền tiện ích chiếm toàn bộ không gian có sẵn. 9-patch phải cạnh nhau mà không có pixel trong suốt nào tạo thêm lề, có thể là tiết kiệm một vài pixel đường viền để tạo bóng đổ nhẹ hoặc các hiệu ứng tinh tế khác.
Lưu ý: Tương tự như các chế độ điều khiển trong hoạt động, bạn nên đảm bảo các chế độ điều khiển tương tác có trạng thái nhấn và tập trung riêng biệt bằng cách sử dụng đối tượng có thể vẽ trong danh sách trạng thái.
Hình 5. Pixel đường viền 9 bản vá cho biết các vùng có thể co giãn và khoảng đệm nội dung.
Một số tiện ích ứng dụng, chẳng hạn như các tiện ích sử dụng StackView, có nền trong suốt. Đối với trường hợp này, mỗi mục riêng lẻ trong StackView phải sử dụng nền gồm 9 bản vá
cạnh nhau, có ít hoặc không có pixel trong suốt đường viền cho lề.
Đối với nội dung của tiện ích, bạn nên sử dụng các bố cục linh hoạt như RelativeLayout, LinearLayout hoặc FrameLayout. Giống như bố cục hoạt động phải thích ứng với các kích thước màn hình thực tế, bố cục tiện ích cũng phải thích ứng với nhiều kích thước ô của lưới trên Màn hình chính.
Dưới đây là bố cục mẫu mà một tiện ích âm nhạc hiển thị thông tin văn bản và hai nút có thể sử dụng.
Chính sách này dựa trên nội dung thảo luận trước đó về việc thêm lề tuỳ thuộc vào phiên bản hệ điều hành. Lưu ý rằng cách mạnh mẽ và bền bỉ nhất để thêm lề vào tiện ích là gói khung tiện ích và nội dung trong một FrameLayout có đệm.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/widget_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/my_widget_background">
<TextView
android:id="@+id/song_info"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="@+id/play_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
<Button
android:id="@+id/skip_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
Nếu bây giờ bạn có thể xem tiện ích âm nhạc mẫu trong phần trước, bạn có thể bắt đầu sử dụng các thuộc tính bố cục linh hoạt như sau:
Hình 6. Trích dẫn bố cục và thuộc tính linh hoạt.
Khi người dùng thêm tiện ích vào màn hình chính, trên một thiết bị Android 4.0 mẫu, trong đó mỗi ô lưới có kích thước 80 dp × 100 dp và lề 8 dp được tự động áp dụng trên mọi kích thước, tiện ích sẽ được kéo giãn như sau:
Hình 7. Tiện ích âm nhạc nằm trên lưới mẫu 80 dp x 100 dp với lề tự động 8 dp do hệ thống thêm vào.
Sử dụng Gói mẫu tiện ích ứng dụng
Khi bắt đầu thiết kế một tiện ích mới hoặc cập nhật một tiện ích hiện có, trước tiên, bạn nên xem qua các mẫu thiết kế tiện ích dưới đây. Gói có thể tải xuống dưới đây bao gồm đồ hoạ nền 9-patch, XML và các tệp Adobe® Photoshop nguồn cho nhiều mật độ màn hình, kiểu tiện ích phiên bản hệ điều hành và màu tiện ích. Gói mẫu cũng chứa các hình ảnh đồ hoạ hữu ích để giúp toàn bộ tiện ích hoặc các phần của tiện ích (ví dụ: nút) có tính tương tác.
Hình 8. Trích đoạn từ Gói mẫu tiện ích ứng dụng (mật độ trung bình, tối, kiểu Android 4.0/trước, trạng thái mặc định/lấy làm tâm điểm/nhấn).
Bạn có thể tải tệp lưu trữ Gói mẫu tiện ích ứng dụng mới nhất thông qua đường liên kết dưới đây: