Android随VierPager滑动的导航栏

来源：互联网发布：airbnb淘宝300优惠编辑：程序博客网时间：2024/06/05 05:55

Android项目开发中ViewPager加导航条的框架随处可见，但大部分都是点击之后实现背景的切换，如果想让导航条的背景也像viewPager那样滑动又该怎么做呢？先上一张效果图：

其实实现方法也很简单，接下来是代码部分：

viewPager.addOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int possition) {currentIndex = possition;}@Overridepublic void onPageScrolled(int possition, float offset,int offsetPixels) {int gap = Math.abs(currentIndex - possition);if (gap >= 2) {return;}RelativeLayout.LayoutParams params = (LayoutParams) imageView.getLayoutParams();//int width = viewPager.getWidth();if (possition == currentIndex) {params.leftMargin = (int) (offset * (screenWidth * 1.0 / tabNum) + currentIndex* (screenWidth / tabNum));} else if (currentIndex > possition) {params.leftMargin = (int) (-(1 - offset)* (screenWidth * 1.0 / tabNum) + currentIndex* (screenWidth / tabNum));}imageView.setLayoutParams(params);}@Overridepublic void onPageScrollStateChanged(int state) {}});

以上就是核心代码了。

接下来给大家解释一下：onPageScrolled方法参数

1、possition
            假如当前页的id是index那么
            向后滑的时候 possition=index，当滑倒后一页时possition变为index+1；
            向前滑的时候 possition=index-1，滑动到前一页时possition认为index-1；
            因此可以根据possition来判断viewPager是在想前滑还是在向后滑如果possition==index表示向后滑，possition<index表示viewPager向前滑
2、offset 当向后滑动的时候，offset从0-1,滑动完成后恢复为0
            动作1：从pager1滑动到pager2 ，offset 0逐步到1，最后恢复为0
            动作2：从pager1滑动但没有滑动到pager2放开后回到pager1，offset 0逐步到某个值a（0-1之间），再从a逐步恢复到0
            offset 当向后滑动的时候，offset从1-0
            动作1：从pager2滑动到pager1，offset 1逐步到0
            动作2：从pager2滑动但没有滑动到pager1放开后回到pager2，offset 1逐步到某个值b（0-1之间），在从b逐步增加为1，最后恢复为0
3、offsetPixels 表示手指滑动的距离（相当于将offset*width width是viewPager的宽度可以根据这个计算手指实际滑动的距离）

总的来说通过onPagerScrolled方法计算出导航栏对应的滑动距离，然后给导航栏的背景图片设置margin就可以了。

以下是要注意的一些问题：

1、要在onPageScrolled中加上下边的这段代码！不然点击导航栏时导航条的滑动会产生一些很不好的体验
int gap = Math.abs(currentIndex - possition);
if (gap >= 2) {
return;
}

2、注意计算自己项目中导航栏的宽度本例中等于屏幕的宽度，如果设置了padding或者margin一定要用，屏幕的宽度减掉padding和margin

参考文章：http://blog.csdn.net/a123demi/article/details/39480385#comments

源码地址：http://download.csdn.net/detail/z20113864/9578873

0 0