我们都会遇到这样的需求就是下方ViewPager 上方一个导航 导航文字底下还会有个滑动线。如果是手写实现的话 肯定是基于 onpagescroll 方法 来改变滑动线的leftmargin 实现滑动线的滑动。
所以下面我就直接分析
我先把核心部分代码贴出来 然后再给大家分析下为什么这么写
[html]view plaincopy
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float offset, int positionOffsetPixels) {
LayoutParamslp= (LayoutParams) line
.getLayoutParams();
intlength=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) {
}
});
首先我会分析给大家听 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)); 减去上面的就是当前位置
这里有些饶 大家多读读 多思考下 。 其实难点就在这里。
从右往左分析 我就不写了。 就是一样的思路。大家可以自行分析分析。就是利用这个就可以实现顶部滑动线。。，