zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    file is universal (3 slices) but does not contain a(n) armv7s slice error for static libraries on iOS
    WebImageButton does not change images after being enabled in Javascript
    ajax OPTION
    编程遍历页面上所有TextBox控件并给它赋值为string.Empty?
    获取海洋天气预报
    C#线程系列教程(1):BeginInvoke和EndInvoke方法
    js控制只能输入数字和小数点
    Response.AddHeader(,)
    ManualResetEvent的理解
    Convert.ToInt32、int.Parse(Int32.Parse)、int.TryParse、(int) 区别
  • 原文地址:https://www.cnblogs.com/fuhaots2009/p/3478448.html
Copyright © 2011-2022 走看看