Vektör çekilebilir öğelerine genel bakış

"Oluştur" yöntemini deneyin
Android için önerilen kullanıcı arayüzü araç seti Jetpack Compose'dur. Oluştur'da grafikleri nasıl görüntüleyeceğinizi öğrenin.
ImageVector → 'nı inceleyin.

Ö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 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 çekilebilir öğeleri oluşturabilirsiniz. ve Yeni > Vektör Öğesi. Ayrıca, SVG dosyalarını Vektör çekilebilir öğeleri olarak Android Studio
ziyaret edin. Özet 24 Temmuz 2023'te Google Bard tarafından oluşturulmuştur

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 ç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 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 çekilebilirlerinin 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ı 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. 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, vektör grafiğinin özelliklerine animasyon ekler. 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:

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>
  • 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 ve path_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. Uygulamayı geliştirirken aapt etiketi ayrı kaynaklar oluşturur ve bu kaynaklara animasyonlu vektörü. 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 çizimleri 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ığı aracılığıyla 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, ç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:

Groovy

// 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'i Android 4.0 (API seviyesi 14) ve sonraki sürümlerin yüklü olduğu tüm cihazlarda kullanabilirsiniz. Android'in işleyiş şekli Çekilebilir içerikleri yükler, XML'deki gibi çekilebilir bir kimliği kabul eden her yeri değil. dosyası, vektör çizimlerinin yüklenmesini destekler. android.support.v7.appcompat paketine, vektör çizilebilir öğelerin kullanımını kolaylaştırmak için çeşitli özellikler eklendi. İlk olarak, Şununla 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 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 ş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ı, bir vektör grafiğini animasyonlu hale getirmek 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>
  • 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ı, tek XML dosyası kullanma yaklaşımını göstermektedir kullanabilirsiniz. Uygulama oluşturulurken aapt etiketi ayrı kaynaklar oluşturur ve animasyonlu vektörde bunlara referans verir. Bu yaklaşım, Build Tools 24 veya sonraki bir sürümü gerektirir ve 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>