Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Thêm đồ hoạ vectơ nhiều mật độ

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.

Để sử dụng các đối tượng có thể vẽ dạng vectơ với Jetpack Compose, bạn phải đặt cấp độ API tối thiểu thành Android 5.0 (API cấp 21) trở lên.

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ã Kotlin 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.

Nếu chỉ muốn sử dụng các vectơ vẽ được, bạn có thể dùng AndroidX 1.0.0 trở lên. Kỹ thuật này yêu cầu bạn thay đổi tệp build.gradle trước khi chạy Vector Asset Studio, như mô tả trong phần AndroidX. Lớp VectorDrawableCompat trong AndroidX cho phép bạn hỗ trợ VectorDrawable trong Android 2.1 (cấp độ API 7) trở lên.

Các loại đồ họa vectơ được hỗ trợ

Thông số kỹ thuật của Google Material Design cung cấp các biểu tượng Material mà bạn có thể sử dụng trong các ứng dụng Android. Vector Asset Studio giúp bạn chọn, nhập và định kích thước biểu tượng Material, cũng như xác định độ mờ và chế độ cài đặt phản chiếu Phải sang trái (RTL).

Vector Asset Studio cũng cho phép bạn nhập các tệp SVG và PSD của riêng mình. SVG là một tiêu chuẩn mở dựa trên XML của tổ chức The World Wide Web Consortium (W3C). Định dạng tệp PSD hỗ trợ các tính năng của Adobe Photoshop. Vector Asset Studio hỗ trợ các tiêu chuẩn thiết yếu, nhưng không phải tất cả các tính năng của SVG và PSD. Khi bạn chỉ định một tệp SVG hoặc PSD, Vector Asset Studio sẽ phản hồi ngay lập tức về việc liệu mã đồ hoạ có được hỗ trợ hay không. Công cụ này chuyển đổi tệp đó thành tệp XML chứa mã VectorDrawable. Nếu có thông báo lỗi, bạn nên xác minh rằng drawable vector của bạn xuất hiện như dự kiến. Để biết thêm thông tin về các tính năng PSD được phép, hãy xem phần Hỗ trợ và hạn chế đối với tệp PSD.

Đố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 bài viết Hình ảnh vectơ động trong Compose.

Lưu ý đối với tệp SVG và PSD

Vectơ vẽ được thích hợp cho các biểu tượng đơn giản. Biểu tượng Material là ví dụ tiêu biểu về các loại hình ảnh hoạt động hiệu quả dưới dạng vectơ vẽ được trong ứng dụng. Ngược lại, nhiều biểu tượng chạy ứng dụng có rất nhiều chi tiết nên hoạt động hiệu quả hơn dưới dạng hình ảnh đường quét.

Lần tải đầu của một drawable vector có thể tốn nhiều chu kỳ CPU hơn hình ảnh đường quét tương ứng. Sau đó, việc sử dụng bộ nhớ và hiệu suất của vectơ vẽ được và hình ảnh đường quét là tương tự nhau. Bạn nên giới hạn ảnh vectơ ở mức tối đa là 200 x 200 dp; nếu không, có thể sẽ mất quá nhiều thời gian để vẽ.

Mặc dù drawable vector có hỗ trợ một hoặc nhiều màu, nhưng trong nhiều trường hợp, bạn nên tô đen biểu tượng (android:fillColor="#FF000000"). Khi sử dụng phương pháp này, bạn có thể thêm sắc thái màu vào drawable vector mà bạn đã đặt trong bố cục và màu biểu tượng sẽ thay đổi thành màu phủ. Nếu màu biểu tượng không phải là màu đen, thì màu biểu tượng có thể pha trộn với màu phủ.

Giải pháp cho khả năng tương thích ngược của vectơ vẽ được

Bảng sau đây tóm tắt hai kỹ thuật mà bạn có thể sử dụng cho khả năng tương thích ngược:

