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

Compose yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da grafikleri nasıl görüntüleyeceğinizi öğrenin.
ImageVector →

Önemli noktalar

  • Drawable vektör, XML dosyasında bir dizi nokta, çizgi ve eğri olarak tanımlanan ve ilişkili renk bilgilerini içeren bir vektör grafiktir.
  • Drawable vektörler ölçeklenebilir. Yani görüntü kalitesi kaybı olmadan yeniden boyutlandırılabilir. Bu nedenle, Android uygulamalarında kullanım için idealdir. APK dosyalarınızın boyutunu küçültmeye ve performansı artırmaya yardımcı olabilir.
  • Android Studio'da projenizdeki drawable klasörünü sağ tıklayıp Yeni > Vektör Öğe'yi seçerek drawable vektörler oluşturabilirsiniz. SVG dosyalarını Android Studio'ya drawable vektör olarak da aktarabilirsiniz.
Özet, 24 Temmuz 2023'te Google Bard tarafından oluşturulmuştur

Giriş

VectorDrawable, XML dosyasında bir dizi nokta, çizgi ve eğri olarak tanımlanan ve ilişkili renk bilgilerini içeren bir vektör grafiğidir. Drawable vektör kullanmanın en büyük avantajı, resim ölçeklenebilirliğidir. Görüntü kalitesi kaybı olmadan ölçeklendirilebilir. Yani aynı dosya, resim kalitesi kaybı olmadan farklı ekran yoğunlukları için yeniden boyutlandırılır. Bu sayede APK dosyaları daha küçük olur ve geliştiricilerin daha az bakım yapması gerekir. Ayrıca, her ekran çözünürlüğü için birden fazla resim yerine birden fazla XML dosyası kullanarak animasyon için vektörel görüntüleri de kullanabilirsiniz.

Bu sayfada ve aşağıdaki videoda, XML'de drawable vektörlerin 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ı drawable vektör biçimine de dönüştürebilir.

Android 5.0 (API düzeyi 21), VectorDrawable ve AnimatedVectorDrawable ile drawable vektörleri resmi olarak destekleyen ilk sürümdü. Ancak VectorDrawableCompat ve AnimatedVectorDrawableCompat sınıflarını sağlayan Android Destek Kitaplığı ile daha 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 grafik path ve group nesnelerinden oluşan bir ağaç hiyerarşisi olarak tanımlanır. Her path, nesnenin ana hattının geometrisini ve group, dönüşümle ilgili ayrıntıları içerir. Tüm yollar, XML dosyasında göründükleri sırayla çizilir.

Şekil 1. drawable vektör öğesinin örnek hiyerarşisi

Vector Asset Studio aracı, projeye XML dosyası olarak vektör grafik eklemenin basit bir yolunu sunar.

Örnek XML

Şarj modundaki bir pilin resmini oluşturan örnek bir VectorDrawable XML dosyası aşağıda 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 vektör grafiğini üç ayrı kaynak dosyası olarak veya çizilebilir öğenin tamamını tanımlayan tek bir XML dosyası olarak tanımlayabilirsiniz. Daha iyi anlamak için her iki yaklaşıma da bakalım: Birden fazla XML dosyası ve Tek XML dosyası.

Birden çok 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'ı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>
  • 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.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 için Build Tools 24 veya sonraki sürümler gerekir 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>

Drawable vektörler için geriye dönük uyumluluk çözümü

Android 5.0'dan (API düzeyi 21) daha düşük platform sürümlerini çalıştıran cihazlarda drawable vektör ve animasyonlu drawable vektör desteği sunmak veya Android 7.0'dan (API düzeyi 24) daha düşük 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 olmak üzere iki destek kitaplığı aracılığıyla kullanılabilir.

Android Studio 1.4, derleme sırasında PNG dosyaları oluşturarak drawable vektörler için sınırlı uyumluluk desteği sunmuştur. Ancak drawable vektör ve animasyonlu drawable vektör destek kitaplıkları hem esneklik hem de geniş uyumluluk sunar. Bu bir destek kitaplığı olduğundan Android 2.1'e (API düzeyi 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:

Modern

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Modern

// 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, Android 4.0 (API düzeyi 14) ve sonraki sürümleri çalıştıran tüm cihazlarda kullanılabilir. Android'in drawable'ları yükleme şekli nedeniyle, drawable kimliği kabul eden her yer (ör. XML dosyası) drawable vektörlerin yüklenmesini desteklemez. android.support.v7.appcompat paketi, drawable vektörlerin kullanımını kolaylaştırmak için bir dizi özellik ekledi. İlk olarak, android.support.v7.appcompat paketini ImageView ile veya ImageButton ve FloatingActionButton gibi alt sınıflarla kullandığınızda, drawable vektörlere ve android:src için kullanılabilen diğer drawable'lara 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" />

Çizilebilir öğeleri çalışma zamanında değiştirmek için daha önce olduğu gibi setImageResource() yöntemini kullanabilirsiniz. AppCompat ve app:srcCompat kullanmak, drawable vektörleri uygulamanıza entegre etmenin en güvenilir yöntemidir.

Destek Kitaplığı 25.4.0 ve sonraki sürümler aşağıdaki özellikleri destekler:

  • Yol Değiştirme (PathType değerlendiricisi): Bir yolu başka bir yola dönüştürmek için kullanılır.
  • Yol enterpolasyonu LinearInterpolator gibi sistem tarafından tanımlanan enterpolatörler yerine esnek bir enterpolatör (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:

  • Yol boyunca hareket ettirme Geometri nesnesi, animasyonun bir 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ğe 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>
  • 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ğe animasyon eklemek için tek bir XML dosyası kullanma yaklaşımını göstermektedir. Uygulama oluşturulurken aapt etiketi ayrı kaynaklar oluşturur ve animasyonlu vektörde bunlara referans verir. Bu yaklaşım için Build Tools 24 veya sonraki sürümler gerekir 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>