Thêm đồ hoạ vectơ nhiều mật độ (Khung hiển thị)

Các khái niệm và cách triển khai Jetpack Compose

Android Studio chứa một công cụ có tên Vector Asset Studio. Công cụ này giúp bạn thêm các biểu tượng Material, cũng như nhập các tệp Đồ hoạ vectơ có thể mở rộng (SVG) và Tài liệu Adobe Photoshop (PSD) vào dự án dưới dạng tài nguyên drawable vector. Việc sử dụng drawable vector thay vì bitmap sẽ giảm kích thước tệp APK của bạn vì có thể đổi kích thước cùng một tệp đó cho các mật độ màn hình khác nhau mà không làm giảm chất lượng hình ảnh. Đối với các phiên bản Android cũ hơn không hỗ trợ vectơ vẽ được, tại thời điểm xây dựng, Vector Asset Studio có thể biến các vectơ vẽ được thành các kích thước bitmap khác nhau cho từng mật độ màn hình.

Giới thiệu công cụ Vector Asset Studio

Vector Asset Studio thêm một đồ họa vectơ vào dự án dưới dạng tệp XML mô tả hình ảnh. Việc duy trì một tệp XML có thể dễ dàng hơn việc cập nhật nhiều đồ hoạ raster ở nhiều độ phân giải.

Android 4.4 (cấp độ API 20) trở xuống không hỗ trợ vectơ vẽ được. Nếu cấp độ API tối thiểu của bạn được đặt ở một trong những cấp API này, bạn có hai lựa chọn khi sử dụng Vector Asset Studio: tạo tệp Đồ hoạ mạng di động (PNG) (mặc định) hoặc sử dụng kỹ thuật tương thích ngược trong AndroidX.

Để đảm bảo khả năng tương thích ngược, Vector Asset Studio tạo hình ảnh đường quét của drawable vector. Các vectơ vẽ được và đường quét của vectơ đó được kết hợp với nhau trong tệp APK. Bạn có thể tham chiếu các vectơ vẽ được dưới dạng Drawable trong mã Java hoặc @drawable trong mã XML; khi ứng dụng của bạn chạy, hình ảnh vectơ hoặc hình ảnh đường quét tương ứng sẽ tự động hiển thị tuỳ thuộc vào cấp độ API.

Khả năng tương thích ngược trong AndroidX

Kỹ thuật này cần phải có AndroidX 1.0 trở lên và Trình bổ trợ Android cho Gradle 3.2 trở lên, và chỉ sử dụng các vectơ vẽ được. Lớp VectorDrawableCompat trong AndroidX cho phép bạn hỗ trợ VectorDrawable trong Android 2.1 (cấp độ API 7) trở lên.

Trước khi sử dụng Vector Asset Studio, bạn phải thêm một câu lệnh vào tệp build.gradle:

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

Bạn cũng phải sử dụng các kỹ thuật lập trình AndroidX để tương thích ngược, chẳng hạn như sử dụng thuộc tính app:srcCompat thay vì thuộc tính android:src cho các vectơ vẽ được. Để biết thêm thông tin, hãy xem bài viết AndroidX.

Thêm vectơ vẽ được vào bố cục

Trong tệp bố cục, bạn có thể đặt bất kỳ tiện ích nào có liên quan đến biểu tượng, chẳng hạn như ImageButton, ImageView, v.v., để trỏ đến một drawable vector. Ví dụ: bố cục sau đây cho thấy một drawable vector được hiển thị trên một nút:

Hình 1 Vectơ vẽ được hiển thị trên một nút trong bố cục.

Cách hiển thị một vectơ vẽ được trên một tiện ích, như trong hình:

  1. Mở một dự án và nhập một vectơ vẽ được.

    Ví dụ này sử dụng dự án Điện thoại/Máy tính bảng do Trình hướng dẫn dự án mới tạo.

  2. Trong chế độ xem Android của cửa sổ Dự án, hãy nhấp đúp vào một tệp XML bố cục, chẳng hạn như content_main.xml.

  3. Nhấp vào thẻ Thiết kế để hiển thị Layout Editor.

  4. Kéo tiện ích ImageButton từ cửa sổ Bảng khung hiển thị lên Layout Editor.

  5. Trong hộp thoại Tài nguyên, hãy chọn Drawable trong ngăn bên trái, rồi chọn drawable vector mà bạn đã nhập. Nhấp vào Ok.

    Vectơ vẽ được xuất hiện trên ImageButton trong bố cục.

  6. Để thay đổi màu của hình ảnh thành màu nhấn được xác định trong giao diện, trong cửa sổ Thuộc tính, hãy tìm thuộc tính sắc thái màu rồi nhấp vào … .

  7. Trong hộp thoại Tài nguyên, hãy chọn Màu trong ngăn bên trái, sau đó chọn colorAccent. Nhấp vào Ok.

    Màu của hình ảnh sẽ đổi thành màu nhấn trong bố cục.

Nếu dự án sử dụng AndroidX, mã ImageButton sẽ tương tự như mã sau:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

Nếu dự án không sử dụng AndroidX, mã drawable vector sẽ là android:src="@drawable/ic_build_black_24dp".

Tham chiếu đến một vectơ vẽ được trong mã

Thông thường, bạn có thể tham chiếu đến một tài nguyên drawable vector theo cách chung trong mã. Đồng thời, khi ứng dụng của bạn chạy, ảnh vectơ hoặc đường quét tương ứng sẽ tự động hiển thị tuỳ thuộc vào cấp độ API:

  • Trong hầu hết trường hợp, bạn có thể tham chiếu tới các vectơ vẽ được dưới dạng @drawable trong mã XML hoặc Drawable trong mã Java.

    Ví dụ: mã XML bố cục sau đây áp dụng hình ảnh cho một chế độ xem:

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:src="@drawable/myimage" />

    Mã 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ớp Context, á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 AndroidX (ngay cả khi bạn không có câu lệnh vectorDrawables.useSupportLibrary = true trong tệp build.gradle), bạn cũng có thể tham chiếu đến một drawable vector bằng câu lệnh app:srcCompat. Ví dụ:

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  app:srcCompat="@drawable/myimage" />

  • Đôi khi, bạn có thể cần nhập tài nguyên drawable vào loại chính xác của tài nguyên đó, chẳng hạn như khi bạn cần sử dụng các tính năng cụ thể của loại VectorDrawable. Để làm điều này, bạn có thể sử dụng mã như sau:

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

Bạn chỉ có thể truy cập các tài nguyên vectơ vẽ được từ chuỗi chính.

Đối với Android 5.0 (cấp độ API 21) trở lên, bạn có thể dùng lớp AnimatedVectorDrawable để tạo ảnh động cho các thuộc tính của lớp VectorDrawable. Với AndroidX, bạn có thể sử dụng lớp AnimatedVectorDrawableCompat để tạo ảnh động cho lớp VectorDrawable cho Android 3.0 (cấp độ API 11) trở lên. Để biết thêm thông tin, hãy xem phần Tạo ảnh động cho đồ hoạ có thể vẽ được.