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

Oluşturma yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Oluşturma aracında grafikleri nasıl görüntüleyeceğinizi öğrenin.

Key points

  • Çekilebilir vektör, XML dosyasında ilişkili renk bilgileriyle birlikte noktalar, çizgiler ve eğriler kümesi olarak tanımlanan bir vektör grafiğidir.
  • Vektör çekilebilir öğeleri ölçeklenebilirdir. Diğer bir deyişle, görüntü kalitesinden ödün vermeden yeniden boyutlandırılabilir. Bu nedenle, APK dosyalarınızın boyutunu küçültmeye ve performansı iyileştirmeye yardımcı olabileceğinden Android uygulamalarında kullanım için idealdir.
  • Android Studio'da projenizdeki çekilebilir klasörü sağ tıklayıp Yeni > Vektör Öğesi'ni seçerek vektör çekilebilir öğeleri oluşturabilirsiniz. SVG dosyalarını Android Studio'ya vektör çekilebilir dosyaları olarak da aktarabilirsiniz.
Google Bard tarafından 24 Temmuz 2023'te oluşturulan özet

Giriş

VectorDrawable, XML dosyasında ilişkili renk bilgileriyle birlikte noktalar, çizgiler ve eğriler kümesi olarak tanımlanan bir vektör grafiğidir. Vektör çekilebilirliğini kullanmanın en önemli avantajı, görüntü ölçeklenebilirliğidir. Görüntü kalitesi kaybı olmadan ölçeklendirilebilir. Böylece aynı dosya, resim kalitesinden ödün vermeden farklı ekran yoğunlukları için yeniden boyutlandırılır. Bu, APK dosyalarının daha küçük olmasına ve geliştiricilerin daha az bakım gerçekleştirmesine neden olur. Ayrıca, 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, SVG dosyalarını Çok yoğunluklu vektör grafikleri ekleme özelliği kullanılarak açıklandığı gibi vektör çekilebilir 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ı sunan Android destek kitaplığıyla eski sürümleri de destekleyebilirsiniz.

VectorDrawable sınıfı hakkında

VectorDrawable, statik bir çekilebilir 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 ve group, dönüştürmeyle 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 Asset studio aracı, projeye vektör grafiği XML dosyası olarak eklemenin basit bir yolunu sunar.

Örnek XML

Şarj modunda bir pil resmi oluşturan VectorDrawable XML dosyası örneği 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:

animasyonluVectorDrawable 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 Birden çok XML dosyası ve Tek XML dosyası olmak üzere her iki yaklaşımı da inceleyelim.

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ö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>
    
  • AnimasyonluVectorDrawable'ı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>
    
  • Canlandırma VectorDrawable'ı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. Uygulamanın geliştirilmesi sırasında aapt etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. Bu yaklaşım, Build Tools 24 veya sonraki sürümleri gerektirir ve çıkış geriye dönük olarak 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 çekilebilir öğeleri geriye dönük uyumluluk çözümü

Android 5.0'dan (API düzeyi 21) önceki platform sürümlerini çalıştıran cihazlarda vektör çekilebilir ve animasyonlu vektörü desteklemek veya Android 7.0'ın (API düzeyi 24) altındaki fillColor, fillType ve strokeColor işlevlerini kullanmak için VectorDrawableCompat ve AnimatedVectorDrawableCompat iki destek kitaplığı üzerinden kullanılabilir: support-vector-drawable ve animated-vector-drawable.

Android Studio 1.4, derleme sırasında PNG dosyaları oluşturarak vektör çekilebilir kaynakları için sınırlı uyumluluk desteğini kullanıma sundu. Bununla birlikte, vektör çekilebilir ve animasyonlu vektör çekilebilir desteği Kitaplıkları hem esneklik hem de geniş kapsamlı uyumluluk sunar. Bu bir destek kitaplığıdır. Böylece, Android 2.1'e (API düzeyi 7 ve sonrası) sahip 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ü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 uygulamalarını Android 4.0 (API düzeyi 14) ve sonraki sürümleri çalıştıran tüm cihazlarda kullanabilirsiniz. Android'in çekilebilir öğeleri yükleme yöntemi, çekilebilir kimliklerin kabul edildiği her yerde (ör. XML dosyalarında) geçerli değildir, vektör çekilebilirlerinin yüklenmesini destekler. android.support.v7.appcompat paketine, vektör çekilebilirlerinin kullanımını kolaylaştıran birçok özellik eklendi. İlk olarak, android.support.v7.appcompat paketini ImageView ile veya ImageButton ve FloatingActionButton gibi alt sınıflarla kullandığınızda hem vektör çekilebilirlerine hem de android:src tarafından kullanılabilen diğer çekilebilir öğelere 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 çekilebilir öğeleri değiştirmek için setImageResource() yöntemini önceden olduğu gibi kullanabilirsiniz. AppCompat ve app:srcCompat kullanmak, vektör çekilebilir kaynaklarını uygulamanıza entegre etmenin en hatasız yöntemidir.

Destek Kitaplığı 25.4.0 ve sonraki sürümleri şu özellikleri destekler:

  • Yol Morphing'i (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ı interpolatörler yerine esnek bir interpolatör (yol olarak gösterilir) tanımlamak için kullanılır.

Destek Kitaplığı 26.0.0-beta1 ve sonraki sürümleri ş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ında, bir vektör grafiğini canlandırmak için birden fazla XML dosyası kullanma yaklaşımı gösterilmektedir.

  • 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>
    
  • AnimasyonluVectorDrawable'ı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>
    
  • animasyonluVectorDrawable'ı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 canlandırmak için tek bir XML dosyası kullanma yaklaşımını göstermektedir. Uygulamanın geliştirilmesi sırasında aapt etiketi ayrı kaynaklar oluşturur ve bunlara animasyonlu vektörde referans verir. Bu yaklaşım, Build Tools 24 veya sonraki sürümleri gerektirir ve çıkış geriye dönük olarak 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>