Quiero crear superposiciones de ayuda como las que ves cuando ICS se carga por primera vez o en aplicaciones como ES File Explorer o Apex Launcher (hay más, pero no puedo pensar en ellas en este momento). ¿Es esto solo un diseño relativo con una vista encima de la otra? No he podido encontrar ningún código de muestra para hacer tal cosa. ¿Alguien sabe cómo se hace esto o tiene alguna idea?
Respuestas:
Supongamos que normalmente llamaría setContentView(R.layout.main), pero en la primera ejecución, desea tener esta superposición.
Paso # 1: Cree un FrameLayoutcódigo en Java y páselo a setContentView().
Paso # 2: Úselo LayoutInflaterpara inflar R.layout.mainen el FrameLayout.
Paso # 3: Úselo LayoutInflaterpara inflar la superposición en el FrameLayout.
Paso # 4: Cuando el usuario toca el botón (o lo que sea) para descartar la superposición, llame removeView()para eliminar la superposición del FrameLayout.
Dado que la superposición es un elemento secundario posterior de FrameLayout, flotará sobre el contenido de R.layout.main.
ViewGrouppara la capa de "marcas de entrenador" podría manejar eso, y hay bibliotecas (por ejemplo, ShowcaseView) que ofrecen implementaciones enlatadas de ese patrón.
La "marca del entrenador" es "Superposición de ayuda" en la charla UX :-)
coach_mark.xml es su diseño de marca de entrenador
coach_mark_master_view es el ID de la vista más alta (raíz) en coach_mark.xml
public void onCoachMark(){
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setContentView(R.layout.coach_mark);
dialog.setCanceledOnTouchOutside(true);
//for dismissing anywhere you touch
View masterView = dialog.findViewById(R.id.coach_mark_master_view);
masterView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dialog.dismiss();
}
});
dialog.show();
}Añadiendo una muestra de coach_mark.xml (a esta excelente solución proporcionada por Oded Breiner), por lo que es fácil para las personas copiar y pegar para ver el ejemplo de trabajo rápidamente.
Muestra de coach_mark.xml aquí, cambie -> drawable / coach_marks a su imagen:
coach_mark.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/coach_mark_master_view">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/coach_marks_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:src="@drawable/coach_marks" />
</RelativeLayout>
</LinearLayout>Y, opcionalmente, use este tema para eliminar el relleno:
<style name="WalkthroughTheme" parent="Theme.AppCompat">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>A dialog is a small window that prompts [...]. A dialog does not fill the screen and is normally used for modal events [...].,. Si utilizo este código, obtengo mi vista maestra comprimida en una pequeña porción de la pantalla. Si configuro android:layout_width="640dp" android:layout_height="480dp"(es decir, los valores reales de la pantalla con la que estoy probando), funciona correctamente. (por supuesto, esta no es una solución factible)
new Dialog(getContext(), R.style.WalkthroughTheme);
Puedes hacerlo bastante rápido. Agrega, por ejemplo, un LinearLayout donde coloca una imagen con alfa que corresponde a su información de ayuda y lo que desea dibujar como una superposición. En su xml de su actividad, coloca este diseño en un RelativeLayout después del diseño de su actividad con la visibilidad Gone. Cuando desee dibujar la información de ayuda, solo necesita configurar esta visibilidad como visible.
Espero, lo tengo claro, si tiene alguna pregunta, será un placer responderla.
Vea mi otra respuesta sobre cómo mostrar programáticamente un diseño de superposición sobre la actividad actual. El layout.xml de la actividad no necesita saber nada sobre la máscara de superposición. Puede colocar una superposición semitransparente, cubrir solo una parte de la pantalla, una o más vistas de texto y botones ... ¿Cómo superponer un botón mediante programación?
Mi objetivo era que las actividades principales no fueran conscientes de ningún aspecto de superposición, las superposiciones iban y venían, muchas superposiciones diferentes, aún podían usar archivos de texto overlay1.xml como plantilla, y el contenido debería actualizarse mediante programación. Hago más o menos lo que CommonsWare nos dijo que mi publicación muestra el código del programa real para comenzar.
descargo de responsabilidad: OPs "Gracias por sus comentarios. Así es como me imaginé que se haría. Tengo que dar crédito a la respuesta a continuación". El comentario no significa mi respuesta, sino la respuesta de CommonsWare. Stackoverflow ha cambiado el orden de las publicaciones.