Jetpack Redactar campo de entrada OTP. Cree su propio campo de entrada OTP con… | de Ban Markovic | diciembre 2022

La contraseña de un solo uso (OTP), también conocida como contraseña dinámica, PIN de un solo uso y código de autorización de un solo uso (OTAC), es una contraseña válida para una sola sesión de inicio de sesión. La mayoría de las veces se recibe en un formato de código de 4 o 6 dígitos a través de SMS y se usa para implementar la autenticación de dos factores. La implementación de la compatibilidad con OTP en nuestras aplicaciones móviles requiere que creemos un campo de entrada de interfaz de usuario personalizado, que debe personalizarse estrictamente para manejar el código OTP recibido.

motivación

Dado que Jetpack Compose es un nuevo conjunto de herramientas de interfaz de usuario para el desarrollo de Android, quería escribir un artículo sobre cómo podemos crear nuestro propio campo de entrada de OTP personalizado. Campo de texto básico.Crear campos de entrada con Compose UI es fácil. Ya existe un componente material llamado TextField que podemos usar. Tiene muchas características integradas, ya que sigue los principios de diseño de materiales. Esto también tiene algunas desventajas, por ejemplo, si quisiéramos personalizar nuestro campo de entrada, habríamos tenido dificultades con TextField porque no es tan flexible. Es por eso que necesitamos otro componente que es un poco más bajo en comparación con TextField, pero que nos permite personalizarlo de la manera que más nos convenga. Estoy hablando de BasicTextField.

implementación

Primero, implementemos un BasicTextField simple que hace posible abrir un teclado solo con números. Podemos hacer eso configurando el opciones de teclado parámetros con tipo de teclado colocar númerocontraseña. Si se preguntaba por qué usamos NumberPassword y no solo Number, es porque el teclado que se abre para el tipo de teclado Number contiene caracteres de punto, coma y guión, y no usamos nada más que dígitos en nuestro campo de entrada OTP require .A continuación, debemos implementar más restricciones en nuestro campo de entrada. En caso de que sepamos que nuestra OTP tiene que ser un código de 6 dígitos, nuestro campo de entrada debe poder contener un máximo de 6 dígitos y no permitir que el usuario ingrese más que eso para el control adicional sobre la longitud de nuestra nueva cadena. En caso de que la nueva cadena contenga más de 6 caracteres, no queremos actualizar la nuestra. otpvalor. De esta forma, ignoramos todas las entradas del usuario para un séptimo carácter.En términos de funcionalidad, parece un cuadro de entrada OTP decente. Pero realmente necesitamos hacer algo con su estilo. Dado que OTP es un paso importante para la autorización del usuario y el usuario a veces no está familiarizado con este concepto, es muy necesario diseñar nuestro campo de entrada de tal manera que quede claro lo que se espera del usuario. En nuestro caso, requerimos que nuestro usuario ingrese un código de 6 dígitos; Esto se puede representar como seis pequeños bloques de campos de entrada para que los complete el usuario. Lo primero que me vino a la mente al pensar en cómo crear esto fue implementar seis campos de texto pequeños y hacer que interactúen entre sí. Es seguro decir que esta no es una solución limpia; Parece realmente exagerado y puede ser bastante complejo cambiar el cursor entre seis TextFields. Así que comencé a explorar las posibilidades de diseñar nuestro BasicTextField. Resulta que hay un parámetro llamado DecoraciónCajalo que nos ayuda a agregar decoraciones como imágenes, sugerencias, marcadores de posición, color de fondo, etc. Es una lambda componible que incluye acceso a cuadro de texto interno, que es básicamente nuestro BasicTextField original. Dentro de nuestra función decorationBox podemos decorar nuestro innerTextField y cambiar el aspecto de nuestro BasicTextField. Terminamos renderizando el componible en nuestro decorationBox en pantalla en lugar del BasicTextField normal. La idea aquí es usar decorationBox construyendo el aspecto de nuestra entrada OTP como queramos. En mi ejemplo, crearé seis componentes de texto con bordes redondeados y mostrarán los caracteres correspondientes del valor de entrada OTP del usuario. Esto se puede hacer con Fila Componible en uso repetir seis veces para hacer seis texto componentes con espaciadores entre ellos (porque nuestro ejemplo cubre el código OTP con seis dígitos). Hay una cosa más que debemos hacer al crear nuestra fila personalizada de seis textos, debemos pasar los dígitos correctos de nuestro valor de entrada OTP a los textos apropiados. Dado que tenemos información de índice en nuestra función de repetición, la usaremos para obtener el carácter correspondiente de la cadena de entrada. Lo único que debemos comprobar aquí es que la longitud de nuestra cadena de entrada puede ser inferior a seis; En estos casos, necesitamos pasar una cadena vacía a los textos que no están llenos en ese momento.La solución actual se ve bastante bien, en mi opinión, solo hay una mejora adicional que sería buena y es un indicador que muestra el campo actualmente enfocado donde debemos colocar nuestro próximo carácter que el usuario ingresa en el lugar actualmente enfocado, podemos fácilmente acceda a la longitud del valor de entrada OTP actual, y ese es el índice de nuestro campo enfocado actualmente. Como queremos que se destaque, podemos oscurecer un poco el color de su borde y aumentar el ancho del borde.¡Voila! Traté de mostrarles y explicarles cómo creé mi propio cuadro de entrada OTP. Con suerte, ha aprendido una o dos cosas y puede usar ese conocimiento para personalizar sus propios campos de entrada de OTP. Si desea acceder al código fuente, aquí está el repositorio de github de este ejemplo con algunos fragmentos de código limpio. ¡Quiero agradecerte por tu tiempo! Si este artículo le resultó útil, síganos para obtener más contenido similar, y si prefiere contenido pequeño sobre Android, puede considerar seguirme Gorjeo. En caso de que quieras conectarte a un nivel más profesional, aquí está mi LinkedIn.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.