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 → 'nı inceleyin.

Önemli noktalar

  • Çekilebilir vektör, XML dosyasında noktalar, çizgiler ve grafiklerden oluşan bir küme olarak tanımlanan birlikte eğrileri de ekler.
  • Vektör çekilebilir öğeleri ölçeklenebilir, yani görüntü kalitesi kaybı olmadan yeniden boyutlandırılabilir. Bu da resimlerinizin boyutunu küçültmeye yardımcı olabileceğinden Android uygulamalarında kullanım için idealdir. APK dosyalarına ve performansı iyileştirebilirsiniz.
  • Çizilebilir klasörü sağ tıklayarak Android Studio'da vektör çizimleri oluşturabilirsiniz. ve Yeni > Vektör Öğesi. Ayrıca, SVG dosyalarını Vektör çizimleri olarak Android Studio
ziyaret edin. Özet 24 Temmuz 2023'te Google Bard tarafından oluşturulmuştur

Giriş

VectorDrawable, bir vektörel grafik olarak tanımlanmış XML dosyasında, ilişkili bir nokta, çizgi ve eğri kümesi olarak renk bilgisi içeriyor. Vektör çizimi kullanmanın en önemli avantajı, ölçeklenebilirlik. Görüntü kalitesinde kayıp yaşamadan ölçeklendirilebilir. Bu da, aynı dosya, resim kalitesinde değişiklik olmadan farklı ekran yoğunluklarına göre 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. Ayrıca transkriptinizi birden fazla XML dosyası yerine birden çok XML dosyası kullanarak animasyon için vektör resimler kullanın her ekran çözünürlüğü için resim ekleyin.

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ı ayrıca Çok yoğunluklu vektör grafikleri ekle seçeneğini kullanarak.

Android 5.0 (API düzeyi 21), VectorDrawable. ve AnimatedVectorDrawable, ancak eski sürümleri destekleyebileceğiniz Android destek kitaplığı, VectorDrawableCompat ve AnimatedVectorDrawableCompat sınıf.

VectorDrawable sınıfı hakkında

VectorDrawable, statik bir çekilebilir içeriği tanımlar nesnesini tanımlayın. SVG biçimine benzer şekilde, her vektör grafiği bir ağaç path ve group nesneden oluşan hiyerarşik bir yapı mevcuttur. Her path, nesnenin dış çizgisinin geometrisini ve group, dönüştürme ayrıntılarını içeriyor. Tüm yollar çizilir XML dosyasında göründüğü sırayla alırsınız.

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

Vektör öğesi Studio aracı, projeye bir vektör grafiği eklemenin basit bir yolunu sunar olduğunu görebilirsiniz.

Örnek XML

Aşağıda, resim oluşturan örnek bir VectorDrawable XML dosyası gösterilmektedir şarj oluyor. 

<!-- 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ün özelliklerine animasyon ekler gösterir. Animasyonlu bir vektör grafiği üç ayrı kaynak dosyaları halinde veya çekilebilir öğenin tamamını tanımlayan tek bir XML dosyası olarak oluşturabilirsiniz. Hadi Daha iyi anlamak için iki yaklaşımı da inceleyin: Birden çok XML dosyası ve Tek XML dosyası olarak kaydedin.

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'inde kullanılan animator XML dosyaları dosya: 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ı tek bir dosyada birleştirebilirsiniz. XML paketi biçiminde. Uygulamayı oluştururken aapt etiketi ayrı kaynaklar oluşturur ve animasyonlu vektörü. Bu yaklaşım, Build Tools 24 veya sonraki bir sürümü gerektirir ve 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ü

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

Android Studio 1.4, vektör için sınırlı uyumluluk desteği sundu çekilebilir dosyalar oluşturun. Ancak, çizilebilir vektör animasyonlu vektör çekilebilir destek Kitaplıkları hem esneklik hem de geniş kapsamlı uyumluluk — bir destek kitaplığıdır, dolayısıyla tüm Android 2.1'e (API düzeyi 7+) kadarki Android platform sürümleri. Yapılandırmak için uygulamasında vektör destek kitaplıklarını kullanmak için vectorDrawables öğesini uygulama modülündeki build.gradle dosyanıza ekleyin.

vectorDrawables öğesini yapılandırmak için aşağıdaki kod snippet'ini kullanın. öğe:

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 kullanabilirsiniz ve Tümünde AnimatedVectorDrawableCompat Android 4.0 (API düzeyi 14) ve sonraki sürümleri çalıştıran cihazlarda. Android'in işleyiş şekli Çekilebilir dosyaları yükler, ancak XML dosyası gibi çekilebilir bir kimliği kabul eden her yeri yüklemez. dosyası, vektör çizimlerinin yüklenmesini destekler. İlgili içeriği oluşturmak için kullanılan android.support.v7.appcompat paketine bir numara eklendi özellikleri daha kolay kullanılır hale getirdim. İlk olarak, Şunları içeren android.support.v7.appcompat paketi: ImageView veya ImageButton ve FloatingActionButton, şunları yapabilirsiniz: çekilebilir vektörlere referans vermek için yeni app:srcCompat özelliğini kullanma yanı sıra android:src tarafından kullanılabilen diğer çekilebilirler: 

<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 kullanabilirsiniz. AppCompat kullanılıyor app:srcCompat, Google Analytics 4'te tarama yapmanın eklemeniz gerekir.

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

  • Yolun Değiştirilmesi (PathType değerlendirici) Dönüşüm için kullanılır ilerler.
  • Yol İnterpolasyonu Esnek bir yol tanımlamak için kullanılır sistem tanımlı yerine interpolatör (yol olarak gösterilir) DoğrusalInterpolator gibi interpolatörler kullanılır.

Destek Kitaplığı 26.0.0-beta1 ve sonraki sürümler şu özellikleri destekler:

  • Yol boyunca hareket et Geometri nesnesi hareket edebilir. rastgele bir yol boyunca gösterilir.

Destek kitaplığını kullanan birden fazla XML dosyası örneği

Aşağıdaki XML dosyaları, birden fazla XML dosyası kullanma yaklaşımını göstermektedir kullanabilirsiniz.

  • 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'inde kullanılan animator XML dosyası dosya: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Tek XML dosyası

Aşağıdaki XML dosyası, tek XML dosyası kullanma yaklaşımını göstermektedir kullanabilirsiniz. Uygulamayı oluştururken aapt etiketi ayrı kaynaklar oluşturur ve animasyonlu vektörü. Bu yaklaşım, Build Tools 24 veya sonraki bir sürümü gerektirir ve 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>