El Arsenal de Android – Diseño

Synth es la biblioteca incorporada de CRED para usar componentes neumorficos en su aplicación.

¿Qué es realmente el neumorfismo? Es un estilo impresionista, que juega con la luz, la sombra y la profundidad para crear una experiencia digital inspirada en el mundo físico. Esta es la definición de todos modos. Nuestro consejo es que lo pruebes para ver qué te parece. Si crea algo con Synth, háganoslo saber. Estamos emocionados de ver a dónde lo lleva.

Una nota para los curiosos: si desea obtener más información sobre Synth, tenemos una publicación que detalla el concepto y la filosofía de CRED detrás de él. Aquí.

Para iOS, marque Synth-iOS

Instalar

Puede instalar el sintetizador agregándolo a su archivo build.gradle:

dependencies {
  implementation 'club.cred.android:synth:1.0.0'
}

Limitaciones de uso y SDK

Para usar sintetizadores, el diseño principal que contiene las vistas del sintetizador debe especificar:

android:clipChildren="false"

Synth procesa componentes neumorficos solo en dispositivos que ejecutan API 28 (Pie) o posterior. Esto se debe a que Synth utiliza internamente BlurMaskFilter para renderizar sombras y luces dibujadas fuera de los límites de la vista; esto le permite alinear fácilmente las vistas de Synth con otras vistas.

El problema debajo de API 28 está haciendo BlurMaskFilter trabajo, debemos usar aceleracion de hardware en la vista que hace que las sombras y las luces se corten. Podríamos solucionar esto agregando relleno a las vistas (similar a cómo lo hace CardView) pero decidimos no hacerlo debido a problemas de alineación.

En lugar de esto, hemos decidido introducir una versión “compat” de todas nuestras vistas que representa un fondo de color simple en la vista en dispositivos bajo API 28.

Botón suave

El botón programable eleva la plataforma neumorfica sobre la que se dibuja el texto. esta plataforma elevada se puede personalizar de dos formas:

1. Al especificar un color para la plataforma, el sintetizador intentará calcular los colores de las sombras claras y oscuras.

<club.cred.synth.views.SynthButton
    app:neuButtonType="elevated_soft"
    app:neuPlatformColor="@color/button_platform_color"
    ... />

2. Especificar un aspecto completo para todos los aspectos de la plataforma elevada

<club.cred.synth.views.SynthButton
    app:neuButtonType="elevated_soft"
    ... />
    
<style name="button_platform_appearance">
    <item name="neuLightShadowColor">...</item>
    <item name="neuDarkShadowColor">...</item>
    <item name="neuFillStartColor">...</item>
    <item name="neuFillEndColor">...</item>
    <item name="neuFillPressedStartColor">...</item>
    <item name="neuFillPressedEndColor">...</item>
    <item name="neuBorderStartColor">...</item>
    <item name="neuBorderEndColor">...</item>
    <item name="neuBorderPressedStartColor">...</item>
    <item name="neuBorderPressedEndColor">...</item>
</style>

Botón plano

El botón plano crea una superficie plana sobre la plataforma neumorfica elevada. Esta superficie plana se puede personalizar de dos formas:

1. Al especificar un color para la superficie, el sintetizador intentará calcular degradados, bordes, etc. De la superficie

<club.cred.synth.views.SynthButton
    app:neuButtonType="elevated_flat"
    app:neuFlatButtonColor="@colo/button_surface_color"
    app:neuPlatformAppearance="@style/button_platform_appearance" 
    ... />

2. Especificar una apariencia completa para todos los aspectos de la superficie plana

<club.cred.synth.views.SynthButton
    app:neuButtonType="elevated_flat"
    app:neuFlatButtonAppearance="@style/button_flat_appearance"
    
    app:neuPlatformAppearance="@style/button_platform_appearance" 
    ... />
    
<style name="button_flat_appearance">
    <item name="neuButtonStartColor">...</item>
    <item name="neuButtonEndColor">...</item>
    <item name="neuButtonBorder1StartColor">...</item>
    <item name="neuButtonBorder1EndColor">...</item>
    <item name="neuButtonBorder2StartColor">...</item>
    <item name="neuButtonBorder2EndColor">...</item>
    <item name="neuButtonPressedDarkShadowColor">...</item>
