今天看了看鸿洋的公众号里边的一篇文章，感觉这个效果很好啊。以前也见过这种效果，但是不知道怎么写啊，完全没思路啊。。。。。这篇看了一下，其实代码很少，但是也可以学到很多东西，不过里边的效果运行起来感觉有点拉伸了，于是自己在这个基础上稍微又修改了一下，加了几个判断，于是有了下面的效果。
ps：在markdown模式下，我是切换全角输入法，直接打两个空格实现空格缩进的，哈哈，好用
sc.gif
我的上边滑动导航使用的是TabLayout，只要设置一下模式支持滑动就可以扩展了，简单好用，这里就不贴其他的了。
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
这里主要的思路就是，根据scrollX的值去绘制图片的需要显示的部分，先计算图片的宽度与所有的Viewpager的子item的宽度之和的比值，这样我们就可以计算出当scrollX变化的时候，需要绘制的图片的部分了，这里图片就不会被拉伸了，我不推荐拉伸图片，感觉有点变形了。下面直接看代码了,代码也不多，全贴出来了
public class MoveViewPager extends ViewPager {
private Bitmap mBg = BitmapFactory.decodeResource(getResources(), R.mipmap.ss2);
public MoveViewPager(Context context) {
this(context, null);
}
public MoveViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Overrideprotected void dispatchDraw(Canvas canvas) {
if (mBg != null) {
int width = mBg.getWidth();
int height = mBg.getHeight();
int count = getAdapter().getCount();
Logger.i("x:" + getScrollX());
//计算整张图片跟所有的item的宽度的和的比例
float scallX = width * 1.0f / (count * getWidth());
int left = (int) (scallX * getScrollX());
if (left + getWidth() > width) {
left = width - getWidth();
}
if (left < 0) {
left = 0;
}
Rect src = new Rect(left, 0, left + getWidth(), height);
Rect dest = new Rect(getScrollX(), 0, getScrollX() + getWidth(), getHeight());
canvas.drawBitmap(mBg, src, dest, null);
}
super.dispatchDraw(canvas);
}
}
好了，大功告成了。
背景图再传一下吧，省得大家找了，其实我也是百度的。。。
ss2.jpg
