mercredi 11 avril 2012

Menu radial animé sur Android avec Satellite Menu

Au hasard d'une recherche sur des librairies utiles, je suis tombé sur un projet bien sympathique nommé Satellite Menu.

Ce projet s'inspire d'une appli qui a marqué les esprits par son menu radial très original, Path.
Le principe est très simple: un bouton circulaire en bas à gauche de l'écran. Lorsque l'on clique dessus, d'autres bouton viennent graviter autour de celui-ci pour accéder aux fonctionnalités de l'appli.




Voilà dans le principe.
Dans la pratique on va procéder comme suit:

  • Pour utiliser le fameux menu, d'abord déclarez le bouton principal dans votre layout:
     
    <framelayout 
        android:layout_height="fill_parent" 
        android:layout_width="fill_parent" 
        android:orientation="vertical" 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        xmlns:sat="http://schemas.android.com/apk/res/android.view.ext">
    
        <android.view.ext.satellitemenu 
            android:id="@+id/menu" 
            android:layout_gravity="bottom|left" 
            android:layout_height="wrap_content" 
            android:layout_margin="8dp" 
            android:layout_width="wrap_content" 
            sat:closeonclick="true"  
            sat:expandduration="500" 
            sat:mainimage="@drawable/ic_launcher" 
            sat:satellitedistance="170dp" 
            sat:totalspacingdegree="90">    
        </android.view.ext.satellitemenu>
    
    </framelayout>

     Vous noterez le préfixe sat, qui permet de définir les propriété propres au menu circulaire. (vous pouvez jouer avec ces options, je pense qu'elles sont assez explicites).
  • Dans votre activité, déclarez vos boutons comme de façon similaire à un menu classique:

    SatelliteMenu menu = (SatelliteMenu) findViewById(R.id.menu);
            
    List items = new ArrayList();
    items.add(new SatelliteMenuItem(4, R.drawable.ic_1));
    items.add(new SatelliteMenuItem(4, R.drawable.ic_3));
    items.add(new SatelliteMenuItem(4, R.drawable.ic_4));
    items.add(new SatelliteMenuItem(3, R.drawable.ic_5));
    items.add(new SatelliteMenuItem(2, R.drawable.ic_6));
    items.add(new SatelliteMenuItem(1, R.drawable.ic_2));
    
    menu.addItems(items);        
            
    menu.setOnItemClickedListener(new SateliteClickedListener() {
       
     public void eventOccured(int id) {
      Log.i("sat", "Clicked on " + id);
     }
    });
    
Voilà, vous savez désormais comment créer un beau menu radial original pour votre appli Android.

4 commentaires:

  1. Merci pour ce tutorial, cela marche nikel!
    Cependant, je souhaite le menu mettre en haut a gauche de ma fenetre.
    Je lui ai donc assigné dans le xml les parametres suivants:

    android:layout_gravity="top|left"
    sat:totalspacingdegree="-90"

    Le menu s ouvre bien par en bas, cependant, les menu-items ne se mettent pas au bon endroit. Y a t il une solution?

    RépondreSupprimer
    Réponses
    1. Quand tu dis que les menu-items ne sont pas au bon endroit, tu veux dire quoi exactement ?

      Supprimer
  2. Bonjour et merci pour ce tuto.

    J'ai malheureusement un problème : lorsque j'essaie de lancer l'appli menu sample je tombe sur un force close, que ce soit dans l'émulateur ou sur un téléphone.

    Et lorsque j'essaie d'incorporer ton code dans le mien, je bute sur deux-trois petites choses :

    à quel endroit doit-on positionner le code devant aller dans le fichier main.xml (entre quelles balises) car sur l'exemple le code concernant le menu est le seul présent dans le fichier. Donc lorsqu'on a déjà du code, où doit-on le mettre?

    Par avance merci

    RépondreSupprimer
  3. J'ai oublié de préciser que j'essaie e la faire tourner sur de l'android 2.2

    RépondreSupprimer

Twitter