Kỹ thuật	Đối tượng có thể vẽ trong APK	Phần tử XML của Vectơ vẽ được	Phiên bản	Cờ dựng	Mã ứng dụng
Kỹ thuật tạo PNG	Vectơ và đường quét	Có hỗ trợ một tập hợp con	SVG: Plugin của Android dành cho Gradle 1.5.0 trở lên PSD: Android Studio 2.2 trở lên	Mặc định	Có hỗ trợ nhiều kỹ thuật lập trình
AndroidX 1.0 trở lên	Vectơ	Hỗ trợ đầy đủ	Trình bổ trợ Android cho Gradle 3.2 trở lên	Yêu cầu có câu lệnh của Thư viện hỗ trợ	Có hỗ trợ một số kỹ thuật lập trình

Kỹ thuật

Đối tượng có thể vẽ trong APK

Phần tử XML của Vectơ vẽ được

Phiên bản

Cờ dựng

Mã ứng dụng

Kỹ thuật tạo PNG

Vectơ và đường quét

Có hỗ trợ một tập hợp con

SVG: Plugin của Android dành cho Gradle 1.5.0 trở lên

PSD: Android Studio 2.2 trở lên

Mặc định

Có hỗ trợ nhiều kỹ thuật lập trình

AndroidX 1.0 trở lên

Vectơ

Hỗ trợ đầy đủ

Trình bổ trợ Android cho Gradle 3.2 trở lên

Yêu cầu có câu lệnh của Thư viện hỗ trợ

Có hỗ trợ một số kỹ thuật lập trình

Việc sử dụng các vectơ vẽ được có thể tạo ra một tệp APK nhỏ hơn nhưng lần tải đầu của vectơ vẽ được có thể mất nhiều thời gian hơn.

Kỹ thuật tạo PNG

Android 5.0 (API cấp độ 21) trở lên có hỗ trợ vectơ vẽ được. Nếu ứng dụng của bạn có cấp độ API tối thiểu thấp hơn, thì Vector Asset Studio sẽ thêm tệp drawable vector vào dự án của bạn; Ngoài ra, tại thời gian xây dựng, Gradle sẽ tạo các hình ảnh đường quét PNG có độ phân giải khác nhau. Gradle tạo mật độ PNG được chỉ định bởi thuộc tính Ngôn ngữ cụ thể của miền (DSL) generatedDensities trong tệp build.gradle.

Đối với Android 5.0 (cấp độ API 21) trở lên, Vector Asset Studio hỗ trợ tất cả các phần tử VectorDrawable. Để tương thích ngược với Android 4.4 (cấp độ API 20) trở xuống, Vector Asset Studio hỗ trợ các phần tử XML sau:

<vector>

android:width
android:height
android:viewportWidth
android:viewportHeight
android:alpha

<group>

android:rotation
android:pivotX
android:pivotY
android:scaleX
android:scaleY
android:translateX
android:translateY

<path>

android:pathData
android:fillColor
android:strokeColor
android:strokeWidth
android:strokeAlpha
android:fillAlpha
android:strokeLineCap
android:strokeLineJoin
android:strokeMiterLimit

Bạn có thể thay đổi mã XML do Vector Asset Studio tạo ra, mặc dù đó không phải là phương pháp hay nhất. Việc thay đổi giá trị trong mã này sẽ không gây ra bất kỳ vấn đề nào, miễn là các giá trị này hợp lệ và tĩnh. Nếu muốn thêm các phần tử XML, bạn phải đảm bảo rằng các phần tử đó được hỗ trợ dựa trên cấp độ API tối thiểu của bạn.

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:

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Chạy Vector Asset Studio

Cách mở Vector Asset Studio:

Trong Android Studio, hãy mở một dự án của ứng dụng Android.
Trong cửa sổ Project (Dự án), hãy chọn Android view (Chế độ xem Android).
Nhấp chuột phải vào thư mục res rồi chọn New > Vector Asset (Mới > Thành phần vectơ).

Một số chế độ xem và thư mục khác của dự án cũng có mục trong trình đơn này.

Vector Asset Studio sẽ xuất hiện.

