Key points
- Çekilebilir vektör, XML dosyasında ilişkili renk bilgileriyle birlikte noktalar, çizgiler ve eğriler kümesi olarak tanımlanan bir vektör grafiğidir.
- Vektör çekilebilir öğeleri ölçeklenebilirdir. Diğer bir deyişle, görüntü kalitesinden ödün vermeden yeniden boyutlandırılabilir. Bu nedenle, APK dosyalarınızın boyutunu küçültmeye ve performansı iyileştirmeye yardımcı olabileceğinden Android uygulamalarında kullanım için idealdir.
- Android Studio'da projenizdeki çekilebilir klasörü sağ tıklayıp Yeni > Vektör Öğesi'ni seçerek vektör çekilebilir öğeleri oluşturabilirsiniz. SVG dosyalarını Android Studio'ya vektör çekilebilir dosyaları olarak da aktarabilirsiniz.
Giriş
VectorDrawable
, XML dosyasında ilişkili renk bilgileriyle birlikte noktalar, çizgiler ve eğriler kümesi olarak tanımlanan bir vektör grafiğidir. Vektör çekilebilirliğini kullanmanın en önemli avantajı, görüntü ölçeklenebilirliğidir. Görüntü kalitesi kaybı olmadan ölçeklendirilebilir. Böylece aynı dosya, resim kalitesinden ödün vermeden farklı ekran yoğunlukları için yeniden boyutlandırılır.
Bu, APK dosyalarının daha küçük olmasına ve geliştiricilerin daha az bakım gerçekleştirmesine neden olur. Ayrıca, her ekran çözünürlüğü için birden fazla resim yerine birden çok XML dosyası kullanarak animasyon için vektör resimler de kullanabilirsiniz.
Bu sayfada ve aşağıdaki videoda, XML'de vektör çekilebilir öğelerinin nasıl oluşturulacağına dair genel bir bakış sunulmaktadır. Android Studio, SVG dosyalarını Çok yoğunluklu vektör grafikleri ekleme özelliği kullanılarak açıklandığı gibi vektör çekilebilir biçimine de dönüştürebilir.
Android 5.0 (API düzeyi 21), VectorDrawable
ve AnimatedVectorDrawable
ile vektör çekilebilir kaynaklarını resmi olarak destekleyen ilk sürümdür. Ancak VectorDrawableCompat
ve AnimatedVectorDrawableCompat
sınıflarını sunan Android destek kitaplığıyla eski sürümleri de destekleyebilirsiniz.
VectorDrawable sınıfı hakkında
VectorDrawable
, statik bir çekilebilir nesne tanımlar. SVG biçimine benzer şekilde her vektör grafiği, path
ve group
nesnelerinden oluşan bir ağaç hiyerarşisi olarak tanımlanır.
Her path
, nesnenin dış çizgisinin geometrisini ve group
, dönüştürmeyle ilgili ayrıntıları içerir. Tüm yollar, XML dosyasında göründükleri sırayla çizilir.
Vektör Asset studio aracı, projeye vektör grafiği XML dosyası olarak eklemenin basit bir yolunu sunar.
Örnek XML
Şarj modunda bir pil resmi oluşturan VectorDrawable
XML dosyası örneği aşağıda verilmiştir.
<!-- 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>
Bu XML aşağıdaki resmi oluşturur:
animasyonluVectorDrawable sınıfı hakkında
AnimatedVectorDrawable
, bir vektör grafiğinin özelliklerine animasyon
ekler. Animasyonlu bir vektör grafiğini üç ayrı kaynak dosyası veya çekilebilir öğenin tamamını tanımlayan tek bir XML dosyası olarak tanımlayabilirsiniz. Daha iyi anlamak için Birden çok XML dosyası ve Tek XML dosyası olmak üzere her iki yaklaşımı da inceleyelim.
Birden çok XML dosyası
Bu yaklaşımı kullanarak üç ayrı XML dosyası tanımlayabilirsiniz:
VectorDrawable
XML dosyası.-
Hedefi
VectorDrawable
, canlandırılacak hedef yolları ve grupları, özellikleri veObjectAnimator
nesneleri veyaAnimatorSet
nesneleri olarak tanımlanan animasyonları tanımlayan birAnimatedVectorDrawable
XML dosyası. - Animatör XML dosyası.
Birden fazla XML dosyası örneği
Aşağıdaki XML dosyaları, bir vektör grafiğinin animasyonunu göstermektedir.
- VectorDrawable'ın XML dosyası:
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>
- AnimasyonluVectorDrawable'ın XML dosyası:
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>
- Canlandırma VectorDrawable'ın XML dosyasında kullanılan Animator XML dosyaları:
rotation.xml
vepath_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>
Tek XML dosyası
Bu yaklaşımı kullanarak ilgili XML dosyalarını XML Paket Biçimi aracılığıyla tek bir XML dosyasında birleştirebilirsiniz. Uygulamanın geliştirilmesi sırasında aapt
etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. Bu yaklaşım, Build Tools 24 veya sonraki sürümleri gerektirir ve çıkış geriye dönük olarak uyumludur.
Tek bir XML dosyası örneği
<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>
Vektör çekilebilir öğeleri geriye dönük uyumluluk çözümü
Android 5.0'dan (API düzeyi 21) önceki platform sürümlerini çalıştıran cihazlarda vektör çekilebilir ve animasyonlu vektörü desteklemek veya Android 7.0'ın (API düzeyi 24) altındaki fillColor
, fillType
ve strokeColor
işlevlerini kullanmak için VectorDrawableCompat
ve AnimatedVectorDrawableCompat
iki destek kitaplığı üzerinden kullanılabilir: support-vector-drawable
ve animated-vector-drawable
.
Android Studio 1.4, derleme sırasında PNG dosyaları oluşturarak vektör çekilebilir kaynakları için sınırlı uyumluluk desteğini kullanıma sundu. Bununla birlikte, vektör çekilebilir
ve animasyonlu vektör çekilebilir desteği Kitaplıkları hem esneklik hem de
geniş kapsamlı uyumluluk sunar. Bu bir destek kitaplığıdır. Böylece, Android 2.1'e (API düzeyi 7 ve sonrası)
sahip tüm Android platform sürümlerinde kullanabilirsiniz. Uygulamanızı
vektör destek kitaplıklarını kullanacak şekilde yapılandırmak için
uygulama modülündeki build.gradle
dosyanıza vectorDrawables
öğesini ekleyin.
vectorDrawables
öğesini yapılandırmak için aşağıdaki kod snippet'ini kullanın:
Modern
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Modern
// 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") } }
VectorDrawableCompat
ve AnimatedVectorDrawableCompat
uygulamalarını Android 4.0 (API düzeyi 14) ve sonraki sürümleri çalıştıran tüm cihazlarda kullanabilirsiniz. Android'in çekilebilir öğeleri yükleme yöntemi, çekilebilir kimliklerin kabul edildiği her yerde (ör. XML dosyalarında) geçerli değildir, vektör çekilebilirlerinin yüklenmesini destekler. android.support.v7.appcompat
paketine, vektör çekilebilirlerinin kullanımını kolaylaştıran birçok özellik eklendi. İlk olarak, android.support.v7.appcompat
paketini ImageView
ile veya ImageButton
ve FloatingActionButton
gibi alt sınıflarla kullandığınızda hem vektör çekilebilirlerine hem de android:src
tarafından kullanılabilen diğer çekilebilir öğelere referans vermek için yeni app:srcCompat
özelliğini kullanabilirsiniz:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Çalışma zamanında çekilebilir öğeleri değiştirmek için setImageResource()
yöntemini önceden olduğu gibi kullanabilirsiniz. AppCompat
ve app:srcCompat
kullanmak, vektör çekilebilir kaynaklarını uygulamanıza entegre etmenin en hatasız yöntemidir.
Destek Kitaplığı 25.4.0 ve sonraki sürümleri şu özellikleri destekler:
- Yol Morphing'i (PathType değerlendirici) Bir yolu başka bir yola dönüştürmek için kullanılır.
- Yol İnterpolasyonu: DoğrusalInterpolator gibi sistem tanımlı interpolatörler yerine esnek bir interpolatör (yol olarak gösterilir) tanımlamak için kullanılır.
Destek Kitaplığı 26.0.0-beta1 ve sonraki sürümleri şu özellikleri destekler:
- Yol boyunca hareket etme Geometri nesnesi, bir animasyonun parçası olarak rastgele bir yol boyunca hareket edebilir.
Destek kitaplığını kullanan birden fazla XML dosyası örneği
Aşağıdaki XML dosyalarında, bir vektör grafiğini canlandırmak için birden fazla XML dosyası kullanma yaklaşımı gösterilmektedir.
- VectorDrawable'ın XML dosyası:
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>
- AnimasyonluVectorDrawable'ın XML dosyası:
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>
- animasyonluVectorDrawable'ın XML dosyasında kullanılan animatör XML dosyası:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Tek XML dosyası
Aşağıdaki XML dosyası, bir vektör grafiğini canlandırmak için tek bir XML dosyası kullanma yaklaşımını göstermektedir. Uygulamanın geliştirilmesi sırasında aapt
etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. Bu yaklaşım, Build Tools 24 veya sonraki sürümleri gerektirir ve çıkış geriye dönük olarak uyumludur.
Destek kitaplığını kullanan tek bir XML dosyası örneği
<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>