Comment créer un écran de démonstration transparent pour une application Android ?

Question

J'essaie de créer un écran de démonstration semi-transparent qui n'est lancé que lorsqu'un utilisateur installe mon application pour la première fois. Voici un exemple tiré de l'application Pulse News :

Galaxy Nexus

Nexus One

Au lieu d'une fonction "tapoter pour quitter", je veux que l'utilisateur puisse faire défiler plusieurs pages de démonstration transparentes.

Pour ma première tentative, j'ai modifié un échantillon de l'ouvrage ViewPagerIndicator bibliothèque. J'ai utilisé des PNG semi-transparents dans des ImageViews à l'intérieur de chacun des fragments de l'afficheur. J'ai ensuite lancé cette activité en tant qu'activité de démonstration dans la méthode onCreate de mon activité principale.

Problème : l'activité principale n'est pas visible en arrière-plan, elle est simplement noire. J'ai essayé les solutions suivantes aquí mais ça n'a pas réglé le problème.

Existe-t-il une meilleure approche pour créer quelque chose comme ça, ou suis-je sur la bonne voie ?

J'avais également une autre question connexe qui dépend de la façon dont cette solution est mise en œuvre. J'essaie de superposer du texte et des flèches de manière à ce qu'ils pointent vers des composants particuliers de l'interface utilisateur en arrière-plan. Si j'utilise un fichier PNG contenant le texte et les flèches, il est probable qu'il ne sera pas mis à l'échelle correctement sur différents appareils. En d'autres termes, les flèches ne pointeront pas nécessairement vers le bon composant de l'interface utilisateur en arrière-plan. Existe-t-il un moyen de résoudre ce problème ?

Merci !

Voici mon code pour la première tentative :

DemoActivity.java

public class DemoActivity extends FragmentActivity {
    DemoFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo_activity);

        mAdapter = new DemoFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);
        //mPager.setAlpha(0);

        UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(mPager);
        indicator.setFades(false);
        mIndicator = indicator;
    }

}

DemoFragmentAdapter.java

class DemoFragmentAdapter extends FragmentPagerAdapter {
    protected static final int[] CONTENT = new int[] { R.drawable.demo1, R.drawable.demo2, R.drawable.demo3, R.drawable.demo4};

    private int mCount = CONTENT.length;

    public DemoFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return DemoFragment.newInstance(CONTENT[position % CONTENT.length]);
    }

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

    public void setCount(int count) {
        if (count > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    } }

DemoFragment.java

public final class DemoFragment extends Fragment {
    private static final String KEY_CONTENT = "TestFragment:Content";

    public static DemoFragment newInstance(int content) {
        DemoFragment fragment = new DemoFragment();
        fragment.mContent = content;
        return fragment;
    }

    private int mContent;

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

        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mContent = savedInstanceState.getInt(KEY_CONTENT);
        }
    }

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

        ImageView image = new ImageView(getActivity());
        image.setBackgroundResource(mContent);

        LinearLayout layout = new LinearLayout(getActivity());
        layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        layout.setGravity(Gravity.CENTER);
        layout.addView(image);

        return layout;
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt(KEY_CONTENT, mContent);
    }
}

Answer 1

Mettez vos informations de démo dans une activité différente et donnez-lui le thème suivant.

<style name="Transparent" parent="@android:style/Theme.NoTitleBar">
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>      
    <item name="android:backgroundDimEnabled">false</item>
</style>

Si vous utilisez ActionBarSherlock changez parent a @style/Theme.Sherlock .

Vous obtiendrez ainsi une activité transparente, ce qui vous permettra de voir l'activité située en dessous.

Maintenant, je suppose que vous voulez aussi un fond translucide.

Dans la mise en page xml (de votre activité transparente), ajoutez :

android:background="#aa000000" 

Les 6 derniers chiffres définissent la couleur : 000000 est noir.

Les 2 premiers définissent l'opacité : 00 est 100% transparent, ff est 100% opaque. Choisissez donc quelque chose entre les deux.

Answer 2

Avez-vous regardé sur ShowcaseView ? https://github.com/Espiandev/ShowcaseView .

En utilisant ça :

View showcasedView = findViewById(R.id.view_to_showcase);
ViewTarget target = new ViewTarget(showcasedView);
ShowcaseView.insertShowcaseView(target, this, R.string.showcase_title, R.string.showcase_details);

Answer 3

Pulse utilise un RelativeLayout avec quatre ImageViews et quatre TextViews. Le texte de la capture d'écran est constitué de TextViews avec leur propre police personnalisée.

Dans votre manifeste, ajoutez ce qui suit à votre activité :

Android:theme="@style/Theme.Transparent">

Dans votre RelativeLayout extérieur, ajoutez :

Android:background="#aa000000"

Dans votre fichier styles.xml :

<style name="Theme.Transparent" parent="android:Theme">
    <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:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>    

Vous trouverez un exemple de programmation de la police personnalisée à l'adresse suivante :

https://github.com/commonsguy/cw-Android/tree/master/Fonts/FontSampler/

La disposition de la visionneuse de hiérarchie ressemble à ceci (la boîte rouge est le conteneur RelativeLayout) :

Answer 4

Enveloppez votre mise en page principale dans un RelativeLayout puis ajoutez-y une deuxième disposition, quelque chose comme.. :

<RelativeLayout
    .... >

    <LinearLayout
        .... >

        <!-- Contents of your main layout -->

    </LinearLayout>

    <LinearLayout
        ....
        android:background="#44000000" > <!-- This is alpha 68/255, black -->

        <!-- Contents of your overlay layout -->

    </LinearLayout>

</RelativeLayout>

Je crois que la mise en page superposée est placée sous la mise en page principale dans le fichier XML (si ma mémoire est bonne). Vous pouvez alors créer votre propre mise en page, ViewFlipper ce que vous voulez dans cette deuxième mise en page.

Answer 5

Vous pourriez simplement consulter le code du lanceur Android, comme ils le font. Je ne connais pas leur implémentation.

Si c'était moi, je le ferais (s'il s'agit d'une simple superposition) afin de ne pas perturber la mise en page de votre application, il suffit de créer la mise en page de la superposition et de l'attacher à la mise en page de votre application en l'ajoutant directement à vos activités. WindowManager . Cela peut être aussi simple que d'ajouter un ImageView à la WindowManager écoutez les touches sur le ImageView ou d'avoir un délai d'attente pour supprimer l'accès à l'information. ImageView de votre Window .