Önemli noktalar
- Çekilebilir vektör, XML dosyasında noktalar, çizgiler ve grafiklerden oluşan bir küme olarak tanımlanan birlikte eğrileri de ekler.
- Vektör çekilebilir öğeleri ölçeklenebilir, yani görüntü kalitesi kaybı olmadan yeniden boyutlandırılabilir. Bu da resimlerinizin boyutunu küçültmeye yardımcı olabileceğinden Android uygulamalarında kullanım için idealdir. APK dosyalarına ve performansı iyileştirebilirsiniz.
- Çizilebilir klasörü sağ tıklayarak Android Studio'da vektör çizimleri oluşturabilirsiniz. ve Yeni > Vektör Öğesi. Ayrıca, SVG dosyalarını Vektör çizimleri olarak Android Studio
Giriş
VectorDrawable
, bir vektörel grafik olarak tanımlanmış
XML dosyasında, ilişkili bir nokta, çizgi ve eğri kümesi olarak
renk bilgisi içeriyor. Vektör çizimi kullanmanın en önemli avantajı,
ölçeklenebilirlik. Görüntü kalitesinde kayıp yaşamadan ölçeklendirilebilir. Bu da,
aynı dosya, resim kalitesinde değişiklik olmadan farklı ekran yoğunluklarına göre 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. Ayrıca transkriptinizi
birden fazla XML dosyası yerine birden çok XML dosyası kullanarak animasyon için vektör resimler kullanın
her ekran çözünürlüğü için resim ekleyin.
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ı ayrıca Çok yoğunluklu vektör grafikleri ekle seçeneğini kullanarak.
Android 5.0 (API düzeyi 21),
VectorDrawable
.
ve AnimatedVectorDrawable
, ancak
eski sürümleri destekleyebileceğiniz Android destek kitaplığı,
VectorDrawableCompat
ve
AnimatedVectorDrawableCompat
sınıf.
VectorDrawable sınıfı hakkında
VectorDrawable
, statik bir çekilebilir içeriği tanımlar
nesnesini tanımlayın. SVG biçimine benzer şekilde, her vektör grafiği bir ağaç
path
ve group
nesneden oluşan hiyerarşik bir yapı mevcuttur.
Her path
, nesnenin dış çizgisinin geometrisini ve
group
, dönüştürme ayrıntılarını içeriyor. Tüm yollar çizilir
XML dosyasında göründüğü sırayla alırsınız.
![](https://developer.android.google.cn/static/images/guide/topics/graphics/vectorpath.png?authuser=19&hl=tr)
Şekil 1. Bir vektör çekilebilir öğesinin örnek hiyerarşisi
Vektör öğesi Studio aracı, projeye bir vektör grafiği eklemenin basit bir yolunu sunar olduğunu görebilirsiniz.
Örnek XML
Aşağıda, resim oluşturan örnek bir VectorDrawable
XML dosyası gösterilmektedir
şarj oluyor.
<!-- 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:
![](https://developer.android.google.cn/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=19&hl=tr)
AnimasyonVectorDrawable sınıfı hakkında
AnimatedVectorDrawable
, bir vektörün özelliklerine animasyon ekler
gösterir. Animasyonlu bir vektör grafiği üç ayrı
kaynak dosyaları halinde veya çekilebilir öğenin tamamını tanımlayan tek bir XML dosyası olarak oluşturabilirsiniz. Hadi
Daha iyi anlamak için iki yaklaşımı da inceleyin: Birden çok XML dosyası ve Tek
XML dosyası olarak kaydedin.
Birden fazla XML dosyası
Bu yaklaşımı kullanarak üç ayrı XML dosyası tanımlayabilirsiniz:
VectorDrawable
XML dosyası.-
Şu özelliklere sahip bir
AnimatedVectorDrawable
XML dosyası:VectorDrawable
hedefini tanımlar, animasyon için hedef yollar ve gruplar, özellikler ve tanımlanan animasyonlarObjectAnimator
nesne olarak veyaAnimatorSet
nesne. - 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'inde kullanılan animator XML dosyaları
dosya:
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ı tek bir dosyada birleştirebilirsiniz.
XML paketi biçiminde. Uygulamayı oluştururken
aapt
etiketi ayrı kaynaklar oluşturur ve
animasyonlu vektörü. Bu yaklaşım, Build Tools 24 veya sonraki bir sürümü gerektirir ve
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ü
Daha düşük platform sürümlerini çalıştıran cihazlarda çekilebilir vektör ve animasyonlu vektörü desteklemek için
(API düzeyi 21) sürümünü kullanmalıdır veya fillColor
, fillType
ve
Android 7.0'dan (API düzeyi 24) önceki strokeColor
işlevleri,
VectorDrawableCompat
ve AnimatedVectorDrawableCompat
iki destek kitaplığı üzerinden kullanılabilir:
support-vector-drawable
ve animated-vector-drawable
,
tıklayın.
Android Studio 1.4, vektör için sınırlı uyumluluk desteği sundu
çekilebilir dosyalar oluşturun. Ancak, çizilebilir vektör
animasyonlu vektör çekilebilir destek Kitaplıkları hem esneklik hem de
geniş kapsamlı uyumluluk — bir destek kitaplığıdır, dolayısıyla tüm
Android 2.1'e (API düzeyi 7+) kadarki Android platform sürümleri. Yapılandırmak için
uygulamasında vektör destek kitaplıklarını kullanmak için vectorDrawables
öğesini uygulama modülündeki build.gradle
dosyanıza ekleyin.
vectorDrawables
öğesini yapılandırmak için aşağıdaki kod snippet'ini kullanın.
öğe:
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
kullanabilirsiniz
ve
Tümünde AnimatedVectorDrawableCompat
Android 4.0 (API düzeyi 14) ve sonraki sürümleri çalıştıran cihazlarda. Android'in işleyiş şekli
Çekilebilir dosyaları yükler, ancak XML dosyası gibi çekilebilir bir kimliği kabul eden her yeri yüklemez.
dosyası, vektör çizimlerinin yüklenmesini destekler. İlgili içeriği oluşturmak için kullanılan
android.support.v7.appcompat
paketine bir numara eklendi
özellikleri daha kolay kullanılır hale getirdim. İlk olarak,
Şunları içeren android.support.v7.appcompat
paketi:
ImageView
veya
ImageButton
ve
FloatingActionButton
, şunları yapabilirsiniz:
çekilebilir vektörlere referans vermek için yeni app:srcCompat
özelliğini kullanma
yanı sıra android:src
tarafından kullanılabilen diğer çekilebilirler:
<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 kullanabilirsiniz. AppCompat
kullanılıyor
app:srcCompat
, Google Analytics 4'te tarama yapmanın
eklemeniz gerekir.
Destek Kitaplığı 25.4.0 ve sonraki sürümler şu özellikleri destekler:
- Yolun Değiştirilmesi (PathType değerlendirici) Dönüşüm için kullanılır ilerler.
- Yol İnterpolasyonu Esnek bir yol tanımlamak için kullanılır sistem tanımlı yerine interpolatör (yol olarak gösterilir) DoğrusalInterpolator gibi interpolatörler kullanılır.
Destek Kitaplığı 26.0.0-beta1 ve sonraki sürümler şu özellikleri destekler:
- Yol boyunca hareket et Geometri nesnesi hareket edebilir. rastgele bir yol boyunca gösterilir.
Destek kitaplığını kullanan birden fazla XML dosyası örneği
Aşağıdaki XML dosyaları, birden fazla XML dosyası kullanma yaklaşımını göstermektedir kullanabilirsiniz.
- 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'inde kullanılan animator XML dosyası
dosya:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Tek XML dosyası
Aşağıdaki XML dosyası, tek XML dosyası kullanma yaklaşımını göstermektedir
kullanabilirsiniz. Uygulamayı oluştururken
aapt
etiketi ayrı kaynaklar oluşturur ve
animasyonlu vektörü. Bu yaklaşım, Build Tools 24 veya sonraki bir sürümü gerektirir ve
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>