Ö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 kayıp yaşanmadan 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.
Ş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:
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:
VectorDrawableXML dosyası.-
Şu özelliklere sahip bir
AnimatedVectorDrawableXML dosyası:VectorDrawablehedefini tanımlar, animasyon için hedef yollar ve gruplar, özellikler ve tanımlanan animasyonlarObjectAnimatornesne olarak veyaAnimatorSetnesne. - 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.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 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>