Android iOS Dribbble风格边栏菜单实现

 

随着IOS7的推出,大量移动应用也开始进行了重新设计.,开始应用大量的扁平化.可以说现在IOS和Android的风格设计方面确实是在逐渐地靠拢.

ReisdeMenu 创意灵感来自于Dribbble(Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品,或者正在创作的作品.).

得益于Dribbble,这种IOS7风格的侧边栏首先应用在IOS上得到了实现:

https://github.com/romaonthego/RESideMenu

我们首先看一下IOS上实现的效果

                            

 

 

当然这里主要还是看一下在Android上如何来实现IOS风格的侧边栏,目前在github上也已经有相关的实现:

https://github.com/SpecialCyCi/AndroidResideMenu/blob/master

Android上的实现效果:

                            

                           

如何把该开源项目集成到我们的项目中呢?让我们一步步地看:

1. ResideMenu工程选择Use as Library选项,在目标工程属性-->Android-->Add Library将该项目以库的形式引用.

2. 如果不愿意以Add Library方式引用,需要将ResideMenu工程中src目录下所有类,lis下的nineoldandroids-library-2.4.0.jar(Android 3.0动画的兼容版本,类似于ActionbarShelock,作者是同一人),以及所用到的所有资源图片和布局文件.

3. 这里涉及到的侧边栏样式可根据需求自行修改,在此不作详细描述.

4. ResideMenu 的使用:

  对应的Activity的onCreate()声明周期中,构建不同的MenuItem并加入到ResideMenu中:

       // attach to current activity;
        resideMenu = new ResideMenu(this);
        resideMenu.setBackground(R.drawable.menu_background);
        resideMenu.attachToActivity(this);

        // create menu items;
        String titles[] = { "Home", "Profile", "Calendar", "Settings" };
        int icon[] = { R.drawable.icon_home, R.drawable.icon_profile, R.drawable.icon_calendar, R.drawable.icon_settings };
		// add menu items into residemenu
        for (int i = 0; i < titles.length; i++){
            ResideMenuItem item = new ResideMenuItem(this, icon[i], titles[i]);
            item.setOnClickListener(this);
            resideMenu.addMenuItem(item);
        }


打开/关闭菜单:

 

 

resideMenu.openMenu();
resideMenu.closeMenu();


 

监听菜单打开/关闭的事件:

 

resideMenu.setMenuListener(menuListener);
    private ResideMenu.OnMenuListener menuListener = new ResideMenu.OnMenuListener() {
        @Override
        public void openMenu() {
            Toast.makeText(mContext, "Menu is opened!", Toast.LENGTH_SHORT).show();
        }

        @Override
        public void closeMenu() {
            Toast.makeText(mContext, "Menu is closed!", Toast.LENGTH_SHORT).show();
        }
    };


如果想加入打开/关闭ResideMenu响应的手势支持,要在Activity中覆写ispatchTouchEvent():

 

 

@Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        return resideMenu.onInterceptTouchEvent(ev) || super.dispatchTouchEvent(ev);
    }


这里有一点需要注意:有些情况下,用来打开或关闭菜单的手势,有可能和其他UI控件产生冲突,比如ViewPager

 

可以通过加入以下代码解决该问题:

通过addIgnoredView()方法,将可能会引起事件冲突的控件加入:

 

// add gesture operation's ignored views
   FrameLayout ignored_view = (FrameLayout) findViewById(R.id.ignored_view);
   resideMenu.addIgnoredView(ignored_view);     

 

 

具体又是如何避免冲突的呢?这里我们跟踪一下代码,这里是核心代码.

我们可以看到, 通过遍历所有可能有冲突的控件,判断当前MoveEvent的点是否在对应控件可视区域中,如果在该区域内,则返回true

 

 /**
     * if the motion evnent was relative to the view
     * which in ignored view list,return true;//
     *
     * @param ev
     * @return
     */
    private boolean isInIgnoredView(MotionEvent ev) {
        Rect rect = new Rect();
        for (View v : ignoredViews) {
            v.getGlobalVisibleRect(rect);
            if (rect.contains((int) ev.getX(), (int) ev.getY()))
                return true;
        }
        return false;
    }


然后在对应滑动或则触屏事件中处理,如onFling():

 

 

if(isInIgnoredView(motionEvent) || isInIgnoredView(motionEvent2)){
   return false;
 }

 

在会引起冲突的视图,如ViewPager范围内,用来打开或者关闭ResideMenu的滑动手势将不会生效.

同样,我们可以把这种解决方案应用应用到类似的场景中,防止控件之间的手势冲突.

 

 

到了文章末尾,还是再说一点吧. 最近CSDN正在举行2013年度博客之星评选,我有幸成为了候选人之一. 写博客对于我来说呢,既是对于平常知识的一种积累,也是用来记录开发路上的点点滴滴.同时希望能通过博客来得到更多的问题解决方案,拓宽自己的思路与见识. 其实无论是程序开发还是平时的生活中,没有最好,只有最适合. 在这个过程中我也认识了很多志同道合的朋友.在此也希望自己在新的一年中,能够继续坚持,不断进步.

 

如果大家觉得我写的博客还可以,请投我一票支持一下我,我的投票地址为:

http://vote.blog.csdn.net/blogstaritem/blogstar2013/t12x3456

 

 

 

posted on 2013-12-17 14:47  我的小人生  阅读(362)  评论(0编辑  收藏  举报