La forma más sencilla de cambiar el diseño completo en escala de grises en Android. | autor: Abhishek Jangra | Octubre de 2020

Hola amigos, espero que estén bien. En este blog, permítanme compartirles algo bastante interesante que se puede lograr usando vistas personalizadas en Android.

Como sabrá, trabajo con un desarrollador de Android Gojek. Recientemente, mientras trabajaba en un proyecto en el que nuestro diseñador quería la posibilidad de mostrar algunos elementos en la pantalla como «desactivados», la tarea consistía en cambiar el grupo de visualización y todos sus subordinados. escala de grises esquema de color basado en algún disparador externo.

El primer acercamiento tEl sombrero que nos vino a la mente fue usar un fiel anciano findViewById , obtenga un enlace a las vistas y configúrelas en una escala de grises. Pero este enfoque requiere un mantenimiento muy alto porque los diferentes tipos de pantallas tienen diferentes formas de cambiar el color. Considere este ejemplo a continuación 👇🏻

Vista de muestra

Para configurar todas las vistas en escala de grises, debemos usar para TextView setTextColorestablecer un nuevo color. Para ImageView, podemos establecer un nuevo recurso que sea en escala de grises o usado setColorFilter. Pero cada vez que agregamos / eliminamos una nueva vista en este diseño, el estado desactivado se viola a menos que también procesemos el color gris para esa vista.

Y si queremos «habilitar» las vistas una vez más en base a otro disparador, es el trabajo en sí, guardando el color real antes de configurarlo en gris y, si es necesario, restaurarlo. Obviamente, podemos hacerlo mejor.

Después de mucha lectura y matemáticas más tarde …

Según mi comprensión del procesamiento de imágenes, idealmente deberían poder multiplicar cualquier color por la matriz de transformación RGB y dar como resultado un color en escala de grises. Luego intentamos encontrar una api similar en Android y ColorMatrix combinado con un cierto conocimiento de nuestras propias perspectivas era lo que estábamos buscando.

Decidimos experimentar con nuestra propia matriz usando la misma cantidad de rojo, verde y azul y use un filtro de color para CustomView que amplíe ConstraintLayout. Puede pausar y comprobar código completo aquí.

private val paint = Paint()
val cm = ColorMatrix()
cm.set(
floatArrayOf(
0.33f, 0.33f, 0.33f, 0f, 0f,
0.33f, 0.33f, 0.33f, 0f, 0f,
0.33f, 0.33f, 0.33f, 0f, 0f,
0f, 0f, 0f, 1f, 0f
)
)
paint.colorFilter = ColorMatrixColorFilter(cm)

Usamos este color en lona en el método dispatchDraw() y draw() . ¿Por qué ambos? Al renderizar un diseño, el fondo se renderiza primero en draw() método y luego se dibujan las vistas secundarias dispatchDraw() , por lo que al establecer el color aquí, todos los niños también usarán. Quiero que ambas vistas secundarias de fondo estén deshabilitadas, así que usé el color en ambos lugares. No tenga miedo de omitir cualquiera de ellos según su caso de uso.

Este enfoque es como enmascarar todo con un filtro de escala de grises que se encargará automáticamente de cualquier cambio en la vista en el futuro. También la guinda del pastel, si queremos eliminar la configuración lógica de escala de grises disabled falso lo haría, ¡no se necesita lógica adicional!

El resultado final

Consejo profesional

private val paint = Paint()

init {
val cm = ColorMatrix()
cm.set(
floatArrayOf(
0.149f, 0.149f, 0.149f, 0f, 141f,
0.149f, 0.149f, 0.149f, 0f, 141f,
0.149f, 0.149f, 0.149f, 0f, 141f,
0f, 0f, 0f, 1f, 0f
)
)
paint.colorFilter = ColorMatrixColorFilter(cm)
}

Si el color original es el blanco (255, 255, 255) y lo pasamos a la matriz,

R` = 255(0.149) + 255(0.149) + 255(0.149) + 141f = 255

Si no añadimos 141f como último parámetro, los blancos también se volverán grises y el estado desactivado no se verá tan bien, especialmente si tienes un fondo blanco.

Aquí tienes, puedes echarle un vistazo almacenamiento completo aquí e incluso pruébalo por ti mismo. Me encantan las situaciones que nos obligan a aprender algo nuevo y hacer las cosas más sólidas al mismo tiempo que lo hacen más fácil. ¿Ha tenido una experiencia similar al crear una aplicación? Compártelo en los comentarios debajo.

¡Mantente a salvo y quédate en casa hasta el próximo, Ciao! 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *