Biểu tượng thẻ là các phần tử đồ hoạ được dùng để thể hiện các thẻ riêng lẻ trong một giao diện nhiều thẻ. Mỗi biểu tượng thẻ có hai trạng thái: chưa đánh dấu và đã chọn.
Như mô tả trong phần Cung cấp nhóm biểu tượng cụ thể theo mật độ, bạn nên tạo các nhóm biểu tượng riêng biệt cho các màn hình có mật độ thấp, trung bình và cao. Điều này đảm bảo rằng các biểu tượng sẽ hiển thị đúng cách trên nhiều loại thiết bị mà bạn có thể cài đặt ứng dụng. Xem Mẹo dành cho nhà thiết kế để biết các đề xuất về cách làm việc với nhiều nhóm biểu tượng.
Hình ảnh hoàn thiện phải được xuất dưới dạng tệp PNG có nền trong suốt. Không sử dụng màu nền.
Các mẫu để tạo biểu tượng trong Adobe Photoshop có trong Icons Package (Gói mẫu biểu tượng).
Cảnh báo:
Kiểu biểu tượng thẻ đã thay đổi đáng kể trong
Android 2.0 so với các phiên bản trước. Để hỗ trợ mọi phiên bản Android, nhà phát triển nên:
1. Đặt biểu tượng thẻ cho Android 2.0 trở lên trong thư mục drawable-hdpi-v5, drawable-mdpi-v5 và drawable-ldpi-v5.
2. Đặt biểu tượng thẻ cho các phiên bản trước trong thư mục drawable-hdpi, drawable-mdpi và drawable-ldpi.
3. Đặt android:targetSdkVersion thành 5 trở lên trong <uses-sdk> trong tệp kê khai ứng dụng.
Thao tác này sẽ thông báo cho hệ thống biết sẽ hiển thị các thẻ bằng kiểu thẻ mới.
Cung cấp biểu tượng cho hai trạng thái thẻ
Biểu tượng thẻ phải có hai trạng thái: chưa đánh dấu và đã chọn. Để cung cấp các biểu tượng có nhiều trạng thái, nhà phát triển phải tạo một đối tượng có thể vẽ trong danh sách trạng thái cho mỗi biểu tượng. Đây là tệp XML liệt kê hình ảnh cần sử dụng cho các trạng thái giao diện người dùng.
Ví dụ: đối với tiện ích thẻ có các thẻ "Bạn bè" và "Đồng nghiệp", bạn có thể sử dụng cấu trúc thư mục tương tự như cấu trúc bên dưới:
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...
Nội dung của các tệp XML liệt kê ở trên phải tham chiếu đến các biểu tượng có thể vẽ đã chọn và chưa chọn tương ứng. Ví dụ: dưới đây là mã cho ic_tab_friends.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>
Android 2.0 đến Android 2.3
Các nguyên tắc sau đây mô tả cách thiết kế biểu tượng thẻ cho Android 2.0 đến Android 2.3 (API cấp 5 đến 10).
Kích thước và vị trí
Biểu tượng thẻ phải sử dụng các hình dạng và biểu mẫu đơn giản, đồng thời phải được điều chỉnh theo tỷ lệ và đặt bên trong thành phần hoàn thiện.
Hình 1 minh hoạ nhiều cách để đặt biểu tượng bên trong thành phần. Bạn nên đặt kích thước cho các biểu tượng nhỏ hơn giới hạn thực tế của thành phần.
Để cho biết kích thước đề xuất cho biểu tượng, mỗi ví dụ trong Hình 1 bao gồm ba hình chữ nhật dạng đường dẫn khác nhau:
- Hộp màu đỏ là vùng giới hạn cho toàn bộ nội dung.
- Hộp màu xanh dương là hộp giới hạn được đề xuất cho biểu tượng thực tế. Hộp biểu tượng có kích thước nhỏ hơn hộp thành phần đầy đủ để cho phép xử lý biểu tượng đặc biệt.
- Hộp màu cam là hộp giới hạn đề xuất cho biểu tượng thực tế khi nội dung là hình vuông. Hộp dành cho biểu tượng hình vuông nhỏ hơn hộp dành cho các biểu tượng khác để thiết lập trọng số hình ảnh nhất quán cho 2 loại.
|
|
|
|
|
|
|
Hình 1. Kích thước và đặt biểu tượng thẻ trong giới hạn của thành phần biểu tượng. |
Phong cách, màu sắc và hiệu ứng
Biểu tượng thẻ có dạng phẳng, mờ và như hình ảnh hiển thị.
Biểu tượng thẻ phải có hai trạng thái: đã chọn và chưa chọn.
|
Hình 2. Kiểu và hiệu ứng cho các biểu tượng thẻ chưa được chọn. Lưu ý: tất cả các kích thước pixel đều dành cho mật độ trung bình và phải được điều chỉnh theo tỷ lệ thích hợp cho các mật độ khác.
|
|
Hình 3. Kiểu và hiệu ứng cho biểu tượng thẻ đã chọn. Lưu ý: tất cả các kích thước pixel đều dành cho mật độ trung bình và phải được điều chỉnh theo tỷ lệ thích hợp cho các mật độ khác.
|
Những việc nên làm và việc không nên làm
Dưới đây là một số ví dụ về những việc "nên làm và không nên" cần cân nhắc khi tạo biểu tượng thẻ cho ứng dụng.
Biểu tượng ví dụ
Dưới đây là các biểu tượng thẻ có độ phân giải cao tiêu chuẩn được sử dụng trong nền tảng Android.
Cảnh báo: Vì các tài nguyên này có thể thay đổi giữa các phiên bản nền tảng, bạn không nên tham chiếu bản sao tài nguyên của hệ thống. Nếu muốn sử dụng bất kỳ biểu tượng nào hoặc các tài nguyên có thể vẽ nội bộ khác, bạn nên lưu trữ bản sao cục bộ của các biểu tượng hoặc đối tượng có thể vẽ đó trong tài nguyên ứng dụng, sau đó tham chiếu bản sao cục bộ từ mã xử lý ứng dụng của bạn. Bằng cách đó, bạn có thể duy trì quyền kiểm soát giao diện của các biểu tượng, ngay cả khi bản sao của hệ thống thay đổi. Lưu ý rằng lưới bên dưới không phải là lưới đầy đủ.
Android 1.6 trở xuống
Các nguyên tắc sau đây mô tả cách thiết kế biểu tượng thẻ cho Android 1.6 (API cấp 4) trở xuống.
Cấu trúc
- Các biểu tượng thẻ chưa chọn có cùng độ dốc và hiệu ứng như biểu tượng trình đơn, nhưng không có ánh sáng bên ngoài.
- Các biểu tượng thẻ đã chọn trông giống như biểu tượng thẻ chưa được chọn, nhưng có bóng bên trong mờ hơn và có độ dốc ở phần phía trước giống như biểu tượng hộp thoại.
- Các biểu tượng thẻ có khung an toàn 1 px chỉ nên chồng lên cạnh của tính năng khử răng cưa của một hình tròn.
- Tất cả kích thước được chỉ định trên trang này đều dựa trên kích thước bảng vẽ 32x32 px. Giữ khoảng đệm 1 px xung quanh hộp giới hạn bên trong mẫu Photoshop.
|
Hình 3. Đưa vào khung hình an toàn và tô màu chuyển màu cho các biểu tượng thẻ chưa được chọn. Kích thước biểu tượng là 32x32. |
|
Hình 4. Đưa vào khung hình an toàn và tô màu chuyển màu cho các biểu tượng thẻ ở trạng thái đã chọn. Kích thước biểu tượng là 32x32. |
Biểu tượng thẻ chưa chọn
Ánh sáng, hiệu ứng và bóng
Các biểu tượng thẻ không được chọn sẽ trông giống như biểu tượng thẻ đã chọn, nhưng có bóng bên trong mờ dần và chuyển màu ở phần phía trước giống như các biểu tượng hộp thoại.
|
Hình 5. Ánh sáng, hiệu ứng và bóng cho các biểu tượng thẻ chưa được chọn.
|
Từng bước
|
Biểu tượng thẻ đã chọn
Các biểu tượng thẻ đã chọn có cùng độ dốc và hiệu ứng như biểu tượng trình đơn, nhưng không có ánh sáng bên ngoài.
|
Hình 6. Ánh sáng, hiệu ứng và bóng cho các biểu tượng thẻ đã chọn.
|
Bảng màu
|
Từng bước
|