Hình 1. Vector Asset Studio.
Thay vào đó, nếu hộp thoại Cần Trình bổ trợ Android cho Gradle mới hơn xuất hiện, hãy sửa phiên bản Gradle của bạn như sau:
1. Chọn Tệp > Cấu trúc dự án.
2. Trong hộp thoại Cấu trúc dự án, hãy chọn Dự án.
3. Trong trường Phiên bản trình bổ trợ Android, hãy thay đổi phiên bản Trình bổ trợ Android cho Gradle thành 1.5.0 trở lên rồi nhấp vào OK.
  
  Gradle sẽ đồng bộ hóa dự án này.
4. Trong chế độ xem Android của cửa sổ Dự án, hãy nhấp chuột phải vào thư mục res rồi chọn Mới > Thành phần vectơ.
  
  Vector Asset Studio sẽ xuất hiện.
Tiếp tục với Nhập đồ họa vectơ.

Nhập đồ họa vectơ

Vector Asset Studio giúp bạn nhập tệp đồ hoạ vectơ vào dự án ứng dụng. Thực hiện theo một trong các quy trình sau:

Thêm biểu tượng Material
Nhập tệp SVG hoặc PSD

Thêm biểu tượng Material

Sau khi mở Vector Asset Studio, bạn có thể thêm biểu tượng Material như sau:

Trong Vector Asset Studio, hãy chọn Hình mẫu.
Trong trường Hình mẫu, hãy nhấp vào nút.
Hộp thoại Chọn biểu tượng xuất hiện. Bạn có thể lọc biểu tượng nào hiển thị bằng cách chọn một danh mục biểu tượng trong trình đơn hoặc nhập vào trường tìm kiếm như minh hoạ trong hình 2.

Hình 2. Lọc biểu tượng Material trong Vector Asset Studio.

Chọn một biểu tượng Material rồi nhấp vào OK. Biểu tượng này xuất hiện trong Bản xem trước vectơ vẽ được.
Thay đổi tuỳ ý tên tài nguyên, kích thước, độ mờ và chế độ cài đặt phản chiếu Phải sang trái (RTL):
- Tên – Nhập tên mới nếu bạn không muốn sử dụng tên mặc định. Vector Asset Studio tự động tạo một tên duy nhất (thêm một số vào cuối tên) nếu tên tài nguyên đó đã có trong dự án. Tên này chỉ chứa các ký tự viết thường, dấu gạch dưới và chữ số.
- Ghi đè – Chọn tuỳ chọn này nếu bạn muốn điều chỉnh kích thước của hình ảnh. Khi bạn nhập một kích thước mới, nội dung thay đổi sẽ xuất hiện trong phần xem trước.
  
  Kích thước mặc định là 24 x 24 dp, được xác định trong thông số kỹ thuật Material Design. Bỏ chọn hộp đánh dấu để quay lại kích thước mặc định.
- Độ mờ – Sử dụng thanh trượt để điều chỉnh độ mờ của hình ảnh. Nội dung thay đổi sẽ xuất hiện trong phần xem trước.
- Bật tính năng tự động phản chiếu cho bố cục RTL – Chọn tuỳ chọn này nếu bạn muốn hiển thị hình ảnh phản chiếu khi bố cục là từ phải sang trái, thay vì từ trái sang phải. Ví dụ: một số ngôn ngữ được đọc từ phải sang trái; nếu có biểu tượng mũi tên, thì trong trường hợp này, bạn nên hiển thị hình ảnh phản chiếu của biểu tượng đó. Xin lưu ý rằng nếu đang làm việc với một dự án cũ hơn, bạn cũng có thể cần thêm android:supportsRtl="true" vào tệp kê khai ứng dụng. Tính năng tự động phản chiếu được hỗ trợ trên Android 5.0 (cấp độ API 21) trở lên và thông qua AndroidX.
Nhấp vào Tiếp theo.
Thay đổi tuỳ ý mô-đun và thư mục tài nguyên:
- Thư mục Res – Chọn nhóm tài nguyên nguồn mà bạn muốn thêm drawable vector: src/main/res, src/debug/res, src/release/res hoặc một nhóm tài nguyên nguồ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.
Khu vực Thư mục đầu ra hiển thị drawable vector và thư mục nơi drawable vector đó sẽ xuất hiện.
Nhấp vào Hoàn tất.

