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

"Oluştur" yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da grafiklerin nasıl gösterileceğini öğrenin.
ImageVector →

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.
Özet 24 Temmuz 2023'te Google Bard tarafından oluşturulmuştur

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.

Şekil 1. Bir vektör çekilebilir öğesinin örnek hiyerarşisi

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:

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 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 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>