如何使用jfeinstein10 / SlidingMenu在Android中实现两级滑动菜单？

Question

I want to create 2 level sliding menu in android. When i click on the first sliding menu item i need to show another sliding menu on the left to it. I created the first level sliding menu using the following code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView    
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/list_padding"
        android:paddingRight="@dimen/list_padding" />

</FrameLayout> 

Code Part

SlidingMenu menu;
menu = new SlidingMenu(this);
menu.setMode(SlidingMenu.LEFT);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidth(10);
menu.setFadeDegree(0.0f);
menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
menu.setBehindWidth(200);
menu.setMenu(R.layout.menu_frame);

How to proceed to make the 2nd level sliding menu?

Answer 1

Try with this:

SlidingMenu menu;
menu = new SlidingMenu(this);
menu.setMode(SlidingMenu.LEFT_RIGHT);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidth(10);
menu.setFadeDegree(0.0f);
menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
menu.setBehindWidth(200);
menu.setMenu(R.layout.menu_frame);
//Set the secondary menu
menu.setSecondaryMenu(R.layout.menu_frame);
menu.setSecondaryShadowDrawable(R.drawable.shadow);

Answer 2

We can achieve the SlideMenu using the TranslateAnimation in android. Create a frameLayout in XML and have MainXML page and then MainSlidingMenu. Adjacent to the MainSlidingMenu have the secondary slidingMenu. By default have the MainSlidingMenu and Secondary SlidingMenu invisible. If the button click or any required event happend show the Main SlidingMenu , then if there is a click/event in the MainSlidingmenu translate the MainMenu further to show the secondary sliding menu.

Answer 3

This is how I got it, using the mentioned library:

This layout contains the top level sliding menu, which references the layout of the menu (fragment_nav_menu) and the layout with the sub-menu layout reference as view above.

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sliding="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingMenuRoot"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    sliding:viewAbove="@layout/sliding_sub_menu"
    sliding:viewBehind="@layout/fragment_nav_menu"
    sliding:touchModeAbove="fullscreen"
    />

This would be the second level menu (sliding_sub_menu.xml), note that what you set as viewAbove here is going to be the actual top-level content.

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sliding="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingSubMenuRoot"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    sliding:viewAbove="@layout/fragment_content"
    sliding:viewBehind="@layout/fragment_sliding_menu"
    sliding:touchModeAbove="fullscreen"
/>

The content layout (fragment_content.xml) might be like this, a simple FrameLayout, and then, programmatically, you would add the desired fragment.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainContentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/app_background"
    />

Likewise, the sliding sub-menu content, is defined in the layout file (fragment_sliding_menu.xml) and used programmatically to ad a Fragment instance.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainContentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/app_background"
    />

To add a fragment to those FrameLayouts, use something like this (maybe also removing a potential previous fragment before adding a new one):

    FragmentTransaction fragTrans = getSupportFragmentManager().beginTransaction();
    fragTrans.add(R.id.slidingSubMenuFrame, SubMenuFragment.newInstance(this));
    fragTrans.commit();

I haven't tested it much yet, but seems to work. Of course, further logic is needed to implement the desired behavior of the menus (close listener, select items, etc).

Answer 4

JFeinstein sliding menu is a rich library. You can easily add as many menu levels as you desired. The idea is to use sliding menu as left or right sliding view of main sliding menu and so on. Here is a stand alone example which provides 2 level menu. What you need is to import JFeinstein sliding menu as library and extend your activity from SlidingFragmentActivity. I am putting complete activity code with comments to make things more clear.

 public class MainActivity extends SlidingFragmentActivity {

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

        // dummy views - content view
        TextView content = new TextView(this);
        content.setBackgroundColor(Color.WHITE);
        content.setText("content");
       // Menu view
        TextView menu = new TextView(this);
        menu.setBackgroundColor(Color.GREEN);
        menu.setText("menu");
        // 2nd level menu view
        TextView subMenu = new TextView(this);
        subMenu.setBackgroundColor(Color.LTGRAY);
        subMenu.setText("submenu");


        //configure sliding menu
        SlidingMenu sm = getSlidingMenu();
        sm.setMode(SlidingMenu.SLIDING_WINDOW);
        sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        sm.setBehindOffset(80);
        sm.setBehindScrollScale(0.25f);
        sm.setFadeDegree(0.25f);

        //Another sliding menu - for 2nd level or sub menu 
        SlidingMenu leftSlidingView = new SlidingMenu(this);
        leftSlidingView.setMode(SlidingMenu.SLIDING_WINDOW);
        leftSlidingView.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        leftSlidingView.setBehindOffset(80);
        leftSlidingView.setBehindScrollScale(0.25f);
        leftSlidingView.setFadeDegree(0.25f);

    //==== Required instruments has been created ;) lets put them at right places   

        // setting menu and sub-menu view 
        leftSlidingView.setContent(menu);  // at center of left sliding view
        leftSlidingView.setMenu(subMenu);  // at left of left sliding view

        //set content view
        setContentView(content);           // at center of main sliding view
        // finally, set  leftSlidingView as behind content  view of main view
        setBehindContentView(leftSlidingView); // at left of main sliding view

    }
}

Here is the result:

Hope it would help :)

Answer 5

I figured it out, it's so simple.

menu.setMenu(R.layout.layout_filemenu);
menu.setSecondaryMenu(R.layout.layout_main);
menu.setMode(SlidingMenu.LEFT_RIGHT);

setMenu -> Left side SetSecondaryMenu ->Right side

Hope this helps