背景横向视差滚动效果

今天看了看鸿洋的公众号里边的一篇文章，感觉这个效果很好啊。以前也见过这种效果，但是不知道怎么写啊，完全没思路啊。。。。。这篇看了一下，其实代码很少，但是也可以学到很多东西，不过里边的效果运行起来感觉有点拉伸了，于是自己在这个基础上稍微又修改了一下，加了几个判断，于是有了下面的效果。

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