android - vectoriales - tipos de software de diseño vectorial

¿Por qué mi escala de dibujo vectorial no es la esperada?

Question

Estoy intentando usar dibujos vectoriales en mi aplicación de Android. De http://developer.android.com/training/material/drawables.html (el énfasis es mío):

En Android 5.0 (API Nivel 21) y superior, puede definir dibujables vectoriales, que se escalan sin perder definición.

Usando este dibujable:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="@color/colorPrimary" android:pathData="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />

y este ImageView:

<ImageView
android:layout_width="400dp"
android:layout_height="400dp"
android:src="@drawable/icon_bell"/>

produce esta imagen borrosa cuando intenta mostrar el ícono a 400dp (en un dispositivo móvil de alta resolución de alrededor de 2015 con lollipop):

Cambiar el ancho y la altura en la definición del vector dibujable a 200dp mejora significativamente la situación en el tamaño renderizado de 400dp. Sin embargo, establecer esto como dibujable para un elemento TextView (es decir, un icono a la izquierda del texto) ahora crea un gran icono.

Mis preguntas:

1) ¿Por qué hay una especificación de ancho / alto en el vector dibujable? Pensé que el punto de todo esto es que se escalan hacia arriba y hacia abajo sin pérdida, lo que hace que el ancho y la altura no tengan sentido en su definición.

2) ¿Es posible usar un solo vector dibujable que funcione como un dibujo de 24dp en un TextView pero se amplíe bien para usar también imágenes mucho más grandes? Por ejemplo, ¿cómo evito crear múltiples dibujos vectoriales de diferentes tamaños y en su lugar uso uno que se ajuste a mis requisitos renderizados?

3) ¿Cómo uso efectivamente los atributos de ancho / alto y cuál es la diferencia con viewportWidth / Height?

Detalles adicionales:

• El dispositivo está ejecutando API 22
• Usando Android Studio v1.5.1 con Gradle versión 1.5.0
• El manifiesto es compilar y objetivo nivel 23, nivel mínimo 15. También he intentado mover el nivel mínimo a 21, pero esto no hizo ninguna diferencia.
• Descompilar el APK (con el nivel mínimo establecido en 21) muestra un único recurso XML en la carpeta dibujable. No se producen imágenes rasterizadas.

Answer 1

1) ¿Por qué hay una especificación de ancho / alto en el vector dibujable? Pensé que el punto de todo esto es que se escalan hacia arriba y hacia abajo sin pérdida, lo que hace que el ancho y la altura no tengan sentido en su definición.

Para las versiones de SDK menores de 21 donde el sistema de compilación necesita generar imágenes ráster y como el tamaño predeterminado en los casos en que no especifique el ancho / alto.

2) ¿Es posible usar un único vector dibujable que funcione como un dibujo dibujable de 24dp en un TextView, así como una gran imagen de ancho de pantalla cercana?

No creo que esto sea posible si también necesita apuntar a SDK menores de 21.

3) ¿Cómo uso efectivamente los atributos de ancho / alto y cuál es la diferencia con viewportWidth / Height?

Documentation: (en realidad no es muy útil ahora que lo releí ...)

android:width

Se utiliza para definir el ancho intrínseco del dibujable. Esto admite todas las unidades de dimensión, normalmente especificadas con dp.

android:height

Se utiliza para definir la altura intrínseca del dibujable. Esto admite todas las unidades de dimensión, normalmente especificadas con dp.

android:viewportWidth

Se utiliza para definir el ancho del espacio de la vista. Viewport es básicamente el lienzo virtual donde se dibujan los caminos.

android:viewportHeight

Se utiliza para definir la altura del espacio de la vista. Viewport es básicamente el lienzo virtual donde se dibujan los caminos.

Más documentación:

