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östereceğinizi öğrenin.
ImageVector →

Ö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, APK dosyalarınızın boyutunu küçültmeye ve performansı iyileştirmeye yardımcı olabileceğinden, bu dosyaları Android uygulamalarında kullanmak için ideal kılar.
  • 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ı Android Studio'ya vektör çizilebilir öğe olarak da aktarabilirsiniz.
Ö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 çizilebilir öğe kullanmanın en büyük avantajı, resmin ölçeklenebilir olmasıdır. Görüntü kalitesinde kayıp yaşanmadan ölçeklendirilebilir. Yani aynı dosya, resim kalitesinde değişiklik olmadan farklı ekran yoğunlukları için 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 çizilebilir öğelerin nasıl oluşturulacağına dair genel bilgiler verilmektedir. 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 ç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 ç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. Vektör çizilebilir öğesinin örnek hiyerarşisi

Vektör öğesi stüdyosu 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ı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:

AnimatedVectorDrawable 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 ç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'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>
  • 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, XML Paketi biçimi aracılığıyla ilgili XML dosyalarını tek bir XML dosyasında birleştirebilirsiniz. Uygulama oluşturulurken aapt etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. 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 çekilebilir öğeleri için sınırlı uyumluluk desteği sunar. Ancak vektör çizilebilir ve animasyonlu vektör çizilebilir destek kitaplıkları hem esneklik hem de geniş uyumluluk sunar. Destek kitaplığı olduğundan Android 2.1'e (API seviyesi 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:

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 çizilebilir öğeleri yükleme şekli nedeniyle, XML dosyası gibi bir çizilebilir öğe kimliği kabul eden her yer vektör çizilebilir öğelerin yüklenmesini desteklemez. android.support.v7.appcompat paketine, vektör çizilebilir öğelerin kullanımını kolaylaştırmak için bir dizi özellik eklendi. Öncelikle, android.support.v7.appcompat paketini ImageView ile veya ImageButton ve FloatingActionButton gibi alt sınıflarla kullandığınızda, vektör çizilebilir öğelerin yanı sıra android:src tarafından kullanılabilen diğer tüm çizilebilir öğeleri referanslamak 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ıştırma sırasında çizilebilir öğeleri değiştirmek için önceki gibi setImageResource() yöntemini kullanabilirsiniz. AppCompat ve app:srcCompat kullanmak, vektör çizilebilir öğeleri uygulamanıza en güvenilir şekilde entegre etmenin en iyi yoludur.

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

  • Yol Dönüşümü (PathType değerlendiricisi) Bir yolu başka bir yola dönüştürmek için kullanılır.
  • Yol Düzenlemesi LinearInterpolator gibi sistem tanımlı düzenleyiciler yerine esnek bir düzenleyici (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:

  • Yolda hareket etme Geometri nesnesi, bir animasyonun parçası olarak rastgele bir yolda 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'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>
  • 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>
  • 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ı, bir vektör grafiğini animasyonlu hale getirmek için tek bir XML dosyasının kullanılması 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 bir sürüm gerekir ve çıktı 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>