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.

compile 'com.github.navasmdc:MaterialDesign:[email protected]'

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

compile 'com.ogaclejapan.smarttablayout:library:[email protected]'

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í:

public class OnboardingFragment1 extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, 
					ViewGroup container, Bundle s) {

        return inflater.inflate(
          R.layout.onboarding_screen1,
          container,
          false
        );

    }
}

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.

public class OnboardingActivity extends FragmentActivity {

	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

	}
}

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

private ViewPager pager;
private SmartTabLayout indicator;
private ButtonFlat skip;
private ButtonFlat next;

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.

setContentView(R.layout.activity_onboarding);

pager = (ViewPager)findViewById(R.id.pager);
indicator = (SmartTabLayout)findViewById(R.id.indicator);
skip = (ButtonFlat)findViewById(R.id.skip);
next = (ButtonFlat)findViewById(R.id.next);

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.

FragmentStatePagerAdapter adapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
    }

    @Override
    public int getCount() {
    }
};

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

@Override
public int getCount() {
    return 3;
}

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

@Override
public Fragment getItem(int position) {
    switch (position) {
        case 0 : return new OnboardingFragment1();
        case 1 : return new OnboardingFragment2();
        case 2 : return new OnboardingFragment3();
        default: return null;
    }
}

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

pager.setAdapter(adapter);

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

indicator.setViewPager(pager);

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í:

skip.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        finishOnboarding();
    }
});

next.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(pager.getCurrentItem() == 2) { // The last screen
            finishOnboarding();
        } else {
            pager.setCurrentItem(
					pager.getCurrentItem() + 1, 
					true
			);
        }
    }
});

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.

indicator.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {
        if(position == 2){
            skip.setVisibility(View.GONE);
            next.setText("Done");
        } else {
            skip.setVisibility(View.VISIBLE);
            next.setText("Next");
        }
    }
});

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í:

private void finishOnboarding() {
	// Get the shared preferences
    SharedPreferences preferences =
            getSharedPreferences("my_preferences", MODE_PRIVATE);

	// Set onboarding_complete to true
    preferences.edit()
            .putBoolean("onboarding_complete",true).apply();

	// Launch the main Activity, called MainActivity
    Intent main = new Intent(this, MainActivity.class);
    startActivity(main);

	// Close the OnboardingActivity
    finish();
}

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.

// Get the shared preferences
SharedPreferences preferences =  getSharedPreferences("my_preferences", MODE_PRIVATE);

// Check if onboarding_complete is false 
if(!preferences.getBoolean("onboarding_complete",false)) {
	// Start the onboarding Activity
    Intent onboarding = new Intent(this, OnboardingActivity.class);
    startActivity(onboarding);

	// Close the main Activity
    finish();
    return;
}

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.