Vector Asset Studio sẽ thêm một tệp XML xác định drawable vector cho dự án trong thư mục app/src/main/res/drawable/. Trong chế độ xem Android của cửa sổ Project (Dự án), bạn có thể xem tệp XML vectơ đã tạo trong thư mục drawable (vectơ vẽ được).
Xây dựng dự án.

Nếu cấp độ API tối thiểu là Android 4.4 (API cấp độ 20) trở xuống và bạn chưa bật kỹ thuật AndroidX, thì Vector Asset Studio sẽ tạo tệp PNG. Từ khung hiển thị Project Files (Tệp dự án) của cửa sổ Project (Dự án), bạn có thể xem các tệp PNG và XML đã tạo trong thư mục app/build/generated/res/pngs/debug/.

Bạn không nên chỉnh sửa các tệp đường quét đã tạo này mà thay vào đó hãy làm việc với tệp XML vectơ. Hệ thống xây dựng sẽ tự động tạo lại các tệp đường quét khi cần thiết, do đó bạn không cần phải duy trì những tệp đó.

Nhập tệp SVG hoặc PSD

Sau khi mở Vector Asset Studio, bạn có thể nhập tệp SVG hoặc PSD như sau:

Trong Vector Asset Studio, hãy chọn Tệp cục bộ.

Tệp này phải nằm trên ổ cục bộ. Ví dụ: nếu tệp cục bộ nằm trên mạng, trước tiên, bạn cần tải tệp xuống một ổ cục bộ.
Chỉ định Tệp hình ảnh bằng cách nhấp vào … .

Hình ảnh đó sẽ xuất hiện trong Bản xem trước vectơ vẽ được.

Nếu tệp SVG hoặc PSD chứa các tính năng không được hỗ trợ, thì lỗi sẽ xuất hiện ở cuối Vector Asset Studio, như trong hình 3.

Hình 3. Vector Asset Studio hiển thị một số lỗi.

Nếu thấy lỗi, bạn cần đảm bảo rằng drawable vector đã nhập đó hiển thị đúng cách. Di chuyển qua danh sách để xem lỗi.

Để biết danh sách các phần tử được hỗ trợ, hãy xem Giải pháp khả năng tương thích ngược của vectơ vẽ được. Để biết thêm thông tin về các tệp PSD được phép, hãy xem phần Hỗ trợ và hạn chế đối với tệp PSD.
Thay đổi tuỳ ý tên tài nguyên, kích thước, độ mờ và chế độ cài đặt phản chiếu Phải sang trái (RTL):
- Tên – Nhập tên mới nếu bạn không muốn sử dụng tên mặc định. Vector Asset Studio tự động tạo một tên duy nhất (thêm một số vào cuối tên) nếu tên tài nguyên đó đã có trong dự án. Tên này chỉ chứa các ký tự viết thường, dấu gạch dưới và chữ số.
- Override (Ghi đè) – Chọn tuỳ chọn này nếu bạn muốn điều chỉnh kích thước của hình ảnh. Sau khi bạn chọn ghi đè, kích thước sẽ tự đổi thành kích thước của hình ảnh. Bất cứ khi nào bạn thay đổi kích thước, nội dung thay đổi đó sẽ xuất hiện trong phần xem trước. Kích thước mặc định là 24 x 24 dp, được xác định trong thông số kỹ thuật Material Design.
- Độ mờ – Sử dụng thanh trượt để điều chỉnh độ mờ của hình ảnh. Nội dung thay đổi sẽ xuất hiện trong phần xem trước.
- Bật tính năng tự động phản chiếu cho bố cục RTL – Chọn tuỳ chọn này nếu bạn muốn hiển thị hình ảnh phản chiếu khi bố cục là từ phải sang trái, thay vì từ trái sang phải. Ví dụ: một số ngôn ngữ được đọc từ phải sang trái; nếu có biểu tượng mũi tên, thì trong trường hợp này, bạn nên hiển thị hình ảnh phản chiếu của ngôn ngữ đó. Xin lưu ý rằng nếu đang làm việc với một dự án cũ hơn, bạn có thể cần thêm android:supportsRtl="true" vào tệp kê khai ứng dụng. Tính năng tự động phản chiếu được hỗ trợ trên Android 5.0 (cấp độ API 21) trở lên và AndroidX.
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 drawable vector: src/main/res, src/debug/res, src/release/res hoặc một 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. Nhóm tài nguyê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 nhóm tài nguyên beta và tạo phiên bản của một 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.
Khu vực Thư mục đầu ra hiển thị drawable vector và thư mục nơi drawable vector đó sẽ xuất hiện.
Nhấp vào Hoàn tất.

