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

Oluşturma 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 →

Önemli noktalar

• Vektör çizilebilir öğe, XML dosyasında bir dizi nokta, çizgi ve eğri ile ilişkili renk bilgileri 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.
• Android Studio'da, projenizdeki drawable klasörünü sağ tıklayıp Yeni > Vektör Öğesi'ni seçerek vektör çizilebilir öğeler oluşturabilirsiniz. SVG dosyalarını Android Studio'ya vektör çizilebilir öğe olarak da aktarabilirsiniz.

Giriş

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

Aşağıda, şarj modundaki bir pilin resmini oluşturan örnek bir VectorDrawable XML dosyası 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 bir vektör grafiği üç ayrı kaynak dosyası olarak veya çizilebilir öğenin tamamını tanımlayan tek bir XML dosyası olarak tanımlayabilirsiniz. Daha iyi anlamak için birden fazla XML dosyası ve tek XML dosyası olmak üzere her iki yaklaşıma da göz atalım.

Birden çok XML dosyası

Bu yaklaşımı kullanarak üç ayrı XML dosyası tanımlayabilirsiniz:

• VectorDrawable XML dosyası.
• Hedef VectorDrawable'yi, animasyon uygulanacak hedef yolları ve grupları, özellikleri ve ObjectAnimator nesnesi veya AnimatorSet nesnesi olarak tanımlanan animasyonları tanımlayan bir AnimatedVectorDrawable XML dosyası.
• Animasyon XML dosyası.

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 çizilebilir öğelerin 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ığı 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 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:

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

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

// 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"
    }
}

// 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 çeşitli özellikler 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 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 aşağıdaki özellikleri destekler:

• Yolda hareket etme Geometri nesnesi, bir animasyonun parçası olarak rastgele bir yolda hareket edebilir.

Destek kitaplığının kullanıldığı 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'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>

• 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ğ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 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.

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>