Mặc dù ứng dụng của bạn chỉ có thể chứa văn bản và màu sắc, nhưng bạn nên thêm các thành phần hình ảnh khác, chẳng hạn như biểu trưng hoặc hình minh hoạ. Android có các phương pháp hay nhất dành riêng cho việc thêm đồ hoạ vào ứng dụng cùng với nhiều thư viện để tạo hiệu ứng đồ hoạ hoặc thêm chuyển động.
Thành phần Android được gọi là đối tượng có thể vẽ, một loại tài nguyên được vẽ trên màn hình. Điều này bao gồm nhưng không giới hạn ở bitmap, hình dạng và vectơ.
Khi tạo hình ảnh và đồ hoạ, hãy lưu ý những điều sau:
- Tránh đưa văn bản không thể thay đổi vào các thành phần.
- Sử dụng định dạng vectơ trước tiên bất cứ khi nào có thể.
- Cung cấp thành phần cho bộ chứa giải pháp.
- Cung cấp đủ màn hình giữa hình nền và văn bản.
- Mặc dù Android có thể đạt được nhiều hiệu ứng hình ảnh như độ dốc, màu sắc và làm mờ, nhưng một số hiệu ứng tốn kém hơn về hiệu suất.
- Vectơ ảnh động có thể vẽ cung cấp định dạng có thể mở rộng cho các ảnh động nhỏ trên giao diện người dùng.
Cách xuất tài sản cho Android
- Định dạng tên thành phần bằng chữ thường.
- Đặt các thành phần đơn giản để xuất dưới dạng SVG.
- Thiết lập các hình ảnh phức tạp, chẳng hạn như ảnh, để xuất dưới dạng WebP, PNG, JPG.
- Thiết lập tỷ lệ độ phân giải chính xác như minh hoạ trong bảng sau.
| Kích thước màn hình | Điều chỉnh theo tỷ lệ |
|---|---|
mdpi |
x1 |
hdpi |
x1,5 |
xhdpi |
x2 |
xxhdpi |
x3 |
xxxhdpi |
x4 |
Bạn có thể tuỳ ý chuyển đổi SVG thành vectơ vẽ được (VD) bằng Android Studio. Sắp xếp tài sản vào các thư mục tương ứng với độ phân giải để chuyển giao như trong hình sau. Ví dụ: đưa kích thước màn hình vào tên thư mục.
Loại tài sản
Android hỗ trợ các loại thành phần sau.
Vectơ
Đồ hoạ vectơ là một định dạng không tổn hao, có nghĩa là đồ hoạ này không làm mất thông tin hình ảnh khi được điều chỉnh theo tỷ lệ. Vectơ bao gồm các điểm toán học được lấp đầy để tạo hình ảnh.
Định dạng vectơ
Android hỗ trợ các định dạng hình ảnh vectơ sau: SVG và vectơ vẽ được.
Vectơ vẽ được trông tương tự như SVG nhưng dựa trên XML. Các API này cũng hỗ trợ nhiều thuộc tính, chẳng hạn như độ dốc. Để biết thêm thông tin về những thành phần được hỗ trợ, hãy xem VectorDrawable. Bạn có thể chuyển đổi SVG thành vectơ vẽ được thông qua
Vector Asset Studio.
Trường hợp sử dụng
Do kích thước nhỏ, tốt nhất bạn nên tạo biểu tượng bằng định dạng vectơ. Bạn có thể sử dụng Ảnh động vectơ vẽ được để thêm chuyển động vào biểu tượng.
- Hình minh hoạ là các đồ hoạ giúp định hướng người dùng, giải thích khái niệm hoặc thể hiện ý tưởng. Chúng thường thể hiện phong cách thương hiệu.
- Hình minh hoạ chính là yếu tố được nhấn mạnh trong phần còn lại của nội dung, dùng để thiết lập giao diện tổng thể và giải thích thông tin chính.
- Hình minh hoạ điểm có kích thước nhỏ hơn, thường nằm trong cùng dòng và hỗ trợ nội dung xung quanh.
Đường quét
Hình ảnh có tổn hao, hoặc hình ảnh bị mất chi tiết khi thao tác thông qua việc nén hoặc điều chỉnh tỷ lệ, bao gồm các pixel để tạo nên hình ảnh. Đồ hoạ đường quét thường được dùng cho hình ảnh chi tiết, chẳng hạn như ảnh hoặc độ dốc phức tạp. Vì hình ảnh bị mất chi tiết khi được điều chỉnh theo tỷ lệ, hãy xuất nhiều độ phân giải của những hình ảnh này.
Định dạng đường quét
Android hỗ trợ các định dạng hình ảnh đường quét sau: PNG, GIF, JPG, WebP.
Trường hợp sử dụng
Các trường hợp sử dụng bao gồm hình ảnh có nhiều hoạ tiết dẫn đến bảng màu và độ chuyển màu rộng, hoặc hình ảnh có một tập hợp các điểm bezier quá phức tạp. Các trường hợp sử dụng cũng có thể bao gồm thành phần ảnh có mức độ chi tiết cao, chẳng hạn như ảnh sản phẩm, thông tin vị trí, v.v.
Định cỡ
Khi tạo thành phần, hãy lưu ý những điều cần cân nhắc sau đây.
Nhóm độ phân giải
Ứng dụng của bạn phải cung cấp đồ hoạ bitmap dựa trên phạm vi mật độ màn hình hoặc bộ chứa. Hệ điều hành tự động hiển thị đúng đồ hoạ cho thiết bị được đề cập bằng cách sử dụng các bộ chứa này. Đảm bảo đồ hoạ có độ chân thực cao hiển thị trên mọi thiết bị bằng cách cung cấp thành phần cho mỗi bộ chứa.
Khoảng đệm
Biểu tượng và thành phần nhỏ tương tự phải bao gồm khoảng đệm nội tại (tích hợp sẵn) để thành phần đó có đủ không gian đích chạm và đảm bảo kích thước nhất quán.
Tên tệp
Thành phần Android được viết thường và không chứa hậu tố độ phân giải.
Duy trì quy ước đặt tên và cấu trúc nhất quán để sắp xếp các tệp và dự án của bạn. Ví dụ: việc đặt tên cho biểu tượng bằng tiền tố "ic_..." có thể giúp bạn sắp xếp tất cả biểu tượng trong dự án và nhanh chóng xác định các biểu tượng trong quá trình phát triển.
Các thành phần ứng dụng khác
Biểu tượng ứng dụng
Bạn có thể thấy biểu tượng trình chạy trên màn hình chính. Hãy tìm các biểu tượng đơn sắc trong Giao diện người dùng hệ thống, bao gồm cả thông báo đơn sắc, thanh trạng thái và các tiện ích.
Định dạng biểu tượng ứng dụng dưới dạng vectơ vẽ được cho biểu tượng thích ứng và PNG cho các biểu tượng cũ. Để tìm hiểu thêm về cách tạo và xem trước biểu tượng ứng dụng, hãy tham khảo nội dung Thiết kế và xem trước biểu tượng ứng dụng.
Màn hình chờ
Kể từ Android 12, ứng dụng của bạn có thể hiển thị màn hình chờ động làm nổi bật biểu tượng ứng dụng khi ứng dụng đang mở.
Vị trí
Lưu ý cách chia tỷ lệ và định vị hình ảnh trên màn hình. Bạn có thể sử dụng Fit, Cut, FillHeight, FillWidth, FillBounds, Inside và None để đặt tỷ lệ cho hình ảnh.
Bạn cũng có thể cắt hình ảnh theo một hình dạng để tạo thêm hiệu ứng.
Cắt thích ứng
Để hiển thị hình ảnh một cách thích ứng, hãy xác định cách cắt hình ảnh ở các phạm vi điểm ngắt khác nhau. Tại các phạm vi điểm ngắt khác nhau, việc cắt có thể:
- Duy trì một tỷ lệ cố định.
- Hãy thích ứng với nhiều tỷ lệ.
- Duy trì chiều cao cố định của hình ảnh.
Duy trì một tỷ lệ
Kích thước hình ảnh có thể duy trì một tỷ lệ cố định trên các phạm vi điểm ngắt.
Điều chỉnh cho phù hợp với nhiều tỷ lệ
Tỷ lệ hình ảnh có thể thay đổi khi thích ứng với nhiều phạm vi điểm ngắt. Ví dụ: trong hình 9, tỷ lệ hình ảnh thay đổi từ 1:1 đến 16:9 giữa các điểm ngắt.
Chiều cao hình ảnh cố định
Tính năng định kích thước hình ảnh có thể duy trì chiều cao cố định và chiều rộng linh hoạt trên và trong phạm vi điểm ngắt. Hình ảnh duy trì chiều cao cố định trong khi chiều rộng giữa các điểm ngắt là linh hoạt.
Hiệu ứng
Android có nhiều hiệu ứng hình ảnh được tích hợp sẵn. Dưới đây là một số tác động phổ biến:
Hiệu ứng chuyển màu
Trong Compose, hãy dùng Bút vẽ để vẽ nội dung nào đó trên màn hình. Bạn có thể dùng nhiều loại bút vẽ để vẽ hình dạng có màu sắc hoặc độ dốc khác nhau. Sử dụng bút vẽ chuyển màu tích hợp sẵn để đạt được các hiệu ứng chuyển màu khác nhau. Các bút vẽ này cho phép bạn chỉ định danh sách màu mà bạn muốn tạo hiệu ứng chuyển màu.
Bạn có thể dùng bút vẽ chuyển màu cho tính năng chuyển màu nâng cao hơn bằng cách thêm điểm dừng và xếp kề màu, miễn là bạn cung cấp danh sách màu và tỷ lệ phần trăm nơi điểm dừng xuất hiện. Sử dụng vùng chứa hoặc hình dạng để cắt hiệu ứng chuyển màu, tô màu đồng nhất hoặc hình ảnh.
Làm mờ
Áp dụng hiệu ứng làm mờ cho hình ảnh bằng cách sử dụng phương thức Modifier.blur() và cung cấp tỷ lệ làm mờ. Hãy thận trọng khi sử dụng tính năng làm mờ vì chúng có thể ảnh hưởng đến hiệu suất và chỉ có trên các thiết bị chạy Android 12 trở lên. Để biết thêm thông tin, hãy xem bài viết Làm mờ thành phần kết hợp hình ảnh.
Chế độ trộn
Android có khả năng sửa đổi hình ảnh thông qua các thao tác boolean tương tự và các chế độ kết hợp mà bạn có thể tìm thấy trong phần mềm thiết kế, chẳng hạn như hợp nhất hoặc nhân. Để biết thêm thông tin, hãy xem bài viết đối sánh.
Sắc thái màu
Dùng chế độ pha trộn và tô màu nền để phủ màu thành phần. Điều này cho phép bạn có một thành phần duy nhất và áp dụng nhiều màu cho thành phần đó, nhờ đó giảm số lượng thành phần được tạo.
Có chuyển động
Bạn có thể tạo ảnh động theo phương thức lập trình để tạo đồ hoạ chuyển động thay vì tải tệp chuyển động lên. Nhờ đó, bạn có thể linh hoạt hơn và giảm bớt tài nguyên thành phần.
Vectơ ảnh động có thể vẽ cho phép bạn tạo các ảnh động nhỏ trên giao diện người dùng. Nếu không, hãy tìm hiểu thêm về cách tạo ảnh động bằng khung hình chính trong Compose. Để biết thêm thông tin về hiệu ứng hình ảnh, hãy đọc bài viết Tuỳ chỉnh hình ảnh.