Git Product home page Git Product logo

bgmoveviewpager's Introduction

BgMoveViewPager

背景图片跟随手势滑动的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

邮箱: [email protected]

简书

个人博客

bgmoveviewpager's People

Contributors

zhe525069676 avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.