Buscar..


Introducción

Como su nombre lo indica, los dibujos vectoriales se basan en gráficos vectoriales. Los gráficos vectoriales son una forma de describir elementos gráficos utilizando formas geométricas. Esto le permite crear un dibujo basado en un gráfico vectorial XML. Ahora no hay necesidad de diseñar imágenes de diferentes tamaños para mdpi, hdpi, xhdpi y etc. Con Vector Drawable, necesita crear la imagen solo una vez como un archivo xml y puede escalarla para todas las ppp y para diferentes dispositivos. Esto tampoco ahorra espacio sino que también simplifica el mantenimiento.

Parámetros

Parámetro Detalles
<vector> Utilizado para definir un vector dibujable.
<group> Define un grupo de rutas o subgrupos, más información de transformación. Las transformaciones se definen en las mismas coordenadas que la ventana gráfica. Y las transformaciones se aplican en el orden de escala, rotar y luego traducir.
<path> Define trayectos a dibujar.
<clip-path> Define la ruta para ser el clip actual. Tenga en cuenta que la ruta del clip solo se aplica al grupo actual y sus hijos.

Observaciones

Actualizar el archivo build.gradle .

dependencies {
    ...
   compile 'com.android.support:appcompat-v7:23.2.1'
}

Si está utilizando la versión 2.0 o superior del complemento Gradle , agregue el siguiente código.

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

Si está utilizando v1.5 o inferior del complemento Gradle , agregue el siguiente código.

// Gradle Plugin 1.5  
 android {  
   defaultConfig {  
     generatedDensities = []  
  }  

  // This is handled for you by the 2.0+ Gradle Plugin  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
 }

Lea las notas de la versión 23.2 de la biblioteca de soporte de Android para obtener más información.

NOTA: Incluso con AppCompat , Vector Drawables no funciona fuera de su aplicación en versiones anteriores de Android. Por ejemplo, no puede pasar vectores dibujables como iconos de notificación, ya que son manejados por el sistema y no por la aplicación. Ver esta respuesta para una solución.

Ejemplo de uso de VectorDrawable

Aquí hay un ejemplo de vector activo que realmente estamos usando en AppCompat:

res / drawable / ic_search.xml

<vector xmlns:android="..."
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal">

    <path
        android:pathData="..."
        android:fillColor="@android:color/white"/>

</vector>

Usando este dibujable, un ejemplo de declaración de ImageView sería:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_search"/>

También puedes configurarlo en tiempo de ejecución:

ImageView iv = (ImageView) findViewById(...);
iv.setImageResource(R.drawable.ic_search);

El mismo atributo y las llamadas también funcionan para ImageButton .

Ejemplo de VectorDrawable xml

Aquí hay un VectorDrawable simple en este archivo vectordrawable.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="v"
             android:fillColor="#000000"
             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
     </group>
 </vector>

Importando archivo SVG como VectorDrawable

Puede importar un archivo SVG como VectorDrawable en Android Studio, siga estos pasos:

Haga clic con el botón derecho en la carpeta res y seleccione nuevo > Vector Asset .

introduzca la descripción de la imagen aquí

Seleccione la opción Archivo local y busque su archivo .svg. Cambia las opciones a tu gusto y pulsa siguiente. Hecho.

introduzca la descripción de la imagen aquí



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow