探索Android 侧边栏开发的方法

看到人人网的客户端，不管是ios还是android都有好看的侧边栏滑动的效果，点击上部的按钮可以滑动展开侧边的目录。觉得这个效果比较炫，所以研究了一下实现的方法。关于滑动，实现的思路大概有两种， 一种是利用ScrollView的滑动效果来做，另外一种就是直接使用Animation来作了。



 

1、使用ScrollView来实现
ScrollView的使用是规则是，当View的Size大于屏幕的边界的时候就可以滚动。实际上，ScrollView并不仅仅只能做这些事情，我们可以对它的属性进行一些设置，让它摇身一变成为我们想要的侧边栏：关掉Scroll Bar，去掉Edge的效果，这样ScrollView看起来就和普通的View没有太大的区别了，接下来的工作就是在ScrollView中填充两个View，一个是我们所需要的侧边栏，另一个就是程序的主内容了，当侧边栏出现的时候主内容要被挤到屏幕外面去。难点来了，这样的要求在layout文件中是定义不出来的。这里我们选择动态的生成这两个View并动态的根据屏幕的大小加载到ScrollView中去。

 

           @Override
            public void onGlobalLayout() {
                parent.getViewTreeObserver().removeGlobalOnLayoutListener(this);

                w = scrollView.getMeasuredWidth();
                h = scrollView.getMeasuredWidth();

                LayoutInflater inlfater = LayoutInflater.from(parent.getContext());
                app = inlfater.inflate(R.layout.slide_app, null);
                menu = inlfater.inflate(R.layout.slide_menu, null);
                parent.addView(menu, (int) (rate * w), h);
                parent.addView(app, w, h);
            }

 

通过这样 动态的加载我们可以想象此时View的状态应该是app和menu这两个View并排的出现在ScrollView中，这样我们只要控制ScrollVIew的滑动就可以控制在屏幕中显示的内容了。

 

           @Override
            public void onClick(View v) {
                if (slideOut) {
                    // hide the menu
                    System.out.println("hide ");
                    scrollView.smoothScrollBy((int) (-rate * w), 0);
                } else {
                    // show menu
                    System.out.println("show ");
                    scrollView.smoothScrollBy((int) (rate * w), 0);
                }

                slideOut = !slideOut;
            }

 

好了，基本的效果已经实现了，但是LZ随后又发现了一个问题，就是表面上看到的ScrollView虽然是很正常的状态，但是不要忘了我们动态加载的View已经超过了屏幕的宽度，LZ尝试滑动屏幕发现居然是可以滑动的，这点肯定是不能接受的。LZ翻了一下API，找到一个WorkAround的方法，就是禁止ScrollView的touch事件，这样ScrollView就被阉割了不能接受用户的touch事件，自然就不能被滑动了。
到了这里，效果基本就实现了，但是LZ认为这样WorkAround的方式并不是很优雅，我们可以考虑另外一种实现方式。

2、使用动画来实现

Android提供动画的支持，我们可以快速的定义我们的动画，Android支持的动画中就包括滑动，那么这里我们可以把app和menu看作两个碟在一起的View，app遮盖menu。当我们要显示menu的时候只要把app用动画滑到指定的位置就可以了。

           @Override
            public void onClick(View v) {
                final int w = app.getMeasuredWidth();
                final int h = app.getMeasuredHeight();

                Animation animation = null;
                if (slideOut) {
                    // hide
                    animation = new TranslateAnimation(0, -(w * rate), 0, 0);
                } else {
                    // show
                    animation = new TranslateAnimation(0, w * rate, 0, 0);
                }

                animation.setFillAfter(true);
                animation.setDuration(500);
                app.startAnimation(animation);
            }

 启动应用发现滑动效果是出来了，但是LZ发现一个很有意思的问题，当menu被滑出来之后，再点击app上的button没有反应了，而点击app原来那个button的位置却可以触发注册的点击事件。这是为什么呢？原来animation只是引起了app的位移，app的大小没有变化，所以不会触发重新布局app，所以我们看到的app是被移动了，但是它原来的sub view还在原来的地方，这时我们要手动的让app来重新布局，调用app的layout方法。

                   @Override
                    public void onAnimationEnd(Animation animation) {
                        if (!slideOut) {
                            app.layout((int) (w * rate), 0, (int) (w * rate + w), h);
                        } else {
                            app.layout(0, 0, w, h);
                        }
                        app.clearAnimation();
                        slideOut = !slideOut;
                    }

 

 这样，我们的视图就正常了。

 

实验了两种方法，LZ认为使用动画来实现要更加简单，上干货~需要的童鞋自行下载

评论

7 楼 lrs0304 2014-11-14  

终于可以下载了

6 楼 Zero颴 2014-09-24  

    赞一个

5 楼 zhouming4455 2014-04-16  

好人一生平安!!!

4 楼 Li_er 2014-04-07  

感谢博主，，有个问题请指教一下。我想实现view从右侧滑出的。试着改了一下 函数translaanimation的参数，可是效果不是想要的，敢问博主，怎么实现右侧滑出呢，谢谢

3 楼 pepsichen 2014-03-11  

不错~~~！

2 楼 须等待 2013-01-30  

xumin198908 写道

我进了两次传送门才到这里。。  以为还有呢。。
让我失望了。。呵呵

哈哈，，你还想要啥？

1 楼 xumin198908 2013-01-29  

我进了两次传送门才到这里。。  以为还有呢。。
让我失望了。。呵呵