首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

SlidingMenu+ViewPager兑现侧滑菜单效果

2013-10-08 
SlidingMenu+ViewPager实现侧滑菜单效果先简单介绍下SlidingMenu和ViewPager.ViewPager就是一个官方提供的

SlidingMenu+ViewPager实现侧滑菜单效果

先简单介绍下SlidingMenu和ViewPager.

ViewPager就是一个官方提供的多页面滑动组件,需要一个适配器来构建多个页面.

先来看看ViewPager对应的基本适配器PageAdapter,需要实现以下方法

getCount() 
这个方法,是获取当前窗体界面数
isViewFromObject() 
判断是否由对象生成 的view ,一般写法都比较固定
如:return object == view;
instantiateItem(ViewGroup, int) 
这个方法,return一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中 
destroyItem(ViewGroup, int, Object) 
这个方法,是从ViewGroup中移出当前View
finishUpdate(ViewGroup container)
在UI更新后完成的动作

ViewPager对应的监听器是PageChangeListner 当页面改变时触发

一般使用一个简单的子类监听器是SimpleOnPageChangeListener

onPageSelected(int position)
页卡选中的方法

平常使用FragmentPagerAdapter和FragmentStatePagerAdapter来构建ViewPager
FragmentPagerAdapter更多的用于少量界面的ViewPager,比如Tab划过的fragment会保存在内存中,尽管已经划过。
而FragmentStatePagerAdapter和ListView有点类似,会保存当前界面,以及下一个界面和上一个界面(如果有),最多保存3个,其他会被销毁掉。
注意的是FragmentStatePagerAdapter可能不经意间会造成内存未正常回收,严重导致内存溢出,比如图片资源没有释放,资源引用问题

setOffscreenPageLimit(int) 
设置预加载TAB页卡数量,默认是1,就是当前页卡显示的时候,预先加载下一个页卡.数量不能太大.设为0即不進行预加载



SlidingMenu

使用方法:

 首先,Activity要继承自SlidingFragmentActivity,而SlidingFragmentActivity又继承自SherlockFragmentActivity并实现SlidingActivityBase接口提供相应方法


左侧、右侧和两边
在BaseActivity中将SlidingMenu默认设置左面菜单,全屏可拉动及其他一些属性,下面看代码:
   // 设置menu布局,根据模式决定是从左侧还是右侧拉出
        setBehindContentView(R.layout.menu_frame);
        FragmentTransaction t = this.getSupportFragmentManager().beginTransaction();
        mFrag = new SampleListFragment();
        t.replace(R.id.menu_frame, mFrag);
        t.commit();
        //SlidingMenu控件的初始化
        SlidingMenu sm = getSlidingMenu();
        sm.setShadowWidthRes(R.dimen.shadow_width);//阴影宽度
        sm.setShadowDrawable(R.drawable.shadow);//阴影Drawable
        sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);//拉开后离边框距离
        sm.setFadeDegree(0.35f); //颜色渐变比例
        sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); //拉动事件区域 --全屏
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); //ActionBar返回启用


设置SlidingMenu的模式: 
        // 设置左侧menu
        sm.setMode(SlidingMenu.LEFT);      
      // 设置右侧menu
        sm.setMode(SlidingMenu.RIGHT);
当设置左右两侧时要注意,因为前面只添加了一个菜单布局,所以这里我们要另外再设置一个: 
        // 设置左右侧都有
        sm.setMode(SlidingMenu.LEFT_RIGHT);
        // 此时要再次添加布局菜单,上一个为左侧,这个为右侧
        sm.setSecondaryMenu(R.layout.menu_frame_two);
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.menu_frame_two,
                  new SampleListFragment()).commit();
        sm.setSecondaryShadowDrawable(R.drawable.shadowright);


可拉动触控范围
这个更简单,不多说:
        switch (checkedId) {
           case R.id.touch_above_full:
            // 设置触摸拖动模式--全屏
            getSlidingMenu().setTouchModeAbove(
                     SlidingMenu.TOUCHMODE_FULLSCREEN);
            break;
           case R.id.touch_above_margin:
            // 设置触摸拖动模式--边缘
            getSlidingMenu().setTouchModeAbove(
                     SlidingMenu.TOUCHMODE_MARGIN);
            break;
           case R.id.touch_above_none:
            // 设置触摸拖动模式--关闭
            getSlidingMenu().setTouchModeAbove(
                     SlidingMenu.TOUCHMODE_NONE);
            break;
        }


放缩比例
// 放缩比例
                getSlidingMenu().setBehindScrollScale(
                         (float) seekBar.getProgress() / seekBar.getMax());


拉出菜单宽度
// 菜单宽度(源码中作者把该操作隐藏)
                getSlidingMenu().setBehindWidth(
                         (int) (percent * getSlidingMenu().getWidth()));
                getSlidingMenu().requestLayout();


阴影
有无阴影
if (isChecked)
// 是否有阴影
   getSlidingMenu()
        .setShadowDrawable(
            getSlidingMenu().getMode() == SlidingMenu.LEFT ? R.drawable.shadow: R.drawable.shadowright);
 else
   getSlidingMenu().setShadowDrawable(null);


阴影宽度
// 设置阴影宽度
getSlidingMenu().setShadowWidth(width);
getSlidingMenu().invalidate();


颜色渐变


有无渐变
getSlidingMenu().setFadeEnabled(isChecked);


渐变比率
// 颜色渐变比例
getSlidingMenu().setFadeDegree(
        (float) seekBar.getProgress() / seekBar.getMax());


代码部分



SlidingMenu+ViewPager兑现侧滑菜单效果
SlidingMenu+ViewPager兑现侧滑菜单效果












 


 

3楼tom540066931昨天 16:35
求源码540066931
2楼zhang8704113天前 12:16
求 源码 一份 1131676669@qq.com 谢谢 楼主
1楼sfyc234天前 10:11
同上所问,求源码一份,楼主。sfalh13@163.com

热点排行