</style>

Botón de imagen

El botón de imagen es simplemente una vista de imagen con una plataforma neumorfica

<club.cred.synth.views.SynthImageButton
    app:neuButtonType="elevated_soft"
    app:srcCompat="@drawable/ic_chevron_left"
    ... />

Agregar elementos de diseño a los botones

Puede agregar un elemento de diseño a un botón (a la izquierda del texto). Synth renderizará un pozo neumorphic en el que se hace el dibujable. Este pozo se puede personalizar de dos formas:

1. Al no especificar nada, el sintetizador tomará tanto el neuPlatformColor (si es un botón suave) o neuFlatButtonColor (si es un botón plano) y calcula los colores sombreados y los colores presionados.

<club.cred.synth.views.SynthButton
    app:neuButtonType="elevated_soft"
    app:neuButtonDrawable="@drawable/ic_plus"
    app:neuButtonDrawablePitRadius="20dp"
    
    app:neuPlatformColor="@color/button_platform_color"
    .. or ..
    app:neuFlatButtonColor="@color/button_surface_color"
    ... />

2. Especificar un aspecto completo para todos los aspectos del pozo de iconos

<club.cred.synth.views.SynthButton
    app:neuButtonType="elevated_flat"
    app:neuButtonDrawable="@drawable/ic_plus"
    app:neuButtonDrawablePitRadius="20dp"
    
    app:neuButtonIconAppearance="@style/button_icon_appearance"
    ... />
    
<style name="button_icon_appearance">
    <item name="neuFillStartColor">...</item>
    <item name="neuFillEndColor">...</item>
    <item name="neuFillPressedStartColor">...</item>
    <item name="neuFillPressedEndColor">...</item>
    <item name="neuButtonCompatColor">...</item>
</style>

Todos los atributos del botón

• PitView es ElevatedView son vistas simples que se pueden utilizar para simular una plataforma neumorfica en relieve o en relieve
• No son ViewGroups, por lo que lo ideal es que se puedan utilizar en un archivo. ConstraintLayout con otras vistas que están vinculadas a PitView o ElevatedView.
• Para usarlos libremente con tus opiniones, PitDrawable es ElevatedDrawable se puede establecer como fondo para vistas programáticas.

PitView

PitView las sombras se pueden especificar de dos formas:

1. Al especificar un color para el foso, el sintetizador intentará calcular las sombras del foso.

<club.cred.synth.views.PitView
  app:pitColor="@color/pit_color"  
  app:neuCornerRadius="14dp"
  ... />

2. Especificar un aspecto completo para todos los aspectos del pozo.

<club.cred.synth.views.PitView
  app:pitViewAppearance="@style/pit_view_appearance"  
  app:neuCornerRadius="14dp"
  ... />
    
<style name="pit_view_appearance">
    <item name="neuLightShadowColor">...</item>
    <item name="neuDarkShadowColor">...</item>
    <item name="softEdgeColor">...</item>
    <item name="neuCompatColor">...</item>
</style>

Atributos de PitView

Vista elevada

ElevatedView utiliza internamente la misma plataforma neumorfica que se utiliza para diseñar los botones. Para especificar la apariencia y las sombras de ElevatedView, puede utilizar los mismos atributos que el botón programable:

1. Especificando app:neuPlatformColor, el sintetizador calculará las sombras y sombras de la vista.
2. Especificando el aspecto completo usando app:neuPlatformAppearance (igual que el botón suave).

Atributos de ElevatedView

SDK mínimo

Admitimos un SDK mínimo de 21. Pero los componentes neuromórficos solo se renderizarán correctamente en dispositivos que ejecuten SDK versión 28 o posterior.

Contribuir

¡Las solicitudes de extracción son bienvenidas! Nos gustaría ayudar a mejorar esta biblioteca. Siéntase libre de buscar problemas abiertos en busca de cosas que necesiten mejorar. Si tiene una solicitud de función o un error, abra un nuevo problema para que podamos localizarlo.

Colaboradores

Synth no habría sido posible si no fuera por las contribuciones de los equipos de diseño y frontend de CRED. En particular:

Licencia

Copyright 2020 Dreamplug Technologies Private Limited.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.