Creación de pantallas de incorporación para aplicaciones de Android

Introducción

No hace falta ser un genio para darse cuenta de que una aplicación que hace que los nuevos usuarios se sientan bienvenidos y cómodos probablemente goce de mucha más popularidad que una aplicación que los deja perdidos y confundidos. Como resultado, muchos desarrolladores hoy en día intentan que sus usuarios tengan una buena experiencia de incorporación.

Si está desarrollando una aplicación innovadora cuyas características y usos pueden no ser obvios para los nuevos usuarios, debería considerar agregar algunas pantallas de incorporación a su aplicación. En este tutorial, le mostraré una manera fácil de crear y agregar rápidamente estas pantallas a su aplicación de Android.

1. Agrega dependencias de Gradle

Primero, agregue el Biblioteca de diseño de materiales como un compile adicción a build.gradle archivo de aplicación módulo para que pueda utilizar los elementos de la interfaz de usuario de Android L en versiones anteriores de Android.

Luego agregue un compile adicción por SmartTabLayout
, una biblioteca que ofrece un elemento de tira de título personalizado para el ViewPager componente.

También usaremos clases pertenecientes a la librería Android Support v4. Sin embargo, no tiene que agregarlo manualmente, ya que Android Studio lo agrega de forma predeterminada.

2. Definir el diseño de la integración. Activity

La integración Activity será responsable de mostrar todas las pantallas de integración. Por lo tanto, este Activity tendrá los siguientes widgets:

  • A ViewPager instancia que permite a los usuarios usar el gesto de deslizar para cambiar entre las pantallas de incorporación.
  • A ButtonFlat etiquetado Saltar, lo que permite a los usuarios impacientes omitir el proceso de incorporación.
  • A ButtonFlat etiquetado Próximo, que lleva al usuario a la siguiente pantalla de inicio.
  • A SmartTabLayout que sirve como indicador de página para ViewPager componente.

Después de colocar estos widgets en un RelativeLayout y colocándolos, el código en el archivo de diseño de integración XML Activity debería verse así:

Siéntase libre de cambiar el diseño para adaptarlo a sus preferencias. Llamaré a este archivo de diseño activity_onboarding.xml.

3. Definir el diseño de las pantallas de integración.

Para este tutorial, creará tres pantallas de incorporación. Para que el tutorial sea sencillo, las pantallas solo tendrán dos TextView widgets. En una aplicación real, también debe esforzarse por mantener las pantallas de incorporación lo más simples posible para evitar que los nuevos usuarios se sientan abrumados cuando abren su aplicación por primera vez.

El archivo XML de diseño de la primera pantalla se denomina onboarding_screen1.xml y tiene el siguiente contenido:

Utilice el mismo XML en los archivos de diseño de las otras dos pantallas y asígneles un nombre onboarding_screen2.xml y onboarding_screen3.xml. Por supuesto que tienes que cambiar el text propiedad de todos TextView widget para que cada pantalla de integración sea única.

4. Cree un Fragment para cada pantalla de integración

Cree una nueva clase Java y asígnele un nombre OnboardingFragment1.java. Que sea una subclase de Fragment y reemplazar su onCreateView método. Entonces llama al inflate método para crear un View usando el diseño que definimos en onboarding_screen1.xml y devuélvelo View. Tu clase debería verse así:

los Fragment para su primera pantalla de incorporación ya está lista. Siga el mismo proceso para crear dos más Fragment subclases, OnboardingFragment2.java y OnboardingFragment3.java, que utilizan las disposiciones definidas en onboarding_screen2.xml y onboarding_screen3.xml respectivamente.

5. Crea la integración Activity

Cree una nueva clase Java y asígnele un nombre OnboardingActivity.java. Que sea una subclase de FragmentActivity y reemplazar su onCreate método.

Luego declara un ViewPager, a SmartTabLayout, Y dos ButtonFlat widgets como variables miembros de la clase.

En el onCreate método, llamar setContentView para mostrar el diseño definido en activity_onboarding.xml y usa el findViewById método para inicializar las variables miembro.

