Menu comme Facebook et glissement d'une vue à une autre par le toucher dans Android 2.2

Question

Je veux mettre en œuvre un menu coulissant comme l'application FB ou G+ et j'ai trouvé quelques exemples de code à partir de Démonstration du menu FB et https://github.com/jfeinstein10/SlidingMenu

Ils sont bons au départ, mais j'ai besoin de quelque chose en plus. Comme ici, il ne fonctionne que sur le clic du bouton de menu, mais je veux le déplacer par des gestes également. Je veux avoir le comportement suivant : il y a une vue centrale et en déplaçant cette vue centrale vers la droite, une vue apparaîtra et en la déplaçant vers la gauche, le menu apparaîtra. Disons qu'il y a trois vues A, B, C et que lorsque je fais glisser C vers la gauche, A apparaît et que lorsque je fais glisser C vers la droite, B apparaît. C est au milieu de A et B.

1. la vue du milieu se déplace vers la droite

Déplacement vers la droite

2.déplacer la vue centrale vers le côté gauche

Déplacement vers la gauche

Ma question est la suivante : quelles sont les meilleures pratiques pour développer des vues de ce type ? Quelqu'un m'a dit que je devais utiliser des fragments et un afficheur de vues. Alors comment puis-je développer cela ? Existe-t-il des exemples de mise en œuvre réalisés par quelqu'un ? Toute aide et toute suggestion sont appréciées.

Pour référence, voir cette application qui utilise ce type de vues coulissantes en noir et blanc. Application Skout

Answer 1

La solution la plus simple peut être d'utiliser Android-sous-vêtements qui intègre la fonction de balayage de la lunette, d'après le fichier README du projet :

L'utilisateur pourra également contrôler le tiroir en glissant la lunette du côté gauche de l'écran pour l'ouvrir et en faisant de même du côté droit pour le fermer. Si vous voulez empêcher cette fonctionnalité tactile, vous pouvez appeler setDrawerEnabled(false).

Answer 2

Vous pouvez simplement utiliser TranslateAnimation sur la vue que vous souhaitez déplacer avec une fenêtre pop up pour le fondu et une autre fenêtre pop up pour votre menu. Je l'ai implémenté dans mon application, et cela fonctionne comme un charme.

Code :

public class SlidingOptionsMenuActivity extends Activity {

    /**
     * Signifies that the menu is already visible
     */
    boolean alreadyShowing = false;
    /**
     * Width of the current window
     */
    private int windowWidth;
    /**
     * Height of the current window
     */
    private int windowHeight;
    /**
     * Reference of the {@link PopupWindow} which dims the screen
     */
    private PopupWindow fadePopup;
    /**
     * The translate animation
     */
    private Animation ta;
    /**
     * The view which needs to be translated
     */
    private RelativeLayout baseView;
    /**
     * Reference of the {@link LayoutInflater}
     */
    LayoutInflater inflater;

    /*
     * (non-Javadoc)
     * 
     * @see android.app.Activity#onCreate(android.os.Bundle)
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Display display = getWindowManager().getDefaultDisplay();
        windowWidth = display.getWidth();
        windowHeight = display.getHeight();
        inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        findViewById(R.id.btnOptions).setOnClickListener(new OnClickListener() {

            /*
             * (non-Javadoc)
             * 
             * @see android.view.View.OnClickListener#onClick(android.view.View)
             */
            @Override
            public void onClick(View v) {
                if(!alreadyShowing){
                    alreadyShowing = true;
                    openSlidingMenu();
                }
            }
        });
    }

    /**
     * Fades the entire screen, gives a dim background
     */
    private void showFadePopup() {
        final View layout = inflater.inflate(R.layout.fadepopup, (ViewGroup) findViewById(R.id.fadePopup));
        fadePopup = new PopupWindow(layout, windowWidth, windowHeight, false);
        fadePopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);
    }

    /**
     * Opens the sliding Menu
     */
    private void openSlidingMenu() {
        showFadePopup();
        // The amount of view which needs to be moved out. equivalent to the
        // width of the menu
        int width = (int) (windowWidth * 0.6f);
        translateView((float) (width));
        int height = LayoutParams.FILL_PARENT;
        // creating a popup
        final View layout = inflater.inflate(R.layout.option_popup_layout,(ViewGroup) findViewById(R.id.popup_element));

        final PopupWindow optionsPopup = new PopupWindow(layout, width, height, true);
        optionsPopup.setBackgroundDrawable(new PaintDrawable());

        optionsPopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);

        optionsPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {

            public void onDismiss() {
                //Removing the fade effect
                fadePopup.dismiss();    
                //to clear the previous animation transition in
                cleanUp();
                //move the view out
                translateView(0);
                //to clear the latest animation transition out
                cleanUp();
                //resetting the variable
                alreadyShowing = false;
            }
        });
    }

    /**
     * This method is responsible for view translation. It applies a translation
     * animation on the root view of the activity
     * 
     * @param right The position to translate to
     */
    private void translateView(float right) {

        ta = new TranslateAnimation(0f, right, 0f, 0f);
        ta.setDuration(300);
        ta.setFillEnabled(true);
        ta.setFillAfter(true);

        baseView = (RelativeLayout) findViewById(R.id.baseView);
        baseView.startAnimation(ta);
        baseView.setVisibility(View.VISIBLE);
    }

    /**
     * Basic cleanup to avoid memory issues. Not everything is release after
     * animation, so to immediately release it doing it manually
     */
    private void cleanUp(){
        if (null != baseView) {
            baseView.clearAnimation();
            baseView = null;
        }
        if (null != ta) {
            ta.cancel();
            ta = null;
        }
        fadePopup = null;
    }
} //END of Class
//END of file

J'espère que cela vous aidera.

Answer 3

Une autre bibliothèque open source que j'ai trouvée et qui est très bonne est SlidingMenu . Il devrait répondre à vos besoins car vous pouvez ouvrir et fermer le tiroir par un clic sur le "Menu" et par un glissement de la lunette. J'ai trouvé que l'intégration de ce système avec une bibliothèque de barres d'action telle que ActionBarSherlock ou Android-actionbar de johannilsson est simplement une question de changer une ligne ou deux de code dans le projet de la bibliothèque. Le fichier Readme de la bibliothèque SlidingMenu explique comment l'intégrer à la bibliothèque ABSherlock.

Il convient de noter que le projet d'exemple SlidingMenu présente un certain nombre d'animations différentes d'ouverture et de fermeture de tiroirs. Ces animations sont parmi les meilleures que j'ai vues pour ce style de menu/navigation.

Answer 4

Il existe une voie officielle ... utile et légère (par l'utilisation de la bibliothèque de support v4) :

Créer un tiroir de navigation :

https://developer.Android.com/training/implementing-navigation/nav-drawer.html