• Android开源项目SlidingMenu深入剖析


    SlidingMenu简介:

    SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大量的应用都在使用这一效果。如Evernote、Google+、Foursquare等,国内的豌豆夹,人人,360手机助手等都使用SlidingMenu的界面方案。

    项目下载地址https://github.com/jfeinstein10/SlidingMenu
    注意: SlidingMenu依赖于另一个开源项目ActionBarSherlock,所以需要将ActionBarSherlock添加作为SlidingMenu的库工程,否则会报资源找不到错误。
    然后再将SlidingMenu添加到自己的工程中去。

    SlidingMenu集成常见错误:

    Jar mismatch! Fix your dependencies :引用的工程和自身工程以来的jar包版本不一致导致的冲突。确保SlidingMenu和ActionBarSherLock所使用的jar包版本一致

    如果使用到ActionBarSherLock的相关api,可能报找不到getSupportActionBar等ActionBarSherLock的方法。原因是使用ActionBarSherLock的Activity需继承于SherlockActivity,修改SlidingMenu library中的SlidingFragmentActivity,让它继承于SherlockFragmentActivity,重新编译library导入。

    SlidingMenu 常用属性介绍:

    menu.setMode(SlidingMenu.LEFT);//设置左滑菜单

    menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的屏幕范围,该设置为全屏区域都可以滑动

    menu.setShadowDrawable(R.drawable.shadow);//设置阴影图片

    menu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度

    menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度

    menu.setBehindWidth(400);//设置SlidingMenu菜单的宽度

    menu.setFadeDegree(0.35f);//SlidingMenu滑动时的渐变程度

    menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//使SlidingMenu附加在Activity上

    menu.setMenu(R.layout.menu_layout);//设置menu的布局文件

    menu.toggle();//动态判断自动关闭或开启SlidingMenu

    menu.showMenu();//显示SlidingMenu

    menu.showContent();//显示内容

    menu.setOnOpenListener(onOpenListener);//监听slidingmenu打开

    关于关闭menu有两个监听,简单的来说,对于menu close事件,一个是when,一个是after 

    menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭时事件

    menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭后事件

    左右都可以划出SlidingMenu菜单只需要设置
    menu.setMode(SlidingMenu.LEFT_RIGHT);属性,然后设置右侧菜单的布局文件

    menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右侧菜单的阴影图片

    使用Fragment实现SlidingMenu:

    1.首先Activity继承自SlidingMenu包下的SlidingFragmentActivity
    2. setContentView(R.layout.content_frame);//该layout为一个全屏的FrameLayout
    3. setBehindContentView(R.layout.menu_frame);//设置SlidingMenu使用的布局,同样是一个全屏的FrameLayout
    4.设置SlidingMenu左侧菜单的Fragment

            setBehindContentView(R.layout.menu_frame);
            FragmentTransaction t = this.getSupportFragmentManager().beginTransaction();
            leftMenuFragment = new MenuFragment();
            t.replace(R.id.menu_frame, leftMenuFragment);
            t.commit();

    MenuFragment其实就是一个Fragment,显示一个ListView
    然后点击ListView的每一项的时候,通知Activity切换不同的Fragment
    为了看清效果,我们新建5个Frament,分别是
    Fragment1, Fragment2, Fragment3, Fragment4, Fragment5
    在SlidingMenu中用ListView显示。

    设置主页面显示的Fragment:

    if (savedInstanceState == null) {//== null的时候新建Fragment1
    contentFragment = new Fragment1();
    } else {//不等于null,直接get出来
    //不等于null,找出之前保存的当前Activity显示的Fragment
    contentFragment = getSupportFragmentManager().getFragment(savedInstanceState, "contentFragment");
    }
    //设置内容Fragment
    getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.content_frame, contentFragment)
    .commit();



    在Activity的onSaveInstanceState中保存当前显示的Fragment
    getSupportFragmentManager().putFragment(outState, "contentFragment", contentFragment);
    设置SlidingMenu属性
    sm = getSlidingMenu();
    //如果只显示左侧菜单就是用LEFT,右侧就RIGHT,左右都支持就LEFT_RIGHT
    sm.setMode(SlidingMenu.LEFT_RIGHT);//设置菜单滑动模式,菜单是出现在左侧还是右侧,还是左右两侧都有
    sm.setShadowDrawable(R.drawable.shadow);//设置阴影的图片资源
    sm.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
    //sm.setBehindWidth(200);//设置菜单的宽
    sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
    sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的区域


    支持右侧划出菜单:
    //SlidingMenu可以同时支持划出左右两侧的菜单,互不冲突,而且动画优美,体验良好。
    sm.setSecondaryMenu(R.layout.menu_frame2);//设置右侧菜单
    sm.setSecondaryShadowDrawable(R.drawable.shadowright);//设置右侧菜单阴影的图片资源
    //右侧SlidingMenu的Fragment
     getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame2, new SampleListFragment()).commit();

    设置ActionBar可以被点击:
    getSupportActionBar().setHomeButtonEnabled(true);//actionbar主按键可以被点击
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示向左的图标
    setSlidingActionBarEnabled(false);//左右两侧slidingmenu的fragment是否显示标题栏


    切换主页面显示的Fragment:
    public void switchContent(Fragment f) {
    //给内容Fragment赋值,并在onSaveInstanceState时保存这个Fragment
    contentFragment = f;
    FragmentTransaction  t = getSupportFragmentManager().beginTransaction();
    t.replace(R.id.content_frame, f);
    t.commit();
    sm.showContent();

    使用普通Activity实现SlidingMenu
    :

     
    slidingMenu menu = new SlidingMenu(this);//直接new,而不是getSlidingMenu
    menu.setMode(SlidingMenu.LEFT);
    menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
    menu.setShadowDrawable(R.drawable.shadow);
    menu.setShadowWidthRes(R.dimen.shadow_width);
    menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
    menu.setBehindWidth(400);//设置SlidingMenu菜单的宽度
    menu.setFadeDegree(0.35f);
    menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//必须调用
    menu.setMenu(R.layout.menu_layout_left);//就是普通的layout布局
    menu.setBehindCanvasTransformer(mTransformer);

    相应SlidingMenu里的点击事件,因为SlidingMenu已经被包含在了Activity中了,所以直接findViewById(id),拿到view之后就可以进行相应的处理。

    支持左右两侧都能划出菜单
    menu.setSecondaryMenu(R.layout.menu_layout_right);
    menu.setSecondaryShadowDrawable(R.drawable.shadowright);

    右侧菜单一样直接findViewById(id),拿到view之后就可以任意处理了

    更换SlidingMenu的动画

    SlidingMenu支持左滑或者右滑时定义不同的动画,包括拉伸,缩放,旋转等动画。就是在滑动的过程中,SlidingMenu如何出现的动画。
    动画使用也很简单
    首先定义CanvasTransformer mTransformer;变量:

    mTransformer = new CanvasTransformer() {
    @Override
    public void transformCanvas(Canvas canvas, float percentOpen) {
    float scale = (float) (percentOpen*0.25 + 0.75);
    canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);
    }
    };

    然后将mTransformer对象设置给SlidingMenu即可,这个是缩放动画:

    private void initSlidUpCanvasTransformer() {
    mTransformer = new CanvasTransformer() {
    
    @Override
    public void transformCanvas(Canvas canvas, float percentOpen) {
    canvas.translate(0, canvas.getHeight()*(1-interp.getInterpolation(percentOpen)));
    }
    };
    }
    
    private static Interpolator interp = new Interpolator() {
    @Override
    public float getInterpolation(float t) {
    t -= 1.0f;
    return t * t * t + 1.0f;
    }
    };

    拉伸动画:

    mTransformer = new CanvasTransformer() {
    @Override
    public void transformCanvas(Canvas canvas, float percentOpen) {
    canvas.scale(percentOpen, 1, 0, 0);
    }
    });
  • 相关阅读:
    HDU 1022 Train Problem I
    HDU 1702 ACboy needs your help again!
    HDU 1294 Rooted Trees Problem
    HDU 1027 Ignatius and the Princess II
    HDU 3398 String
    HDU 1709 The Balance
    HDU 2152 Fruit
    HDU 1398 Square Coins
    HDU 3571 N-dimensional Sphere
    HDU 2451 Simple Addition Expression
  • 原文地址:https://www.cnblogs.com/android100/p/SlidingMenu.html
Copyright © 2020-2023  润新知