Ahora debe crear un FragmentStatePagerAdapter que el ViewPager puede utilizar para mostrar pantallas de integración. Crea una nueva variable de tipo FragmentStatePagerAdapter y nombrarlo adaptador. Inicializarlo pasando el resultado de getSupportFragmentManager método a su constructor. Dado que esta es una clase abstracta, Android Studio generará automáticamente código para los métodos abstractos como se muestra a continuación.

En el getCount método, devuelve el número de pantallas de integración.

Agrega uno switch declaración al getItem método para devolver el correcto Fragment basado en el valor de position.

Todavía en el onCreate método, asociar el FragmentStatePagerAdapter con el ViewPager llamando al setAdapter método.

Ahora que el ViewPager está listo, apúntalo SmartTabLayout a él llamando al setViewPager método.

Ahora es el momento de agregar administradores de clics a la ButtonFlat widgets. Puede hacer esto usando el setOnClickListener método, pasando una nueva instancia de View.OnClickListener clase a eso.

En el gerente de skip botón, llamar a un método con nombre terminarOnboarding. Implementaremos este método en el siguiente paso.

En el gerente de next uso del botón setCurrentItem con getCurrentItem para ir a la siguiente pantalla de inicio. También si getCurrentItem devuelve la última pantalla de integración, llama a un método con nombre terminarOnboarding. Implementaremos este método en un momento.

El código para los controladores de botones debería verse así:

Es posible que desee realizar algunos cambios en el diseño de integración Activity, como la eliminación de skip y cambiar la redacción del next botón para Hecho cuando el usuario llega a la última pantalla de incorporación. Puede hacer esto agregando un SimpleOnPageChangeListener a la SmartTabLayout y anular su onPageSelected método.

6. Fin de la experiencia de integración

Cuando el usuario ha visto todas las pantallas de incorporación o ha optado por ignorarlas, debe finalizar la experiencia de incorporación llamando al terminarOnboarding método (este es el nombre que usamos en el paso anterior).

En el finishOnboarding método, obtenga una referencia al SharedPreferences objeto de la solicitud y definir un boolean por la llave onboarding_complete a true utilizando la putBoolean método. Usaremos esta clave en el siguiente paso para asegurarnos de que los usuarios solo vean las pantallas de incorporación si no han completado el proceso de incorporación.

Entonces crea un nuevo Intent y llamarlo startActivity método para ejecutar el principal Activity (la Activity que se supone que se abre cuando el usuario hace clic en el icono de la aplicación).

Finalmente, llama finish cerrar OnboardingActivity. Esto es lo que la implementación de finishOnboarding El método debería verse así:

7. Inicio de la integración Activity

La integración Activity debe comenzar lo antes posible si un usuario que no ha completado el proceso de incorporación abre la aplicación. Esto significa que agregará el código para detectar nuevos usuarios y ejecutar OnboardingActivity en el onCreate método principal de su aplicación Activity.

Comprobando si el SharedPreferences el objeto tiene una clave llamada onboarding_complete cuyo valor es true, puede determinar si el usuario ha completado el proceso de incorporación. Si el valor de la clave es false, cierra la principal Activity inmediatamente y crear una nueva Intent lancero OnboardingActivity. Eche un vistazo al siguiente bloque de código para comprender mejor este concepto.

8.Actualiza el manifiesto de la aplicación

Si aún no lo ha hecho, declare OnboardingActivity en el manifiesto de la aplicación.

9. Compile y ejecute

Ahora puede compilar su aplicación y ejecutarla en un dispositivo Android. Como esta será su primera ejecución, debería ver las pantallas de incorporación en lugar de la pantalla principal Activity.

Conclusión

En este tutorial, aprendió cómo crear pantallas integradas simples y agregarlas a su aplicación de Android. Utilice estas pantallas para responder preguntas de manera muy sucinta, como qué puede hacer su aplicación y cuándo debe usarse.

Para obtener la mejor experiencia de usuario, el proceso de incorporación debe ser lo más breve posible y el usuario debe poder omitirlo en cualquier momento.

En relación :  3 pequeñas cosas que puedes hacer para marcar una gran diferencia en tu relación
Moyens Staff
El personal de Moyens I/O lo ha motivado, brindándole consejos sobre tecnología, desarrollo personal, estilo de vida y estrategias que lo ayudarán.