vectores - vector drawable android gradle

Gráficos vectoriales en Android

Question

Estoy trabajando en una aplicación que muestra la base de datos de imágenes de otra persona. Las imágenes que tienen son todas vectoriales y se pueden convertir a cualquier formato, sin embargo mantenerlas en formato vectorial es bueno porque los usuarios probablemente querrán acercarse más.

La pregunta es, ¿existe una forma incorporada de mostrar un gráfico vectorial en Android? El formato no importa, podemos convertir. El formato actual que estamos considerando es PDF, pero dado que no hay soporte nativo para PDF, tendré que hacer algo bastante complejo para que funcione (por ejemplo, integrando poppler en mi aplicación a través del NDK). La alternativa es simplemente convertir los gráficos vectoriales en un formato más simple (JPG, GIF), pero prefiero evitar eso.

Answer 1

Esta pregunta es vieja. Pero espero que mi respuesta ayude a los futuros visitantes aquí.

Colocamos archivos VectorDrawable en una carpeta dibujable. AnimatedVectorDrawable también es dibujable. Por lo tanto, colocamos estos archivos también en una carpeta dibujable. A continuación hay ejemplos de los dos:

vd_omega.xml

    <vector 

        xmlns:android="http://schemas.android.com/apk/res/android"
                android:width="1536dp"
                android:height="864dp"
                android:viewportWidth="1536.0"
                android:viewportHeight="864.0">

            <path
                android:name="my_vector"
                android:pathData="M  162   8
                q    -07    00   -41    26
                q    -34    27   -50    64
                q    -25    59   -19   117
                q     07    70    53   121
                q     57    63   151    62
                q     87   -01   140   -66
                q     46   -55    48  -142
                q     01   -56   -34  -105
                q    -38   -52   -77   -70
                l    -29   -11
                q     16   -01    31   -02
                q     59   -01   119   -02 "

                android:strokeLineCap="round"
                android:strokeColor="#f00f"
                android:fillColor="#00000000"
                android:strokeWidth="32"
                android:trimPathEnd="0"/>



        </vector>

avd_omega_animator.xml

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/vd_number8">

    <target
        android:name="my_vector"
        android:animation="@animator/trimpath_animator"/>       



</animated-vector>

Luego puedes animar usando un archivo animator como el siguiente:

trimpath_animator.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

<objectAnimator
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:repeatCount="0"
android:repeatMode="reverse"/>
</set>

Puede tener más animadores en el mismo archivo para varias propiedades.

En tu archivo de diseño

activity_main.xml

<RelativeLayout
    xmlna:android="http://schemasandroid.com/apk/res/android"
    xmlna:app="http://schemasandroid.com/apk/res-auto"
    xmls:tools="http:schemas.android.com/tools"
    android:id="@+some_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <ImageView
    android:id="@+id/my_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/avd_omega_animator"/>

</RelativeLayout>

En su actividad, escriba el siguiente código en onCreate:

importar ... importar ...

public class MyActivity extends Activity{

ImageView myImage;


...
...
setContentView(R.layout.activity_main);
myImage = (ImageView)findViewById(R.id.my_image);
Drawable d = myImage.getDrawable():
if(d instance of Animatable){
d.start;
}

y mira la diversión.

Así como utilicé getDrawable anteriormente, también puede usar otros métodos para colocar objetos dibujables en ImageView como setImageDrawable ("d"), etc.

También puede consultar "Introducción a las técnicas de animación de iconos" del Sr. Alex Lockwood en:

https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

para buenos ejemplos.

Espero darte una respuesta útil.

Todo el código de ejemplo que di más arriba funciona. También es simple y directo.

Answer 2

Mire la BetterVectorDrawable junto con el convertidor de SVG a VectorDrawable .

BetterVectorDrawable es la implementación VectorDrawable para Android 4.0+ con comportamiento de repliegue configurable en Android 5.0+.

SVG to VectorDrawable Converter es el convertidor por lotes de imágenes SVG a archivos de recursos Android VectorDrawable XML. La versión en línea está here .

Los enlaces apuntan a readmes, que proporcionan suficiente información sobre cómo usar lib y el convertidor.

Answer 3

Un autoenchufe desvergonzado, pero tal vez estaría interesado en ribbon-vg ? Es básico, puro Java y rápido; confiando en técnicas de vanguardia para descargar la CPU en el proceso de renderizado.

Answer 4

TinyLive SVG proporciona un visor SVG para Android. No lo he probado, así que no tengo idea si es bueno o no.

Al leer esta solicitud de error , parece que SVG podría estar habilitado en el navegador, y probablemente también en WebView , en Gingerbread. Pero dado que esta es una característica posible en futuras versiones, probablemente ahora no sea de mucha ayuda.

Answer 5

Creando Vector Drawables.

Sé que esta pregunta es antigua, pero me encontré con este mismo requisito y estoy feliz de saber que Android 5.0 es compatible con los vectores arrastrables ahora. Puede usar la etiqueta <vector> y los datos de ruta para crear vectores dibujables y funciona como un encanto en API-21. Aquí hay un ejemplo que produce una imagen vectorial en forma de corazón.

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="256dp"
    android:viewportWidth="32"
    android:viewportHeight="32">

    <!-- draw a path -->
    <path android:fillColor="#8fff"
        android:pathData="M20.5,9.5
                    c-1.955,0,-3.83,1.268,-4.5,3
                    c-0.67,-1.732,-2.547,-3,-4.5,-3
                    C8.957,9.5,7,11.432,7,14
                    c0,3.53,3.793,6.257,9,11.5
                    c5.207,-5.242,9,-7.97,9,-11.5
                    C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

El único problema al que me enfrenté hasta ahora es que no está incluido en las bibliotecas de soporte, por lo que no puede usarlas en API inferiores. Lo maravilloso es que, incluso puedes animar vectores arrastrables ahora. Aquí hay un ejemplo.

<!-- res/drawable/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>

Lea más sobre la animación dibujable de vectores here .

Answer 6

Eche un vistazo a svg-android : es una biblioteca relativamente nueva y solo es compatible con SVG Basic, pero es la biblioteca utilizada para dibujar Androidify. Hay ejemplos en la página de inicio sobre cómo obtener un Drawable de un SVG que parece ser lo que está buscando.