Vector Asset Studio sẽ thêm một tệp XML xác định drawable vector cho dự án trong thư mục app/src/main/res/drawable/. Trong chế độ xem Android của cửa sổ Project (Dự án), bạn có thể xem tệp XML vectơ đã tạo trong thư mục drawable (vectơ vẽ được).
Xây dựng dự án.

Nếu cấp độ API tối thiểu là Android 4.4 (API cấp độ 20) trở xuống và bạn chưa bật kỹ thuật AndroidX, thì Vector Asset Studio sẽ tạo tệp PNG. Từ khung hiển thị Project Files (Tệp dự án) của cửa sổ Project (Dự án), bạn có thể xem các tệp PNG và XML đã tạo trong thư mục app/build/generated/res/pngs/debug/.

Bạn không nên chỉnh sửa các tệp đường quét đã tạo này mà thay vào đó hãy làm việc với tệp XML vectơ. Hệ thống xây dựng sẽ tự động tạo lại các tệp đường quét khi cần thiết, do đó bạn không cần phải duy trì những tệp đó.

Tham chiếu đến một tài sản vectơ trong Jetpack Compose

Sau khi dùng Vector Asset Studio để thêm một thành phần vào thư mục res/drawable, bạn có thể tham chiếu thành phần đó trong mã của mình.

Trong Jetpack Compose, cách phổ biến nhất để hiển thị vectơ là sử dụng thành phần kết hợp Icon hoặc Image.

Thành phần kết hợp Icon là cách tiêu chuẩn để hiển thị các thành phần đơn sắc, có kích thước nhỏ. Thư viện này cung cấp khả năng hỗ trợ sẵn có cho các nguyên tắc của Material Design, chẳng hạn như áp dụng tính năng nhuộm màu linh hoạt dựa trên giao diện Material 3 và khả năng hỗ trợ tiếp cận tự động thông qua nội dung mô tả.

Dùng API painterResource để cung cấp các thành phần vectơ XML cho thành phần kết hợp:

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

Đối với các vectơ phức tạp và nhiều màu, hãy dùng thành phần kết hợp Image:

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

Đối với các trường hợp phức tạp khác, chẳng hạn như tuỳ chỉnh hình ảnh hoặc tối ưu hoá hiệu suất, hãy xem phần Làm việc với hình ảnh. Để tạo ảnh động cho vectơ, hãy xem phần Hình ảnh vectơ động trong Compose.

Sửa đổi mã XML do Vector Asset Studio tạo

Bạn có thể sửa đổi mã XML drawable vector, nhưng không thể chỉnh sửa PNG và mã XML tương ứng đã tạo vào thời gian xây dựng. Tuy nhiên, bạn không nên thực hiện việc này.

Khi sử dụng kỹ thuật tạo PNG, Vector Asset Studio sẽ đảm bảo rằng drawable vector và PNG khớp nhau và tệp kê khai chứa mã thích hợp. Nếu bạn thêm mã không được hỗ trợ trên Android 4.4 (cấp độ API 20) trở xuống, hình ảnh vectơ và hình ảnh PNG của bạn có thể khác nhau. Bạn cũng cần đảm bảo rằng tệp kê khai chứa mã hỗ trợ các thay đổi của bạn.

Cách sửa đổi tệp XML vectơ khi bạn không sử dụng kỹ thuật AndroidX:

Trong cửa sổ Dự án, hãy nhấp đúp vào tệp XML vectơ đã tạo trong thư mục vectơ vẽ được.

