Điểm chính
- Vectơ vẽ được là một đồ hoạ vectơ được xác định trong tệp XML dưới dạng một tập hợp các điểm, đường và cùng với thông tin màu có liên quan.
- Các vectơ vẽ được có thể mở rộng, nghĩa là bạn có thể đổi kích thước mà không làm giảm chất lượng hiển thị. Điều này khiến đây trở nên lý tưởng để sử dụng trong các ứng dụng Android vì chúng có thể giúp giảm kích thước của ứng dụng tệp APK và cải thiện hiệu suất.
- Bạn có thể tạo các vectơ vẽ được trong Android Studio bằng cách nhấp chuột phải vào thư mục có thể vẽ trong dự án và chọn New (Mới) > Tài sản vectơ. Bạn cũng có thể nhập tệp SVG vào Android Studio dưới dạng các vectơ vẽ được.
Giới thiệu
VectorDrawable
là một đồ hoạ vectơ được xác định
trong tệp XML dưới dạng một tập hợp các điểm, đường và đường cong cùng với
thông tin màu. Ưu điểm chính của việc sử dụng vectơ vẽ được là hình ảnh
khả năng có thể mở rộng. Bạn có thể điều chỉnh tỷ lệ kích thước mà không làm giảm chất lượng hiển thị, tức là
cùng một tệp được đổi kích thước cho nhiều mật độ màn hình mà không làm giảm chất lượng hình ảnh.
Nhờ đó, các tệp APK có kích thước nhỏ hơn và ít phải bảo trì hơn cho nhà phát triển. Bạn cũng có thể
sử dụng ảnh vectơ cho ảnh động bằng cách sử dụng nhiều tệp XML thay vì nhiều tệp
hình ảnh cho từng độ phân giải màn hình.
Trang này và video bên dưới cung cấp thông tin tổng quan về cách tạo vectơ vẽ được trong XML. Android Studio cũng có thể chuyển đổi tệp SVG sang định dạng vectơ vẽ được, như mô tả trong bằng cách sử dụng Thêm đồ hoạ vectơ nhiều mật độ.
Android 5.0 (API cấp độ 21) là phiên bản đầu tiên chính thức hỗ trợ vectơ vẽ được bằng
VectorDrawable
và AnimatedVectorDrawable
, nhưng
bạn có thể hỗ trợ các phiên bản cũ hơn bằng thư viện hỗ trợ Android, cung cấp
VectorDrawableCompat
và
AnimatedVectorDrawableCompat
.
Giới thiệu về lớp VectorDrawable
VectorDrawable
xác định một đối tượng có thể vẽ tĩnh
. Tương tự như định dạng SVG, mỗi đồ hoạ vectơ được định nghĩa là một cây
hệ thống phân cấp này, bao gồm các đối tượng path
và group
.
Mỗi path
chứa hình học của đường viền của đối tượng và
group
chứa thông tin chi tiết về phép biến đổi. Tất cả các đường dẫn đã được vẽ
theo cùng thứ tự xuất hiện trong tệp XML.
![](https://developer.android.google.cn/static/images/guide/topics/graphics/vectorpath.png?authuser=0000&hl=vi)
Hình 1. Hệ phân cấp mẫu của một thành phần vectơ vẽ được
Thành phần vectơ công cụ studio mang đến một cách đơn giản để thêm đồ hoạ vectơ vào dự án dưới dạng tệp XML.
XML mẫu
Dưới đây là tệp XML VectorDrawable
mẫu kết xuất hình ảnh
của pin ở chế độ sạc.
<!-- res/drawable/battery_charging.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="rotationGroup" android:pivotX="10.0" android:pivotY="10.0" android:rotation="15.0" > <path android:name="vect" android:fillColor="#FF000000" android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z" android:fillAlpha=".3"/> <path android:name="draw" android:fillColor="#FF000000" android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/> </group> </vector>
XML này kết xuất hình ảnh sau đây:
![](https://developer.android.google.cn/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=0000&hl=vi)
Giới thiệu về lớp AnimatedVectorDrawable
AnimatedVectorDrawable
thêm ảnh động vào các thuộc tính của vectơ
hình ảnh. Bạn có thể xác định một đồ hoạ vectơ động dưới dạng ba thành phần riêng biệt
hoặc dưới dạng một tệp XML xác định toàn bộ đối tượng có thể vẽ. Hãy
xem xét cả hai phương pháp để hiểu rõ hơn: Nhiều tệp XML và Đơn
Tệp XML.
Nhiều tệp XML
Bằng cách sử dụng phương pháp này, bạn có thể xác định 3 tệp XML riêng biệt:
- Tệp XML
VectorDrawable
. -
Tệp XML
AnimatedVectorDrawable
xác địnhVectorDrawable
mục tiêu, các đường dẫn và nhóm mục tiêu để tạo ảnh động, các thuộc tính và ảnh động được xác định dưới dạng đối tượngObjectAnimator
hoặc Đối tượngAnimatorSet
. - Tệp XML của trình tạo ảnh động.
Ví dụ về nhiều tệp XML
Các tệp XML sau đây minh hoạ ảnh động của một đồ hoạ vectơ.
- Tệp XML của VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- Tệp XML của AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="vectorPath" android:animation="@anim/path_morph" /> </animated-vector>
- Các tệp XML của Trình tạo ảnh động được dùng trong XML của AnimatedVectorDrawable
tệp:
rotation.xml
vàpath_morph.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set>
Tệp XML đơn
Bằng cách sử dụng phương pháp này, bạn có thể hợp nhất các tệp XML có liên quan thành một tệp
XML thông qua Định dạng gói XML. Tại thời điểm tạo ứng dụng,
Thẻ aapt
tạo ra các tài nguyên riêng biệt và tham chiếu đến những tài nguyên đó trong
vectơ động. Phương pháp này yêu cầu Công cụ xây dựng 24 trở lên và
tương thích ngược.
Ví dụ về một tệp XML đơn lẻ
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target> </animated-vector>
Giải pháp khả năng tương thích ngược của các vectơ vẽ được
Để hỗ trợ vectơ vẽ được và vectơ vẽ được ở dạng động trên các thiết bị chạy phiên bản nền tảng thấp hơn
Android 5.0 (API cấp 21) hoặc sử dụng fillColor
, fillType
và
strokeColor
chức năng dưới Android 7.0 (API cấp 24),
VectorDrawableCompat
và AnimatedVectorDrawableCompat
có sẵn thông qua hai thư viện hỗ trợ:
support-vector-drawable
và animated-vector-drawable
,
.
Android Studio 1.4 ra mắt tính năng hỗ trợ khả năng tương thích có giới hạn cho vectơ
đối tượng có thể vẽ bằng cách tạo tệp PNG tại thời điểm dựng. Tuy nhiên, vectơ vẽ được
và hỗ trợ vectơ vẽ được ở dạng động. Các thư viện cung cấp cả tính linh hoạt và
khả năng tương thích rộng — đây là một thư viện hỗ trợ nên bạn có thể sử dụng nó với tất cả
Các phiên bản của nền tảng Android trở lại Android 2.1 (API cấp 7 trở lên). Để định cấu hình
để dùng các thư viện hỗ trợ vectơ, hãy thêm vectorDrawables
vào tệp build.gradle
trong mô-đun ứng dụng.
Hãy sử dụng đoạn mã sau để định cấu hình vectorDrawables
phần tử:
Groovy
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Groovy
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities = [] } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters "--no-version-vectors" } }
Kotlin
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities() } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters("--no-version-vectors") } }
Bạn có thể dùng VectorDrawableCompat
và
AnimatedVectorDrawableCompat
cho tất cả
trên thiết bị chạy Android 4.0 (API cấp 14) trở lên. Cách Android
tải đối tượng có thể vẽ, không phải ở mọi nơi chấp nhận mã nhận dạng có thể vẽ, chẳng hạn như trong XML
sẽ hỗ trợ tải các vectơ vẽ được. Chiến lược phát hành đĩa đơn
Gói android.support.v7.appcompat
đã thêm một số
để dễ dàng sử dụng các vectơ vẽ được. Trước tiên, khi bạn sử dụng
Gói android.support.v7.appcompat
có
ImageView
hoặc có các lớp con như
ImageButton
và
FloatingActionButton
, bạn có thể
sử dụng thuộc tính app:srcCompat
mới để tham chiếu các vectơ vẽ được
cũng như bất kỳ đối tượng có thể vẽ nào khác có sẵn cho android:src
:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Để thay đổi đối tượng có thể vẽ trong thời gian chạy, bạn có thể sử dụng
setImageResource()
như trước đây. Đang dùng AppCompat
và app:srcCompat
là phương pháp rõ ràng nhất để tích hợp
các vectơ vẽ được vào ứng dụng của mình.
Thư viện hỗ trợ 25.4.0 trở lên hỗ trợ các tính năng sau:
- Định dạng đường dẫn (trình đánh giá PathType) Được dùng để biến đổi một đường dẫn thành một đường dẫn khác.
- Nội suy đường dẫn Dùng để xác định giá trị linh hoạt bộ nội suy (được biểu thị dưới dạng đường dẫn) thay vì bộ nội suy do hệ thống xác định như bộ nội suy tuyến tính.
Thư viện hỗ trợ 26.0.0-beta1 trở lên hỗ trợ các tính năng sau:
- Di chuyển dọc theo đường dẫn Đối tượng hình học có thể di chuyển xung quanh, dọc theo đường dẫn tuỳ ý dưới dạng một phần của ảnh động.
Ví dụ về nhiều tệp XML sử dụng thư viện hỗ trợ
Các tệp XML sau đây minh hoạ phương pháp sử dụng nhiều tệp XML để tạo hiệu ứng đồ hoạ vectơ.
- Tệp XML của VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- Tệp XML của AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> </animated-vector>
- Tệp XML của Trình tạo ảnh động được dùng trong XML của AnimatedVectorDrawable
tệp:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Tệp XML đơn
Tệp XML sau đây minh hoạ phương pháp sử dụng một tệp XML đơn lẻ
để tạo hiệu ứng đồ hoạ vectơ. Tại thời điểm tạo ứng dụng,
Thẻ aapt
tạo ra các tài nguyên riêng biệt và tham chiếu đến những tài nguyên đó trong
vectơ động. Phương pháp này yêu cầu Công cụ xây dựng 24 trở lên và
tương thích ngược.
Ví dụ về tệp XML đơn lẻ sử dụng thư viện hỗ trợ
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="64dp" android:height="64dp" android:viewportWidth="600" android:viewportHeight="600"> <group android:name="rotationGroup" android:pivotX="300" android:pivotY="300" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector> </aapt:attr> <target android:name="rotationGroup"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" android:duration="6000" android:interpolator="@android:interpolator/fast_out_slow_in" /> </aapt:attr> </target> </animated-vector>