Clever Geek Handbook

Pulido de la interfaz de usuario en Android: StateListAnimator

¡Hola, Habr! Anticipándose al inicio del curso “Desarrollador de Android. Profesional ” hemos preparado para ti una traducción de otro material interesante.







Pasamos la mayor parte del tiempo de desarrollo para que nuestra aplicación de Android no funcione en la interfaz de usuario; simplemente lanzamos una vista y comenzamos a escribir código. Me di cuenta de que a la mayoría de nosotros realmente no nos importa la interfaz de usuario. Y creo que esto es fundamentalmente incorrecto. Los desarrolladores de aplicaciones móviles también deben ocuparse de UI / UX. No estoy diciendo "sea un experto en la interfaz de usuario móvil", pero debe comprender el lenguaje y los conceptos de diseño.



Anteriormente escribí un artículo sobre sombras en el diseño de materiales y recibí muchas buenas críticas. Quiero agradecerles a todos. "Dominar las sombras en Android" habla sobre la elevación y la sombra en Android. En el mismo lugar, mostré cómo completé mi biblioteca de UI de código abierto con ellos. ( Diseño de escala ).



En este artículo, quiero mejorar mi biblioteca usando StateListAnimator y mostrarle paso a paso cómo lo haré.



Contenido



Este artículo cubre los siguientes temas:





Estados dibujables



Android tiene 17 estados diferentes para Drawable.







Puede que nunca hayamos conocido a algunos de ellos. No voy a ahondar en todos los estados. En la mayoría de los casos, se utiliza el pressed, enabled, windows focused, checkedy así sucesivamente. D. Si no declarar el estado de dibujable, se supone que este estado por defecto en Android.



Necesitamos comprender estos estados para poder escribir nuestro propio StateListDrawable .



StateListDrawable



Es esencialmente una lista de elementos dibujables, donde cada elemento tiene su propio estado. Para crear un StateListDrawable, necesitamos crear un archivo XML en una carpeta res/drawable. 



<item android:drawable="@drawable/i" android:state_pressed="true"/>


Este es un artículo. Tiene dos propiedades. Dibujable y Estado . 



<selector>
   <item
       android:drawable="@drawable/p"
       android:state_pressed="true"/>
   <item
       android:drawable="@drawable/default"/>
</selector>


Esto es StateListDrawable. Si no declaramos un estado para un elemento, como mencioné anteriormente, esto significa que este es el estado predeterminado .



¿Puedo usar ShapeDrawable?



Si. En lugar de usar android: drawable, puede agregar una forma arbitraria a su elemento. Aquí hay un elemento con ShapeDrawable .





StateListDrawable



Puede usar StateListDrawable desde el nivel de API 1. Por lo tanto, no hay ninguna restricción de nivel de API para StateListDrawable. 



<View
   android:layout_width="50dp"
   android:layout_height="50dp"
   android:foreground="@drawable/state_list_drawable"
   android:clickable="true"/>


Eso es todo. Ahora nuestra vista tiene un estado. Cuando el usuario haga clic en él, cambiará su color. Cuando el usuario lo suelte, tendrá un estado y color predeterminados.



Pero espere un segundo. ¿Se puede hacer clic ? ¿Por qué agregamos este atributo? ¿También necesitamos agregarlo? Si. Pero solo para vistas personalizadas. Se necesita tiempo para averiguarlo. Los botones funcionan bien sin agregar clics porque se puede hacer clic en ellos de forma predeterminada . Pero si desea utilizar StateListDrawable para View, ImageView, Custom View, etc., debe agregar el atributo en el que se puede hacer clic .




StateListDrawable Agregué



StateListDrawable en esta confirmación . Es similar al ejemplo que di arriba. Cuando el usuario hace clic en el diseño, se colorea. Pero mejoremos esto con StateListAnimator.



StateListAnimator



