ViewPager 的顶部滑动线

我们都会遇到这样的需求就是下方ViewPager 上方一个导航导航文字底下还会有个滑动线。如果是手写实现的话肯定是基于 onpagescroll 方法来改变滑动线的leftmargin 实现滑动线的滑动。

所以下面我就直接分析

我先把核心部分代码贴出来然后再给大家分析下为什么这么写

    <span style="font-size:18px;">viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float offset, int positionOffsetPixels) {
                LayoutParams lp = (LayoutParams) line
                        .getLayoutParams();
            
                int length=tabNames.length;
                
                if(currentIndex==position){  
                    lp.leftMargin = (int) (offset * (screenWidth * 1.0 / length)
                    		+ currentIndex
                            * (screenWidth / length));
                }else if(currentIndex>position){
                	lp.leftMargin = (int) (-(1 - offset)
                            * (screenWidth * 1.0 / length) 
                            + currentIndex
                            * (screenWidth / length));
                }             
                
                
             
                line.setLayoutParams(lp);
            }
            @Override
            public void onPageSelected(int position) {
                currentIndex=position;
            }
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });</span>

首先我会分析给大家听 onPageScrolled 的过程中 position 和 currentindex 的变化
currentindex 每次记录当前页面的位置。 position 是这里的position不是 onPageSelected的position
由于滑动式currentindex 首先是不变的。当滑动超过一半时 currentindex
就会变，而position会根据滑动方向，当往左滑动时马上会减一，当往右滑动时会先不变。

然后当viewpager页面停止后他才会判断页面是否划过去了划过去就加一没有就不变。

所以 currentindex 永远是大于或者等于position的
offset 是一个小数从0 变化到1 如果从左到右是 0-1 从右到左是 1-0；
基于这个分析从左往右滑动时假设从第0个页面滑到第1个页面

首先是 currentindex 与 position 相等。然后超过一半时 currentindex>posiiton
······（1）当currentindex =position 时改变滑动线的leftmargin
lp.leftMargin = (int) (offset * (screenWidth * 1.0 / length)
+ currentIndex *(screenWidth / length));
length代表几个tab 屏幕宽度除以tab个数表示每个滑动线的宽度。
这时滑动线的左侧leftmargin 初始值肯定是 currentindex*这个宽度的。
那么当变化时我们就基于这个初始值进行改变
用宽度*offset 这时offset 是0-1 的变化。肯定是增长就是滑动线在往右移动
那么当滑动过一半时 currentindex 变成了 1

（2）currentIndex>position
lp.leftMargin = (int) (-(1 - offset)* (screenWidth * 1.0 / length)
+ currentIndex * (screenWidth / length));
这时 cunrrentindex 增加了一个。所以这时*宽度相当于我们最终 leftmargin 的距离。然而我们还没有到达
最终的位置我们刚过一半儿那我们在往最终位置变化时offset 是趋近于1 的而若想要这个过程leftmargin 在增长
我们就用 1-offset 这个值是趋近于 0的那么 (int) (-(1 - offset)* (screenWidth * 1.0 / length) 计算的就是我们离最终位置到底差了多少。。
用最终位置 currentIndex*(screenWidth / length)); 减去上面的就是当前位置
这里有些饶大家多读读多思考下。其实难点就在这里。

从右往左分析我就不写了。就是一样的思路。大家可以自行分析分析。就是利用这个就可以实现顶部滑动线。。，

ViewPager 的顶部滑动线

猜你喜欢