Tệp XML xuất hiện trong cửa sổ trình chỉnh sửa và cửa sổ Xem trước.

Hình 4. Tệp XML vectơ hiển thị trong Trình soạn thảo mã và cửa sổ Xem trước.
Chỉnh sửa mã XML dựa trên nội dung được hỗ trợ bởi cấp độ API tối thiểu:
- Android 5.0 (cấp độ API 21) trở lên – Vector Asset Studio hỗ trợ tất cả các phần tử Drawable và VectorDrawable. Bạn có thể thêm các phần tử XML và thay đổi giá trị. Đối với Jetpack Compose, bạn có thể tải đối tượng vẽ vectơ vào ImageVector để tuỳ chỉnh thêm.
- Android 4.4 (cấp độ API 20) trở xuống – Vector Asset Studio hỗ trợ tất cả các phần tử Drawable và một tập hợp nhỏ các phần tử VectorDrawable. Để biết danh sách, hãy xem Giải pháp khả năng tương thích ngược của vectơ vẽ được. Bạn có thể thay đổi các giá trị trong mã đã tạo và thêm các phần tử XML được hỗ trợ.
Xây dựng dự án và kiểm tra để đảm bảo rằng drawable vector và hình ảnh đường quét tương ứng trông giống nhau.

Hãy nhớ rằng PNG đã tạo có thể hiển thị trong cửa sổ Xem trước khác với trong ứng dụng do các công cụ kết xuất khác nhau và bất kỳ thay đổi nào được thực hiện với drawable vector trước khi có một bản dựng. Nếu bạn thêm mã vào tệp XML vectơ do Vector Asset Studio tạo, thì mọi tính năng không được hỗ trợ trong Android 4.4 (cấp độ API 20) trở xuống sẽ không xuất hiện trong các tệp PNG đã tạo. Do đó, khi thêm mã, bạn phải luôn kiểm tra để đảm bảo rằng các tệp PNG đã tạo khớp với drawable vector. Để thực hiện việc này, bạn có thể nhấp đúp vào tệp PNG trong chế độ xem Tệp dự án của cửa sổ Dự án; lề trái của Trình soạn thảo mã cũng hiển thị hình ảnh PNG khi mã của bạn tham chiếu đến vectơ vẽ được, như trong hình 5.

Hình 5. Hình ảnh PNG hiển thị ở lề trái của Trình soạn thảo mã.

Xoá một vectơ vẽ được khỏi dự án

Cách xoá một vectơ vẽ được khỏi dự án:

Trong cửa sổ Dự án, hãy xoá tệp XML vectơ đã tạo bằng cách chọn tệp và nhấn phím Xoá (hoặc chọn Chỉnh sửa > Xoá).

Hộp thoại Xoá an toàn xuất hiện.
Chọn tuỳ ý các tuỳ chọn để tìm vị trí tệp được sử dụng trong dự án và nhấp vào OK.

Android Studio sẽ xóa tệp này khỏi dự án và ổ đĩa. Tuy nhiên, nếu bạn chọn tìm kiếm những vị trí trong dự án có sử dụng tệp này và tìm thấy một số vị trí sử dụng, thì bạn có thể xem những vị trí đó và quyết định có xoá tệp hay không.
Chọn Xây dựng > Dọn sạch dự án.

Mọi tệp PNG và XML do hệ thống tạo tự động tương ứng với vectơ vẽ được đã xoá sẽ bị gỡ bỏ khỏi dự án và ổ.

Phân phối một ứng dụng có chứa các vectơ vẽ được

Nếu bạn đã sử dụng kỹ thuật AndroidX hoặc cấp độ API tối thiểu của bạn là Android 5.0 (API cấp độ 21) trở lên, thì APK của bạn sẽ chứa các vectơ vẽ được mà bạn đã thêm bằng Vector Asset Studio. Các APK này sẽ nhỏ hơn nếu ảnh vectơ được chuyển đổi thành PNG.