Recuerde que cuando hace clic en FloatingActionButton, su valor Z aumenta debido a la animación. Este es un StateListAnimator fuera de la pantalla, por así decirlo. Algunos widgets de material design tienen su propio StateListAnimator dentro.



Aclaremos esto con una pregunta sobre StackOverflow.







(Cómo eliminar el borde / sombra de los botones de paleta).



Si los widgets de Material Design tienen su propio StateListAnimator dentro, podemos establecerlos en null para eliminar estas funciones (no recomendado, no está diseñado para nada). Y ahora la respuesta suena mucho más lógica.





(Lollipop tiene una pequeña función desagradable llamada stateListAnimatorque maneja la altura de los botones, produciendo sombras.



Quitar stateListAnimatorpara deshacerse de las sombras.



Tiene varias opciones para hacer esto:



En código:



button.setStateListAnimator (null);)






Entonces, ¿cómo podemos crearlo?



Para comprender StateListAnimator, necesitamos comprender la animación de propiedades . Estoy no va a sumergirse en la animación propiedad en este artículo. Pero al menos quiero mostrarte los conceptos básicos.



Animando propiedades



Este es el ejemplo más simple de una propiedad en un objeto. X es una propiedad. 



class MyObject{
 
   private int x;
 
   public int getX() {
       return x;
   }
 
   public void setX(int x) {
       this.x = x;
   }
}


El sistema de animación de propiedades es un marco robusto que le permite animar casi cualquier cosa . Puede especificar animaciones para cualquier cambio de propiedad del objeto a lo largo del tiempo, independientemente de si se muestra en la pantalla o no . Una animación de propiedad cambia el valor de una propiedad (un campo en un objeto) durante un período de tiempo específico.







X es una propiedad . T es el momento . Durante la animación, la propiedad X se actualiza en el momento especificado. En general, así es como funciona la animación de propiedades. En lugar de un cuadro, puede haber una vista o cualquier objeto.



ValueAnimatorEs la clase base para animar propiedades. Puede configurar un oyente para actualizar ValueAnimator y observar los cambios de propiedad.



ObjectAnimator es una clase que hereda deValueAnimator . Puede usar ObjectAnimator si lo siguiente es más adecuado para usted:



  • Tienes un objeto (cualquier clase con alguna propiedad).
  • No desea ver el oyente ValueAnimator.
  • Quiere actualizar la propiedad del objeto automáticamente.


Entonces, si tenemos una vista (que es un objeto) y queremos actualizar la propiedad de la vista (coordenada x, coordenada y, rotación, traslación o cualquier otra propiedad para la que la vista tenga un getter / setter), podemos usar ObjectAnimator . Sigamos creando StateListAnimator. 



<selector>
 
   <item android:state_pressed="true">
      <objectAnimator
           android:duration="200"
           android:propertyName="translationZ"
           android:valueTo="6dp"
           android:valueType="floatType" />
   </item>
 
   <item>
      <objectAnimator
           android:duration="200"
           android:propertyName="translationZ"
           android:valueTo="0dp"
           android:valueType="floatType"/>
   </item>
 
</selector>




El botón FAB anima su propiedad "translationZ" cuando se presiona y se suelta.



Como dije antes, podemos usar la propiedad del objeto directamente sin observar los cambios en el animador. Cada vista tiene una propiedad translationZ. De esta manera podemos animar directamente translationZ usando ObjectAnimator.



También podemos combinar varios <objectAnimator>s en <set>. Cambiemos una vista de propiedad más. Escala X y Escala Y .



¡Aquí está el resultado! Ahora también crece cuando el usuario hace clic en él. Y aquí está el compromiso .







También puede definir otras propiedades en su animator.xml. Puede encontrar más información sobre el uso de ObjectAnimator aquí.



Eso es todo. Estoy planeando escribir más sobre ValueAnimator y ObjectAnimator. Esta es una gran API para animar un objeto.



¡Codificación exitosa!





More articles:


All Articles