Android 4.4 (nivel de API 20) y versiones anteriores no son compatibles con los vectores dibujables. Si su nivel mínimo de API se establece en uno de estos niveles de API, Vector Asset Studio también indica a Gradle que genere imágenes ráster del vector dibujables para compatibilidad con versiones anteriores. Puede referirse a los activos vectoriales como Drawable en código Java o @drawable en código XML; cuando se ejecuta la aplicación, el vector o la imagen ráster correspondiente se muestra automáticamente según el nivel de API.

Editar: algo extraño está sucediendo. Aquí están mis resultados en el emulador SDK versión 23 (el dispositivo de prueba Lollipop + está muerto en este momento ...):

Y en el emulador SDK versión 21:

Answer 2

1) ¿Por qué hay una especificación de ancho / alto en el vector dibujable? Pensé que el punto de todo esto es que se escalan hacia arriba y hacia abajo sin pérdida, lo que hace que el ancho y la altura no tengan sentido en su definición.

Este es solo el tamaño predeterminado del vector en caso de que no lo defina en la vista de diseño. (es decir, utiliza contenido de ajuste para la altura y el ancho de su vista de imagen)

2) ¿Es posible usar un único vector dibujable que funcione como un dibujo dibujable de 24dp en un TextView, así como una gran imagen de ancho de pantalla cercana?

Sí, es posible y no he tenido ningún problema con el cambio de tamaño siempre que el dispositivo en ejecución esté usando lollipop o superior. En las API anteriores, el vector se convierte en png para diferentes tamaños de pantalla cuando compila la aplicación.

3) ¿Cómo uso efectivamente los atributos de ancho / alto y cuál es la diferencia con viewportWidth / Height?

Esto afecta cómo se usa el espacio alrededor de su vector. es decir, puede usarlo para cambiar la "gravedad" del vector dentro de la ventana gráfica, hacer que el vector tenga un margen predeterminado, dejar ciertas partes del vector fuera de la ventana gráfica, etc. Normalmente, simplemente las establece en el mismo tamaño.

Answer 3

AppCompat 23.2 presenta dibujos vectoriales para todos los dispositivos con Android 2.1 y superior. Las imágenes se escalan correctamente, independientemente del ancho / alto especificado en el archivo XML del dibujo vectorial. Desafortunadamente, esta implementación no se usa en el nivel API 21 y superior (a favor de la implementación nativa).

La buena noticia es que podemos obligar a AppCompat a usar su implementación en los niveles API 21 y 22. La mala noticia es que tenemos que usar la reflexión para hacer esto.

En primer lugar, asegúrese de estar utilizando la última versión de AppCompat y de haber habilitado la nueva implementación de vectores:

android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
dependencies {
compile ''com.android.support:appcompat-v7:23.2.0''
}

Luego, llame a useCompatVectorIfNeeded(); en onCreate () de su aplicación:

private void useCompatVectorIfNeeded() {
int sdkInt = Build.VERSION.SDK_INT;
if (sdkInt == 21 || sdkInt == 22) { //vector drawables scale correctly in API level 23
try {
AppCompatDrawableManager drawableManager = AppCompatDrawableManager.get();
Class<?> inflateDelegateClass = Class.forName("android.support.v7.widget.AppCompatDrawableManager$InflateDelegate");
Class<?> vdcInflateDelegateClass = Class.forName("android.support.v7.widget.AppCompatDrawableManager$VdcInflateDelegate");
Constructor<?> constructor = vdcInflateDelegateClass.getDeclaredConstructor();
constructor.setAccessible(true);
Object vdcInflateDelegate = constructor.newInstance();
Class<?> args[] = {String.class, inflateDelegateClass};
Method addDelegate = AppCompatDrawableManager.class.getDeclaredMethod("addDelegate", args);
addDelegate.setAccessible(true);
addDelegate.invoke(drawableManager, "vector", vdcInflateDelegate);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InstantiationException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}

Finalmente, asegúrese de estar usando app:srcCompat lugar de android:src para configurar la imagen de su ImageView:

<ImageView
android:layout_width="400dp"
android:layout_height="400dp"
app:srcCompat="@drawable/icon_bell"/>

¡Tus dibujos vectoriales ahora deberían escalar correctamente!

Answer 4

Aquí hay nueva información sobre este problema:

https://code.google.com/p/android/issues/detail?id=202019

Parece que usar android:scaleType="fitXY" hará que se android:scaleType="fitXY" correctamente en Lollipop.

De un ingeniero de Google:

Hola, avíseme si scaleType = ''fitXY'' puede ser una solución alternativa para que la imagen se vea nítida.

El malvavisco Vs Lollipop se debe a un tratamiento especial de incrustación agregado al malvavisco.

Además, para sus comentarios: "Comportamiento correcto: el vector dibujable debe escalar sin pérdida de calidad. Por lo tanto, si queremos usar el mismo activo en 3 tamaños diferentes en nuestra aplicación, no tenemos que duplicar vector_drawable.xml 3 veces con diferentes tamaños codificados ".

Aunque estoy totalmente de acuerdo en que este debería ser el caso, en realidad, la plataforma Android tiene problemas de rendimiento de tal manera que todavía no hemos llegado al mundo ideal. Por lo tanto, se recomienda utilizar 3 vectores_drawable.xml diferentes para un mejor rendimiento si está seguro de que desea dibujar 3 tamaños diferentes en la pantalla al mismo tiempo.

Básicamente, el detalle técnico es que estamos usando un mapa de bits debajo del gancho para almacenar en caché la representación de ruta compleja, de modo que podamos obtener el mejor rendimiento de redibujado, a la par con el dibujo de un mapa de bits dibujable.

Answer 5

Intento hacerlo de estas maneras pero desafortunadamente, ninguno de ellos funcionó. Intento fitXY en ImageView , intento usar la app:srcCompat pero ni siquiera puedo usarlo. pero encontré un truco:

establezca el Drawable en el background de su ImageView .

Pero el punto de esta manera es las dimensiones de Vistas. Si su ImageView tiene dimensiones incorrectas, Drawable obtiene Stretch. debe controlarlo en versiones anteriores a la piruleta o usar algunas vistas PercentRelativeLayout .

Espero que sea útil.

Answer 6

Para mí, la razón que hizo que los vectores se convirtieran a png fue android:fillType="..." en mi vector dibujable. Cuando eliminé todas las apariciones de este atributo en mi dibujable , la próxima vez que se compiló la aplicación, todo estuvo bien.

Answer 7

Resuelvo mi problema, solo cambio el tamaño de la imagen vectorial Desde el principio fue un recurso como:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="24dp"
android:height="24dp"
android:viewportHeight="300"
android:viewportWidth="300">

Y lo he cambiado a 150dp (tamaño de ImageView en diseño con este recurso vectorial) como:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="150dp"
android:height="150dp"
android:viewportHeight="300"
android:viewportWidth="300">

Me esta funcionando.

Answer 8

Primero : importe svg a drawble: (( https://www.learn2crack.com/2016/02/android-studio-svg.html ))

1-Haga clic derecho en la carpeta dibujable seleccione Nuevo -> Vector activo

2- El Vector Asset Studio le ofrece la opción de seleccionar los iconos de Material incorporados o su propio archivo svg local. Puede anular el tamaño predeterminado si es necesario.

Segundo : si desea soporte de Android API 7+, debe usar la grabación de la biblioteca de soporte de Android (( https://.com/a/44713221/1140304 ))

1- agregar

vectorDrawables.useSupportLibrary = true

a su archivo build.gradle.

2-Use el espacio de nombres en su diseño que tiene imageView:

xmlns:app="http://schemas.android.com/apk/res-auto"

Tercero : configure imageView con android: scaleType = "fitXY" y use la aplicación: srcCompat

 <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="@drawable/ic_menu" />

Cuarto : si desea establecer svg en código java, debe agregar la línea siguiente en oncreate methoed

 @Override
protected void onCreate(Bundle savedInstanceState)
{
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}