Khi cấp độ API tối thiểu của bạn bao gồm Android 4.4 (API cấp độ 20) trở xuống, đồng thời bạn có các vectơ vẽ được và hình ảnh đường quét tương ứng trong dự án, bạn có hai lựa chọn để phân phối tệp APK:

Tạo một tệp APK bao gồm cả các vectơ vẽ được và các đại diện đường quét tương ứng. Giải pháp này dễ thực hiện nhất.
Tạo nhiều tệp APK riêng biệt cho các cấp độ API. Khi bạn không đưa hình ảnh đường quét tương ứng vào APK cho Android 5.0 (cấp độ API 21) trở lên, tệp APK có thể giảm kích thước đi rất nhiều. Để biết thêm thông tin, hãy xem phần Hỗ trợ nhiều APK.

Hỗ trợ và hạn chế đối với tệp PSD

Vector Asset Studio không hỗ trợ tất cả các tính năng của tệp PSD. Danh sách sau đây tóm tắt các đặc điểm PSD được hỗ trợ và không được hỗ trợ, cũng như một số chi tiết chuyển đổi.

Tài liệu

Hỗ trợ:

Chế độ màu PSD của bitmap, thang màu xám, được lập chỉ mục, RGB, LaB hoặc CMYK.
Chiều sâu màu 8, 16 hoặc 32 bit.

Chi tiết chuyển đổi:

Kích thước tài liệu PSD trở thành kích thước drawable vector và kích thước khung nhìn.

Không hỗ trợ:

Chế độ màu PSD của bộ đôi hoặc đa kênh.

Hình dạng

Hỗ trợ:

Mặt nạ cắt, nếu đế cắt có hình dạng khác.
Các thao tác hình dạng, bao gồm hợp nhất/thêm, giao nhau, trừ và loại trừ.

Không hỗ trợ:

Quy tắc tô màu nền chẵn lẻ được các hình dạng Photoshop sử dụng. Trong Android 6.0 (API cấp độ 23) trở xuống, các vectơ vẽ được chỉ hỗ trợ quy tắc tô màu nền khác không. Trong các hình dạng tự giao nhau, giới hạn này có thể dẫn đến sự khác biệt về kết xuất giữa tệp PSD và vectơ vẽ được tương ứng. Để khắc phục sự cố này, hãy thêm android:fillType="evenOdd" vào hình dạng trong vectơ vẽ được. Ví dụ:
```
<vector xmlns:android="https://schemas.android.com/apk/res/android"
  android:viewportHeight="168"
  android:height="24dp"
  android:viewportWidth="209"
  android:width="24dp">

  <path
      android:fillAlpha="1.0"
      android:fillColor="#000000"
      android:fillType="evenOdd"
      android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
</vector>
```

Nét vẽ và màu nền

Hỗ trợ:

Nét vẽ, bao gồm màu sắc, độ mờ, chiều rộng, dấu nối, chữ viết hoa, dấu gạch ngang và căn chỉnh.
Màu nền và nét vẽ đậm.
Nét vẽ và màu nền được chỉ định dưới dạng RGB, LaB hoặc CMYK.

Chi tiết chuyển đổi:

Nếu nét bị gạch ngang, được cắt bớt bằng đế cắt hoặc sử dụng cách căn chỉnh khác với trung tâm, Vector Asset Studio sẽ chuyển đổi nét thành hình tô màu trong drawable vector.

Không hỗ trợ:

Tô màu nền và nét không phải màu đậm, chẳng hạn như chuyển tiếp.

Độ mờ

Hỗ trợ:

Các lớp hình dạng có độ mờ bằng 0.

Chi tiết chuyển đổi:

Vector Asset Studio nhân độ mờ màu nền với độ mờ của lớp để tính alpha màu nền.
Công cụ này nhân độ mờ của đế cắt (nếu có đế cắt) với alpha màu nền để tính toán alpha màu nền cuối cùng.
Công cụ này nhân độ mờ nét vẽ với độ mờ lớp để tính toán alpha nét vẽ.
Công cụ này nhân độ mờ của đế cắt (nếu có đế cắt) với alpha nét vẽ để tính toán alpha nét vẽ cuối cùng.

