背景图片跟随手势滑动的 ViewPager，可各方向滑动或点击切换页面。

原效果参考 ANA Portuguese Airports（google play 地址）

效果图

组成

项目由一个 Activity 和五个 fragment 组成。

主要代码介绍

1、横向背景移动的 ViewPager 中，重写 dispatchDraw 方法:

@Override
protected void dispatchDraw(Canvas canvas) {
   if (this.bg != null) {
        int width = this.bg.getWidth();
        int height = this.bg.getHeight();
        int count = getAdapter().getCount();
        int x = getScrollX();
        //子 View 中背景图片需要显示的宽度，放大背景图或缩小背景图。
        int n = height * getWidth() / getHeight();
        //(width - n) / (count - 1)表示除去显示第一个 ViewPager 页面用去的背景宽度，剩余的 ViewPager 需要显示的背景图片的宽度。
        //getWidth()等于 ViewPager 一个页面的宽度，即手机屏幕宽度。在该计算中可以理解为滑动一个 ViewPager 页面需要滑动的像素值。
        //((width - n) / (count - 1)) / getWidth()也就表示 ViewPager 滑动一个像素时，背景图片滑动的宽度。
        //x * ((width - n) / (count - 1)) / getWidth()也就表示 ViewPager 滑动 x 个像素时，背景图片滑动的宽度。
        //背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。
        int w = (x+getWidth()) * ((width - n) / (count - 1)) / getWidth();
        canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect(x, 0, x + getWidth(), getHeight()), this.b);
    }
    super.dispatchDraw(canvas);
}

2、IScrollListener 中控制是否可以方向滚动

void canScrollView(boolean isCanScroll);

3、添加 FixedSpeedScroller 类(继承 Scroller)，控制 ViewPager 调用 setCurrentItem 方法时的滚动速度。

private int mDuration = 800; // 默认为 800ms
@Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

最后

如果对您有帮助请 Star，有问题随时联系我，谢谢.

关于我

QQ 交流群: 496946393

邮箱: nh_zhe@163.com

简书

个人博客