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.

Twitter