Önemli noktalar
- Vektör çizilebilir öğe, bir XML dosyasında ilişkili renk bilgileriyle birlikte bir dizi nokta, çizgi ve eğri olarak tanımlanan bir vektör grafiktir.
- Vektör çizilebilir öğeler ölçeklenebilirdir. Yani görüntü kalitesinde kayıp yaşanmadan yeniden boyutlandırılabilirler. Bu, APK dosyalarınızın boyutunu küçültmeye ve performansı iyileştirmeye yardımcı olabileceğinden, bu dosyaları Android uygulamalarında kullanmak için ideal kılar.
- Android Studio'da, projenizdeki drawable klasörünü sağ tıklayıp Yeni > Vektör Öğesi'ni seçerek vektör çizilebilir öğeler oluşturabilirsiniz. SVG dosyalarını Android Studio'ya vektör çizilebilir öğe olarak da aktarabilirsiniz.
Giriş
VectorDrawable, bir XML dosyasında ilişkili renk bilgileriyle birlikte bir dizi nokta, çizgi ve eğri olarak tanımlanan bir vektör grafiktir. Vektör çizilebilir öğe kullanmanın en büyük avantajı, resmin ölçeklenebilir olmasıdır. Görüntü kalitesinde kayıp yaşanmadan ölçeklenebilir. Yani aynı dosya, resim kalitesinde kayıp yaşanmadan farklı ekran yoğunlukları için yeniden boyutlandırılır.
Bu sayede APK dosyaları daha küçük olur ve geliştirici bakım maliyetleri azalır. Ayrıca, her ekran çözünürlüğü için birden fazla resim yerine birden fazla XML dosyası kullanarak animasyon için vektör resimleri de kullanabilirsiniz.
Bu sayfada ve aşağıdaki videoda, XML'de vektör çizilebilir öğelerin nasıl oluşturulacağına dair genel bilgiler verilmektedir. Android Studio, Çok yoğunluklu vektör grafikleri ekleme bölümünde açıklandığı gibi SVG dosyalarını vektör çizilebilir biçimine de dönüştürebilir.
Android 5.0 (API düzeyi 21), VectorDrawable
ve AnimatedVectorDrawable ile vektör çizilebilir öğeleri resmi olarak destekleyen ilk sürümdü ancak
VectorDrawableCompat ve
AnimatedVectorDrawableCompat sınıflarını sağlayan Android destek kitaplığıyla eski sürümleri destekleyebilirsiniz.
VectorDrawable sınıfı hakkında
VectorDrawable, statik bir çizilebilir 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, group ise dönüşümle ilgili ayrıntıları içerir. Tüm yollar, XML dosyasında göründükleri sırayla çizilir.
Şekil 1. Vektör çizilebilir öğesinin örnek hiyerarşisi
Vektör öğesi stüdyosu aracı, projeye XML dosyası olarak vektör grafik eklemenin basit bir yolunu sunar.
Örnek XML
Aşağıda, şarj modundaki bir pilin resmini oluşturan örnek bir VectorDrawable XML dosyası 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:
AnimatedVectorDrawable sınıfı hakkında
AnimatedVectorDrawable, vektör grafiğinin özelliklerine animasyon ekler. Animasyonlu bir vektör grafiği üç ayrı kaynak dosyası olarak veya çizilebilir öğenin tamamını tanımlayan tek bir XML dosyası olarak tanımlayabilirsiniz. Daha iyi anlamak için birden fazla XML dosyası ve tek XML dosyası olmak üzere her iki yaklaşıma da göz atalım.
Birden çok XML dosyası
Bu yaklaşımı kullanarak üç ayrı XML dosyası tanımlayabilirsiniz:
VectorDrawableXML dosyası.-
Hedef
VectorDrawable'yi, animasyon uygulanacak hedef yolları ve grupları, özellikleri veObjectAnimatornesnesi veyaAnimatorSetnesnesi olarak tanımlanan animasyonları tanımlayan birAnimatedVectorDrawableXML dosyası. - Animasyon XML dosyası.
Birden fazla XML dosyası örneği
Aşağıdaki XML dosyaları, bir vektör grafiğinin animasyonunu gösterir.
- VectorDrawable'un 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> - AnimatedVectorDrawable'ı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> - AnimatedVectorDrawable'ın XML dosyasında kullanılan animatör XML dosyaları:
rotation.xmlvepath_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, XML Paketi biçimi aracılığıyla ilgili XML dosyalarını tek bir XML dosyasında birleştirebilirsiniz. Uygulama oluşturulurken aapt etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. Bu yaklaşım için Build Tools 24 veya sonraki bir sürüm gerekir ve çıktı 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 çekilebilir öğeler için geriye dönük uyumluluk çözümü
Android 5.0 (API düzeyi 21) ve önceki sürümleri çalıştıran cihazlarda vektör çizilebilir ve animasyonlu vektör çizilebilir öğeleri desteklemek veya Android 7.0 (API düzeyi 24) ve önceki sürümlerde fillColor, fillType ve strokeColor işlevlerini kullanmak için VectorDrawableCompat
ve AnimatedVectorDrawableCompat
sırasıyla support-vector-drawable ve animated-vector-drawable adlı iki destek kitaplığı kullanılabilir.
Android Studio 1.4, derleme sırasında PNG dosyaları oluşturarak vektör çizilebilirler için sınırlı uyumluluk desteğini kullanıma sundu. Ancak vektör çizilebilir ve animasyonlu vektör çizilebilir destek kitaplıkları hem esneklik hem de geniş uyumluluk sunar. Destek kitaplığı olduğundan Android 2.1'e (API seviyesi 7 ve üzeri) kadar tüm Android platform sürümleriyle 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:
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")
}
}
VectorDrawableCompat
ve
AnimatedVectorDrawableCompat'i Android 4.0 (API seviyesi 14) ve sonraki sürümlerin yüklü olduğu tüm cihazlarda kullanabilirsiniz. Android'in çizilebilir öğeleri yükleme şekli nedeniyle, XML dosyası gibi bir çizilebilir öğe kimliği kabul eden her yer vektör çizilebilir öğe yüklemeyi desteklemez. android.support.v7.appcompat paketine, vektör çizilebilir öğelerin kullanımını kolaylaştırmak için çeşitli özellikler eklendi. Öncelikle, android.support.v7.appcompat paketini ImageView ile veya ImageButton ve FloatingActionButton gibi alt sınıflarla kullandığınızda, vektör çizilebilir öğelerin yanı sıra android:src tarafından kullanılabilen diğer tüm çizilebilir öğeleri referanslamak için yeni app:srcCompat özelliğini kullanabilirsiniz:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Çizilebilir öğeleri çalışma zamanında değiştirmek için önceki gibi setImageResource()
yöntemini kullanabilirsiniz. AppCompat ve app:srcCompat kullanmak, vektör çizilebilir öğeleri uygulamanıza en güvenilir şekilde entegre etmenin en iyi yoludur.
Destek Kitaplığı 25.4.0 ve sonraki sürümler aşağıdaki özellikleri destekler:
- Yol Dönüşümü (PathType değerlendiricisi) Bir yolu başka bir yola dönüştürmek için kullanılır.
- Yol Eşleme LinearInterpolator gibi sistem tanımlı interpolatorlar yerine esnek bir interpolator (yol olarak temsil edilir) tanımlamak için kullanılır.
Destek Kitaplığı 26.0.0-beta1 ve sonraki sürümler aşağıdaki özellikleri destekler:
- Yolda hareket etme Geometri nesnesi, bir animasyonun parçası olarak rastgele bir yolda hareket edebilir.
Destek kitaplığını kullanan birden fazla XML dosyası örneği
Aşağıdaki XML dosyaları, bir vektör grafiğini animasyonlu hale getirmek için birden fazla XML dosyası kullanma yaklaşımını göstermektedir.
- VectorDrawable'un 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> - AnimatedVectorDrawable'ı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> - AnimatedVectorDrawable'ı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 animasyonlu hale getirmek için tek bir XML dosyasının kullanılması yaklaşımını göstermektedir. Uygulama oluşturulurken aapt etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. Bu yaklaşım için Build Tools 24 veya sonraki bir sürüm gerekir ve çıktı geriye dönük uyumludur.
Destek kitaplığının kullanıldığı 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>