Trang này có thông tin về cách tạo và sử dụng biểu tượng ứng dụng dành riêng cho bố cục dựa trên Khung hiển thị. Để biết thêm thông tin toàn diện về cách tạo biểu tượng ứng dụng, hãy xem bài viết Tạo biểu tượng ứng dụng. Bài viết này đề cập đến khung giao diện người dùng mà chúng tôi đề xuất.
Tạo biểu tượng thẻ hoặc thanh thao tác
Sử dụng Image Asset Studio để tạo thanh thao tác và biểu tượng thẻ cho bố cục dựa trên Khung hiển thị.
Biểu tượng thanh thao tác là các phần tử đồ hoạ được đặt trong thanh thao tác và đại diện cho từng mục hành động. Hãy xem các bài viết Thêm và xử lý các thao tác, Thanh ứng dụng – Thiết kế Material Design{:.external} và Thiết kế thanh thao tác để biết thêm thông tin.
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. Hãy xem phần Tạo chế độ xem vuốt bằng thẻ và Thẻ – Material Design để biết thêm thông tin.
Image Asset Studio sẽ đặt các biểu tượng vào đúng vị trí trong thư mục res/drawable-<density>/.
Bạn nên sử dụng kiểu thiết kế Material Design cho thanh thao tác và biểu tượng thẻ, ngay cả khi bạn hỗ trợ các phiên bản Android cũ. Sử dụng appcompat và các thư viện hỗ trợ khác để phân phối giao diện người dùng thiết kế Material Design cho các phiên bản nền tảng cũ.
Thay thế cho Image Asset Studio, bạn có thể sử dụng Vector Asset Studio để tạo thanh thao tác và biểu tượng thẻ. Vectơ vẽ được thích hợp để dùng cho các biểu tượng đơn giản và có thể làm giảm kích thước của ứng dụng.
Sau khi mở Image Asset Studio, bạn có thể thêm biểu tượng thẻ hoặc thanh thao tác bằng cách làm theo những bước sau:
- Trong trường Loại biểu tượng, hãy chọn Biểu tượng thẻ và thanh thao tác.
Chọn Loại tài sản, sau đó chỉ định tài sản trong trường bên dưới:
Trong trường Hình mẫu, hãy nhấp vào nút.
Trong hộp thoại Chọn biểu tượng, hãy chọn một biểu tượng quan trọng rồi nhấp vào OK.
Trong trường Đường dẫn, hãy chỉ định đường dẫn và tên tệp của hình ảnh. Nhấp vào ... để sử dụng hộp thoại.
Trong trường Văn bản, hãy nhập một chuỗi văn bản và chọn một phông chữ.
Biểu tượng này xuất hiện trong khu vực Tài sản nguồn ở bên phải và trong khu vực xem trước ở cuối trình hướng dẫn.
(Không bắt buộc) Thay đổi tên và các tuỳ chọn hiển thị:
Tên – Nếu bạn không muốn sử dụng tên mặc định, hãy nhập tên mới. Nếu tên tài nguyên đó đã tồn tại trong dự án, biểu thị bằng một lỗi ở cuối trình hướng dẫn, thì tên đó sẽ bị ghi đè. Tên này chỉ có thể chứa các ký tự viết thường, dấu gạch dưới và chữ số.
Cắt bỏ – Để điều chỉnh lề giữa đồ hoạ biểu tượng và đường viền trong nội dung nguồn, hãy chọn Có. Thao tác này sẽ xoá không gian trong suốt mà vẫn giữ nguyên tỷ lệ khung hình. Để giữ nguyên nội dung nguồn, hãy chọn Không.
Khoảng đệm – Nếu bạn muốn điều chỉnh khoảng đệm của thành phần nguồn ở cả bốn cạnh, hãy di chuyển thanh trượt. Chọn một giá trị nằm trong khoảng từ -10% đến 50%. Nếu bạn cũng chọn Cắt bỏ, thì tính năng cắt bỏ sẽ diễn ra trước.
Giao diện – Chọn HOLO_LIGHT hoặc HOLO_DARK. Hoặc để chỉ định màu trong hộp thoại Chọn màu, hãy chọn TUỲ CHỈNH rồi nhấp vào trường Màu tuỳ chỉnh.
Image Asset Studio tạo biểu tượng trong một hình vuông trong suốt để có một khoảng đệm ở các cạnh. Khoảng đệm cung cấp đủ không gian cho hiệu ứng biểu tượng bóng đổ tiêu chuẩn.
Nhấp vào Tiếp theo.
Thay đổi tuỳ ý thư mục tài nguyên:
- Thư mục Res – Chọn nhóm tài nguyên mà bạn muốn thêm thành phần hình ảnh: src/main/res, src/debug/res, src/release/res hoặc nhóm tài nguyên do người dùng xác định. Nhóm tài nguyên chính áp dụng cho tất cả các biến thể bản dựng, bao gồm cả bản gỡ lỗi và bản phát hành. Các nhóm tài nguyên gỡ lỗi và phát hành ghi đè nhóm tài nguyên chính và áp dụng cho một phiên bản của một bản dựng. Bộ nguồn gỡ lỗi chỉ dùng để gỡ lỗi. Để xác định một nhóm tài nguyên mới, hãy chọn Tệp > Cấu trúc dự án > ứng dụng > Loại bản dựng. Ví dụ: bạn có thể xác định một tập hợp nguồn beta và tạo phiên bản của biểu tượng bao gồm văn bản "BETA" ở góc dưới cùng bên phải. Để biết thêm thông tin, hãy xem phần Định cấu hình biến thể bản dựng.
Vùng Output Directories (Thư mục đầu ra) hiển thị hình ảnh và các thư mục mà chúng sẽ xuất hiện trong chế độ xem Project Files (Tệp dự án) của cửa sổ Project (Dự án).
Nhấp vào Hoàn tất.
Image Asset Studio sẽ thêm hình ảnh trong các thư mục có thể kéo cho các mật độ khác nhau.
Tham chiếu đến một tài nguyên hình ảnh trong mã
Thông thường, bạn có thể tham chiếu đến một tài nguyên hình ảnh theo cách chung trong mã và khi ứng dụng của bạn chạy, hình ảnh tương ứng sẽ tự động hiển thị tuỳ thuộc vào thiết bị:
Trong hầu hết trường hợp, bạn có thể tham chiếu các tài nguyên hình ảnh dưới dạng
@drawabletrong mã XML hoặcDrawabletrong mã Java.Ví dụ: mã XML bố cục sau đây hiển thị đối tượng có thể vẽ trong
ImageView:<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/myimage" />Mã Java sau đây truy xuất hình ảnh dưới dạng
Drawable:Kotlin
val drawable = resources.getDrawable(R.drawable.myimage, theme)
Java
Resources res = getResources(); Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());
Phương thức
getResources()nằm trong lớpContext, áp dụng cho các đối tượng giao diện người dùng, chẳng hạn như hoạt động, mảnh, bố cục, khung hiển thị, v.v.Nếu ứng dụng của bạn sử dụng Thư viện hỗ trợ, bạn có thể tham chiếu đến một tài nguyên hình ảnh trong mã XML bằng một câu lệnh
app:srcCompat. Ví dụ:<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" app:srcCompat="@drawable/myimage" />
Bạn chỉ có thể truy cập vào tài nguyên hình ảnh từ chuỗi chính.
Sau khi có tài nguyên hình ảnh trong thư mục res/ của dự án, bạn có thể tham chiếu đến tài nguyên đó từ mã Java hoặc bố cục XML bằng mã tài nguyên.
Mã Java sau đây đặt ImageView để sử dụng tài nguyên drawable/myimage.png:
Kotlin
findViewById<ImageView>(R.id.myimageview).apply { setImageResource(R.drawable.myimage) }
Java
ImageView imageView = (ImageView) findViewById(R.id.myimageview); imageView.setImageResource(R.drawable.myimage);
Hãy xem phần Truy cập vào tài nguyên ứng dụng của bạn để biết thêm thông tin.