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 Bộ biểu tượng có mật độ cụ thể, bạn nên tạo các nhóm biểu tượng riêng cho các cụm từ có giá trị thấp, màn hình có độ phân giải trung bình và cao. Điều này đảm bảo rằng các biểu tượng sẽ hiển thị trên nhiều thiết bị có thể cài đặt ứng dụng của bạn. Xem Mẹo dành cho nhà thiết kế để được đề xuất về cách làm việc với nhiều bộ biểu tượng.
Bạn phải xuất hình minh hoạ cuối cùng ở dạng tệp PNG trong suốt. Không bao gồm màu nền.
Các mẫu để tạo biểu tượng trong Adobe Photoshop có sẵn trong biểu tượng Biểu tượng Gói mẫu.
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. Đến
cung cấp tính năng hỗ trợ cho tất cả phiên bản Android, nhà phát triển nên:
1. Biểu tượng đặt thẻ cho Android 2.0 trở lên trong
Thư mục drawable-hdpi-v5, drawable-mdpi-v5 và drawable-ldpi-v5.
2. Biểu tượng vị trí thẻ cho các phiên bản trước
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 nên kết xuất thẻ bằng kiểu thẻ mới.
Cung cấp biểu tượng cho trạng thái hai 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 biểu tượng có nhiều trạng thái, nhà phát triển phải tạo một tiểu bang liệt kê các đối tượng có thể vẽ cho từng biểu tượng. Tệp này là một tệp XML liệt kê những hình ảnh để sử dụng cho các trạng thái giao diện người dùng khác nhau.
Ví dụ: đối với tiện ích thẻ có các thẻ có tên là "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 được liệt kê ở trên phải tham chiếu đến
biểu tượng có thể vẽ đã chọn và bỏ chọn. Ví dụ: bên dưới 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 và phải điều chỉnh theo tỷ lệ và định vị bên trong thành phần cuối cùng.
Hình 1 minh hoạ nhiều cách định vị biểu tượng bên trong nội dung. Bạn nên định kích thước các biểu tượng nhỏ hơn giới hạn thực tế của tài sản.
Để chỉ ra kích thước được đề xuất cho biểu tượng, mỗi ví dụ trong Hình 1 bao gồm 3 hình chữ nhật hướng dẫn khác nhau:
- Hộp màu đỏ là hộp giới hạn cho toàn bộ tài sản.
- Hộp màu xanh dương là hộp giới hạn nên dùng cho biểu tượng thực tế. Hộp biểu tượng có kích thước nhỏ hơn kích thước của hộp thành phần đầy đủ để cho phép các cách xử lý biểu tượng đặc biệt.
- Hộp màu cam là hộp giới hạn được đề xuất cho biểu tượng thực tế khi nội dung là hình vuông. Hộp dành cho các biểu tượng hình vuông nhỏ hơn hộp dành cho các biểu tượng khác để tạo trọng số hình ảnh nhất quán cho cả hai loại.
|
|
|
|
|
|
|
Hình 1. Định kích thước và định vị biểu tượng thẻ bên trong giới hạn của biểu tượng. |
Kiểu, màu sắc và hiệu ứng
Biểu tượng thẻ ở dạng phẳng, mờ và được hiển thị trực tiếp.
Biểu tượng thẻ phải có hai trạng thái: đã chọn và chưa được chọn.
|
Hình 2. Kiểu và hiệu ứng cho các biểu tượng thẻ đã bỏ 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 các 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ố việc "nên và không nên làm" ví dụ cần xem xét khi tạo biểu tượng thẻ cho ứng dụng của bạn.
Biểu tượng ví dụ
Dưới đây là các biểu tượng thẻ tiêu chuẩn có mật độ cao được sử dụng trong nền tảng Android.
Cảnh báo: Vì những tài nguyên này có thể thay đổi giữa các phiên bản nền tảng, nên bạn không được tham chiếu đến bản sao tài nguyên của hệ thống. Nếu bạn muốn dùng biểu tượng bất kỳ hoặc tài nguyên có thể vẽ nội bộ nào khác, bạn nên lưu trữ một 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 của bạn, 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 hình thức của các biểu tượng, ngay cả khi sao chép các thay đổi. Lưu ý rằng lưới bên dưới chưa phải là toàn bộ.
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 được chọn có cùng hiệu ứng và chuyển màu nền như các 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ẻ bị bỏ chọn, nhưng có màu sắc mờ hơn bóng bên trong và có cùng độ dốc cho phần phía trước biểu tượng hộp thoại.
- Biểu tượng thẻ có khung an toàn 1 px chỉ được chồng lên cạnh của hàm 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 minh hoạ 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. Khung an toàn và hiệu ứng chuyển màu nền cho thẻ đã bỏ chọn . Kích thước biểu tượng là 32x32. |
|
Hình 4. Khung an toàn và hiệu ứng chuyển màu nền cho biểu tượng thẻ trong trạng thái đã chọn. Kích thước biểu tượng là 32x32. |
Biểu tượng thẻ chưa được chọn
Ánh sáng, hiệu ứng và bóng
Biểu tượng thẻ chưa chọn trông giống như biểu tượng thẻ đã chọn, nhưng có bóng bên trong mờ hơn và chuyển màu cho 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 đổ khi chưa chọn biểu tượng thẻ.
|
Từng bước
|
Biểu tượng thẻ đã chọn
Các biểu tượng thẻ đã chọn có cùng hiệu ứng và độ dốc màu với 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 thẻ đã chọn .
|
Bảng màu
|
Từng bước
|