Lớp

Hỗ trợ:

Bất kỳ lớp hình dạng nào hiển thị.

Chi tiết chuyển đổi:

Vector Asset Studio lưu giữ tên của các lớp trong tệp drawable vector.

Không hỗ trợ:

Hiệu ứng lớp.
Điều chỉnh và lớp văn bản.
Chế độ trộn (bỏ qua).

Hỗ trợ và hạn chế đối với tệp SVG

Vector Asset Studio không hỗ trợ tất cả các tính năng của tệp SVG. Phần sau đây tóm tắt các tính năng được hỗ trợ và không được hỗ trợ khi công cụ này chuyển đổi tệp SVG thành VectorDrawable, cùng với các thông tin chi tiết khác về chuyển đổi.

Tính năng được hỗ trợ

VectorDrawable hỗ trợ tất cả tính năng của Tiny SVG 1.2, ngoại trừ văn bản.

Hình dạng

VectorDrawable hỗ trợ đường dẫn SVG.

Công cụ này chuyển đổi các hình dạng ban đầu như hình tròn, hình vuông và đa giác thành đường dẫn.

Phép biến đổi

Công cụ này hỗ trợ các ma trận biến đổi và áp dụng trực tiếp các ma trận này cho các đường dẫn con.

Nhóm

Công cụ này hỗ trợ các phần tử nhóm để dịch, chia tỷ lệ và xoay. Nhóm không hỗ trợ thuộc tính độ mờ.

Công cụ này cũng áp dụng bất kỳ tùy chỉnh định kiểu hoặc độ mờ cho nhóm nào cho các đường dẫn con.

Màu nền và nét vẽ

Bạn có thể tô màu nền và vẽ nét cho các đường dẫn bằng cách sử dụng các màu đậm hoặc chuyển màu (tuyến tính, hướng tâm hoặc góc). Chỉ hỗ trợ nét vẽ ở giữa. Không hỗ trợ chế độ trộn. Không hỗ trợ đường dẫn nét đứt.

Mặt nạ

Công cụ này hỗ trợ một mặt nạ cắt cho mỗi nhóm.

Các tính năng mà trình nhập SVG không hỗ trợ

Mọi tính năng không có trong mục Tính năng được hỗ trợ trước đó đều không được hỗ trợ. Những tính năng không được hỗ trợ đáng chú ý bao gồm:

Hiệu ứng bộ lọc: các hiệu ứng như bóng đổ, làm mờ và ma trận màu không được hỗ trợ.
Văn bản: nên chuyển đổi văn bản thành hình dạng bằng các công cụ khác.
Màu nền mẫu

Tài nguyên khác

Để biết thêm thông tin về đồ hoạ vectơ, hãy xem các tài nguyên bổ sung sau đây:

Tài liệu

Xem nội dung

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

Thêm đồ hoạ vectơ nhiều mật độ Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

Các loại đồ họa vectơ được hỗ trợ

Lưu ý đối với tệp SVG và PSD

Giải pháp cho khả năng tương thích ngược của vectơ vẽ được

Kỹ thuật tạo PNG

AndroidX

Kotlin

Groovy

Chạy Vector Asset Studio

Nhập đồ họa vectơ

Thêm biểu tượng Material

Nhập tệp SVG hoặc PSD

Tham chiếu đến một tài sản vectơ trong Jetpack Compose

Sửa đổi mã XML do Vector Asset Studio tạo

Xoá một vectơ vẽ được khỏi dự án

Phân phối một ứng dụng có chứa các vectơ vẽ được

Hỗ trợ và hạn chế đối với tệp PSD

Tài liệu

Hình dạng

Nét vẽ và màu nền

Độ mờ

Lớp

Hỗ trợ và hạn chế đối với tệp SVG

Tính năng được hỗ trợ

Hình dạng

Phép biến đổi

Nhóm

Màu nền và nét vẽ

Mặt nạ

Các tính năng mà trình nhập SVG không hỗ trợ

Tài nguyên khác

Tài liệu

Xem nội dung

Thêm đồ hoạ vectơ nhiều mật độ