Đ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 kẻ và đường cong cùng với thông tin màu liên quan.
- 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ị. Đây là những tính năng lý tưởng để sử dụng trong các ứng dụng Android, vì tính năng này có thể giúp giảm kích thước của 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 rồi chọn New > Vector Asset (Mới > Thành phần vectơ). Bạn cũng có thể nhập tệp SVG vào Android Studio dưới dạng 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 kẻ và đường cong cùng với thông tin màu liên quan. Ưu điểm chính của việc sử dụng vectơ vẽ được là khả năng có thể mở rộng hình ảnh. Bạn có thể điều chỉnh tỷ lệ kích thước này mà không làm giảm chất lượng hiển thị, tức là có thể đổi kích thước của cùng một tệp cho nhiều mật độ màn hình mà không làm giảm chất lượng hình ảnh.
Điều này giúp giảm kích thước tệp APK và giúp nhà phát triển ít phải bảo trì hơn. Bạn cũng có thể dùng ảnh vectơ cho ảnh động bằng cách dùng nhiều tệp XML thay vì nhiều ảnh cho từng độ phân giải hiển thị.
Trang này và video dưới đây 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 các tệp SVG sang định dạng vectơ vẽ được, như mô tả trong phần 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ợ các vectơ vẽ được với VectorDrawable
và AnimatedVectorDrawable
. Tuy nhiên, bạn có thể hỗ trợ các phiên bản cũ hơn với thư viện hỗ trợ Android, thư viện cung cấp các lớ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 hệ phân cấp dạng cây, bao gồm các đối tượng path
và group
.
Mỗi path
chứa hình dạng đường viền của đối tượng và group
chứa thông tin chi tiết để biến đổi. Mọi đường dẫn đều được vẽ theo cùng thứ tự xuất hiện trong tệp XML.
Công cụ Vector Asset Studio cung cấp một cách đơn giản để thêm đồ họa vectơ vào dự án dưới dạng tệp XML.
XML ví dụ
Dưới đây là tệp XML VectorDrawable
mẫu kết xuất hình ảnh 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 hiển thị hình ảnh sau:
Giới thiệu về lớp AnimatedVectorDrawable
AnimatedVectorDrawable
thêm ảnh động vào các thuộc tính của đồ hoạ vectơ. Bạn có thể xác định một đồ hoạ vectơ động dưới dạng 3 tệp tài nguyê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 cách tiếp cận để hiểu rõ hơn: Nhiều tệp XML và Một tệp XML duy nhất.
Nhiều tệp XML
Trong 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, đường dẫn mục tiêu và nhóm để tạo ảnh động, các thuộc tính và ảnh động được xác định là đố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 đồ 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 hiệu ứng chuyển động được dùng trong tệp XML của AnimatedVectorDrawable:
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 duy nhất
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 liên quan thành một tệp XML duy nhất thông qua Định dạng gói XML. Tại thời điểm xây dựng ứng dụng, thẻ aapt
sẽ tạo các tài nguyên riêng biệt và tham chiếu đến các tài nguyên đó trong vectơ ảnh động. Phương pháp này yêu cầu Công cụ xây dựng 24 trở lên và kết quả có khả năng tương thích ngược.
Ví dụ về một tệp XML duy nhất
<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 tương thích ngược của 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 các chức năng fillColor
, fillType
và strokeColor
trong 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
tương ứng.
Android Studio 1.4 ra mắt tính năng hỗ trợ khả năng tương thích giới hạn cho các vectơ vẽ được bằng cách tạo tệp PNG tại thời điểm xây dựng. Tuy nhiên, vectơ vẽ được và vectơ vẽ được ở dạng động hỗ trợ 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ợ, vì vậy bạn có thể sử dụng thư viện này với tất cả các phiên bản nền tảng Android trở về Android 2.1 (API cấp 7 trở lên). Để định cấu hình ứng dụng nhằm sử dụng các thư viện hỗ trợ vectơ, hãy thêm phần tử vectorDrawables
vào tệp build.gradle
trong mô-đun ứng dụng.
Sử dụng đoạn mã sau đây để định cấu hình phần tử vectorDrawables
:
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ể sử dụng VectorDrawableCompat
và AnimatedVectorDrawableCompat
trên tất cả các thiết bị chạy Android 4.0 (API cấp 14) trở lên. Cách Android tải các vectơ vẽ được (không phải mọi địa điểm chấp nhận mã nhận dạng có thể vẽ (chẳng hạn như trong tệp XML) đều hỗ trợ tải các vectơ vẽ được. Gói
android.support.v7.appcompat
đã thêm một số
tính năng để giúp bạn dễ dàng sử dụng các vectơ vẽ được. Trước tiên, khi 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 các đối tượng có thể vẽ trong thời gian chạy, bạn có thể sử dụng phương thức setImageResource()
như trước. Sử dụng AppCompat
và app:srcCompat
là phương thức hiệu quả nhất để tích hợp
các vectơ vẽ được vào ứng dụng của bạn.
Thư viện hỗ trợ 25.4.0 trở lên hỗ trợ các tính năng sau:
- Biến đổi đường dẫn (trình đánh giá PathType) Dùng để biến đổi một đường dẫn thành đường dẫn khác.
- Loại nội suy đường dẫn Dùng để xác định bộ nội suy linh hoạt (đượ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 theo đường dẫn Đối tượng hình học có thể di chuyển xung quanh theo một đường dẫn tuỳ ý như 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 ảnh động cho đồ 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 hiệu ứng chuyển động được dùng trong tệp XML của AnimatedVectorDrawable:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Tệp XML duy nhất
Tệp XML sau đây minh hoạ phương pháp sử dụng một tệp XML duy nhất để tạo ảnh động cho đồ hoạ vectơ. Tại thời điểm xây dựng ứng dụng, thẻ aapt
sẽ tạo các tài nguyên riêng biệt và tham chiếu đến các tài nguyên đó trong vectơ ảnh động. Phương pháp này yêu cầu Công cụ xây dựng 24 trở lên và kết quả có khả năng tương thích ngược.
Ví dụ về một tệp XML duy nhất 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>