superposicion - ¿Cómo creo una superposición de ayuda como la que se ve en algunas aplicaciones de Android e ICS?

superposición de pantalla samsung j7

Question

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 solo un diseño relativo con una vista sobre 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?

Answer 1

"Marca de entrenador" es "Superposición de ayuda" en la conversación de UX :-)

coach_mark.xml es el diseño de tu marca de entrenador

coach_mark_master_view es el id de la vista más alta (root) 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();
}

Agregando muestra de coach_mark.xml (a esta excelente solución dada por Oded Breiner), por lo que es fácil para personas copiar y pegar para ver el ejemplo de trabajo rápidamente.

Ejemplo de coach_mark.xml aquí, cambie el -> 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>

Answer 2

Puedes hacerlo bastante rápido. Usted agrega, por ejemplo, LinearLayout donde coloca una imagen con alfa que corresponde a su información de ayuda y qué desea dibujar como una superposición. En tu xml de tu actividad, colocas este diseño en una RelativeLayout después del diseño de tu actividad con la visibilidad Gone. Cuando desee obtener la información de ayuda, solo necesita establecer esta visibilidad en visible.

Espero, estoy claro, si tienes alguna pregunta, me gustaría responderlas.

Answer 3

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 el revestimiento superpuesto. Puede colocar la superposición semitransparente, cubrir solo una parte de la pantalla, una o más textview y botones en ella ... ¿Cómo superponer un botón de forma programática?

• crear res / layout / paused.xml plantilla RelativeLayout o usar cualquier diseño a nivel
• crear una función para mostrar la superposición de la piel
• la clave es obtener el control de layout.xml, usar la clase LayoutInflater para analizar xml para ver el objeto, agregar la vista de superposición a la estructura de diseño actual
• Mi ejemplo utiliza un temporizador para destruir el objeto superpuesto al eliminarlo completamente de la estructura de la vista. Esto es probablemente lo que también desea deshacerse de él sin dejar rastro.

Mi objetivo era que las actividades principales no tuvieran en cuenta ningún aspecto superpuesto, las superposiciones iban y venían, muchas superposiciones diferentes, todavía 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 su aporte. Así es como me imaginé que se estaba haciendo. Tengo que dar crédito a la respuesta a continuación", el comentario no significa mi respuesta, sino la respuesta de CommonsWare. ha cambiado los pedidos de publicaciones.

Answer 4

Supongamos que normalmente llama a setContentView(R.layout.main) , pero en la primera ejecución, desea tener esta superposición.

Paso # 1: Crea un FrameLayout en código Java y setContentView() a setContentView() .

Paso # 2: Usa LayoutInflater para inflar R.layout.main en FrameLayout .

Paso # 3: Usa LayoutInflater para inflar la superposición en FrameLayout .

Paso # 4: cuando el usuario toca el botón (o lo que sea) para cerrar la superposición, llame a removeView() para eliminar la superposición de FrameLayout .

Como la superposición es un elemento secundario de FrameLayout , flotará sobre los contenidos de R.layout.main .