Comment créer une superposition d'aide comme vous le voyez dans quelques applications Android et ICS?

Je souhaite créer des superpositions d'aide comme celles que vous voyez lorsque ICS se charge pour la première fois ou dans des applications comme ES File Explorer ou Apex Launcher (il y en a plus, mais je ne peux pas y penser pour le moment). S'agit-il simplement d'une disposition relative avec une vue superposée? Je n'ai pas pu trouver d'exemple de code pour faire une telle chose. Quelqu'un sait comment cela se fait ou a des idées?

Supposons que vous appeliez normalement setContentView(R.layout.main), mais lors de la première exécution, vous voulez avoir cette superposition.

Étape # 1: Créez un FrameLayoutcode Java et transmettez-le à setContentView().

Étape # 2: Utilisez LayoutInflaterpour gonfler R.layout.maindans le FrameLayout.

Étape # 3: Utilisez LayoutInflaterpour gonfler la superposition dans le FrameLayout.

Étape n ° 4: Lorsque l'utilisateur appuie sur le bouton (ou autre) pour ignorer la superposition, appelez removeView()pour supprimer la superposition du FrameLayout.

Étant donné que la superposition est un enfant ultérieur de FrameLayout, elle flottera au-dessus du contenu de R.layout.main.

"Coach mark" est "Help overlay" dans UX talk :-)

coach_mark.xml est la mise en page de votre marque de coach

coach_mark_master_view est l'identifiant de la vue la plus haute (racine) dans 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();
}

Ajout d'un échantillon de coach_mark.xml (à cette excellente solution fournie par Oded Breiner), il est donc facile pour les personnes de copier et coller pour voir rapidement l'exemple de travail.

Exemple de coach_mark.xml ici, changez le -> drawable / coach_marks en votre image:

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>

Et utilisez éventuellement ce thème pour supprimer le remplissage:

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

Vous pouvez le faire assez rapidement. Vous ajoutez, par exemple, un LinearLayout où vous mettez une image avec alpha qui correspondent à vos informations d'aide et que voulez-vous dessiner comme une superposition. Dans votre xml de votre activité, vous mettez cette mise en page dans un RelativeLayout après la mise en page de votre activité avec la visibilité Gone. Lorsque vous souhaitez dessiner les informations d'aide, il vous suffit de définir cette visibilité sur visible.

J'espère, je suis clair, si vous avez des questions, je serai heureux d'y répondre.

Voir mon autre réponse comment afficher par programme une disposition de superposition au-dessus de l'activité actuelle. Le fichier layout.xml de l'activité n'a pas besoin de connaître le skin de superposition. Vous pouvez mettre une superposition semi-transparente, ne couvrir qu'une partie de l'écran, une ou plusieurs vues de texte et des boutons dessus ... Comment superposer un bouton par programmation?

• créer un modèle res / layout / paused.xml RelativeLayout ou utiliser n'importe quelle mise en page au niveau supérieur
• créer une fonction pour afficher la peau de superposition
• la clé est d'obtenir la poignée de layout.xml, utilisez la classe LayoutInflater pour analyser xml pour afficher l'objet, ajouter une vue de superposition à la structure de disposition actuelle
• Mon exemple utilise une minuterie pour détruire l'objet de superposition en le supprimant complètement de la structure de la vue. C'est probablement ce que vous souhaitez également pour vous en débarrasser sans laisser de trace.

Mon objectif était que les activités principales ne connaissent pas de skin de superposition, les superpositions vont et viennent, de nombreuses superpositions différentes, toujours capables d'utiliser des fichiers texte overlay1.xml comme modèle et le contenu doit être mis à jour par programme. Je fais à peu près ce que CommonsWare nous a dit, mon message montre le code du programme réel pour commencer.

avertissement: OP "Merci pour votre contribution. C'est ainsi que j'ai imaginé que cela se faisait. Je dois donner crédit à la réponse ci-dessous" Le commentaire ne signifie pas ma réponse mais la réponse de CommonsWare. Stackoverflow a modifié l'ordre des publications.