Key points
- Çekilebilir vektör, XML dosyasında ilişkili renk bilgileriyle birlikte bir dizi nokta, çizgi ve eğri olarak tanımlanan bir vektör grafiğidir.
- Vektör çekilebilir öğeleri ölçeklenebilir, yani görüntü kalitesi kaybı olmadan yeniden boyutlandırılabilir. Bu özellik, APK dosyalarınızın boyutunu küçültmeye ve performansı iyileştirmeye yardımcı olabileceğinden Android uygulamalarında kullanım için idealdir.
- Projenizdeki çekilebilir klasörü sağ tıklayıp Yeni > Vektör Öğesi'ni seçerek Android Studio'da vektör çizimleri oluşturabilirsiniz. SVG dosyalarını ayrıca Android Studio'ya vektör çizimleri olarak aktarabilirsiniz.
Giriş
VectorDrawable
, XML dosyasında ilişkili renk bilgileriyle birlikte bir dizi nokta, çizgi ve eğri olarak tanımlanan vektör grafiğidir. Vektör çizimi kullanmanın en önemli avantajı görüntü ölçeklenebilirliğidir. Görüntü kalitesinde kayıp yaşanmadan ölçeklendirilebilir.
Yani aynı dosya, resim kalitesinden ödün vermeden farklı ekran yoğunlukları için yeniden boyutlandırılır.
Bu yöntem, APK dosyalarının daha küçük olmasını ve geliştiricilerin daha az bakım yapmasını sağlar. 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, Çok yoğunluklu vektör grafikleri ekleme bölümünde açıklandığı gibi, SVG dosyalarını da vektörel çekilebilir biçimine 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ı içeren Android destek kitaplığıyla eski sürümleri destekleyebilirsiniz.
VectorDrawable sınıfı hakkında
VectorDrawable
, statik bir çekilebilir nesneyi tanımlar. SVG biçimine benzer şekilde, her bir vektör grafiği, path
ve group
nesnelerden oluşan bir ağaç hiyerarşisi şeklinde tanımlanır.
Her path
, nesnenin dış çizgisinin geometrisini ve group
dönüşüm ayrıntılarını içerir. Tüm yollar, XML dosyasında göründükleri sırayla çizilir.
Vector asset studio aracı, projeye bir vektör grafiğini XML dosyası olarak eklemenin basit bir yolunu sunar.
Örnek XML
Şarj modundaki bir pilin resmini oluşturan örnek bir VectorDrawable
XML dosyasını burada bulabilirsiniz.
<!-- 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:
AnimasyonVectorDrawable 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 iki yaklaşımı da inceleyelim: Birden çok XML dosyası ve Tek XML dosyası.
Birden fazla XML dosyası
Bu yaklaşımı kullanarak üç ayrı XML dosyası tanımlayabilirsiniz:
VectorDrawable
XML dosyası.-
VectorDrawable
hedefini, canlandırılacak hedef yolları ve grupları, özellikleri veObjectAnimator
nesne veyaAnimatorSet
nesne olarak tanımlanan animasyonları tanımlayanAnimatedVectorDrawable
XML dosyası. - Animatör XML dosyası.
Birden fazla XML dosyası örneği
Aşağıdaki XML dosyaları bir vektör grafiğin 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>
- AnimasyonVectorDrawable'ı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>
- AnimasyonVectorDrawable'ı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. Uygulama oluşturulurken aapt
etiketi ayrı kaynaklar oluşturur ve animasyonlu vektörde bunlara referans verir. Bu yaklaşım, Derleme Araçları 24 veya sonraki sürümünü gerektirir ve çıkış, geriye dönük 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 çizimleri geriye dönük uyumluluk çözümü
Android 5.0'dan (API düzeyi 21) düşük platform sürümlerini çalıştıran cihazlarda çizilebilir vektör ve animasyonlu vektörü desteklemek için Android 7.0'ın (API düzeyi 24) altındaki fillColor
, fillType
ve strokeColor
işlevlerini kullanmak için VectorDrawableCompat
ve AnimatedVectorDrawableCompat
olmak üzere iki destek kitaplığını kullanabilirsiniz: support-vector-drawable
ve animated-vector-drawable
.
Android Studio 1.4, derleme sırasında PNG dosyaları oluşturarak vektör çekilebilir öğeleri için sınırlı uyumluluk desteği sunar. Bununla birlikte, çizim yapılabilir ve animasyonlu vektör destek Kitaplıkları hem esneklik hem de geniş kapsamlı uyumluluk sunar. Bu destek kitaplığı bir destek kitaplığıdır. Dolayısıyla bu kitaplığı, Android 2.1'e (API düzeyi 7+) kadarki 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ünde build.gradle
dosyanıza vectorDrawables
öğesini ekleyin.
vectorDrawables
öğesini yapılandırmak için aşağıdaki kod snippet'ini kullanın:
Eski
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Eski
// 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
özelliklerini Android 4.0 (API düzeyi 14) ve sonraki sürümleri çalıştıran cihazların tamamında kullanabilirsiniz. XML dosyası gibi çekilebilir bir kimliği kabul eden her yerde değil, Android'in çekilebilir öğeleri yükleme şekli vektör çekilebilir kaynaklarını yüklemeyi desteklemez. android.support.v7.appcompat
paketine, vektör çizimlerinin kullanımını kolaylaştıracak bir dizi özellik eklendi. İlk olarak, android.support.v7.appcompat
paketini ImageView
veya ImageButton
ve FloatingActionButton
gibi alt sınıflarla kullandığınızda, vektör çekilebilirlerine ve android:src
için kullanılabilen diğer tüm çekilebilirlere 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 çekilebilirleri değiştirmek için setImageResource()
yöntemini önceki gibi kullanabilirsiniz. AppCompat
ve app:srcCompat
kullanmak, vektör çizimlerini uygulamanıza entegre etmenin en hatasız yöntemidir.
Destek Kitaplığı 25.4.0 ve sonraki sürümler şu özellikleri destekler:
- Path Morphing (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ı arapolatörler yerine esnek bir arapolatör (yol olarak gösterilir) tanımlamak için kullanılır.
Destek Kitaplığı 26.0.0-beta1 ve sonraki sürümler ş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ı, bir vektör grafiğine animasyon eklemek için birden fazla XML dosyası kullanma yaklaşımını 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>
- AnimasyonVectorDrawable'ı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>
- AnimasyonVectorDrawable'ın XML dosyasında kullanılan animator 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ında, bir vektör grafiğine animasyon eklemek için tek bir XML dosyası kullanma yaklaşımı gösterilmektedir. Uygulama oluşturulurken aapt
etiketi ayrı kaynaklar oluşturur ve animasyonlu vektörde bunlara referans verir. Bu yaklaşım, Derleme Araçları 24 veya sonraki sürümünü gerektirir ve çıkış, geriye dönük 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>