文档章节

ViewPager背景实现Parallax(平差化)效果

军歌
 军歌
发布于 2014/10/14 14:51
字数 848
阅读 953
收藏 0
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;

@SuppressLint("NewApi")
public class ParallaxViewPager extends ViewPager {

    public static final int FIT_WIDTH = 0;
    public static final int FIT_HEIGHT = 1;
    public static final float OVERLAP_FULL = 1f;
    public static final float OVERLAP_HALF = 0.5f;
    public static final float OVERLAP_QUARTER = 0.25f;
    private static final float CORRECTION_PERCENTAGE = 0.01f;
    public Bitmap bitmap;
    private Rect source, destination;
    private int scaleType;
    private int chunkWidth;
    private int projectedWidth;
    private float overlap;
    private OnPageChangeListener secondOnPageChangeListener;

    public ParallaxViewPager(Context context) {
        super(context);
        init();
    }

    public ParallaxViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        source = new Rect();
        destination = new Rect();
        scaleType = FIT_HEIGHT;
        overlap = OVERLAP_HALF;

        setOnPageChangeListener(new OnPageChangeListener() {
            @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (bitmap != null) {
                    source.left = (int) Math.floor((position + positionOffset - CORRECTION_PERCENTAGE) * chunkWidth);
                    source.right = (int) Math.ceil((position + positionOffset + CORRECTION_PERCENTAGE) * chunkWidth + projectedWidth);
                    destination.left = (int) Math.floor((position + positionOffset - CORRECTION_PERCENTAGE) * getWidth());
                    destination.right = (int) Math.ceil((position + positionOffset + 1 + CORRECTION_PERCENTAGE) * getWidth());
                    invalidate();
                }

                if (secondOnPageChangeListener != null) {
                    secondOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
                }
            }

            @Override public void onPageSelected(int position) {
                if (secondOnPageChangeListener != null) {
                    secondOnPageChangeListener.onPageSelected(position);
                }
            }

            @Override public void onPageScrollStateChanged(int state) {
                if (secondOnPageChangeListener != null) {
                    secondOnPageChangeListener.onPageScrollStateChanged(state);
                }
            }
        });
    }

    @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        destination.top = 0;
        destination.bottom = h;
        if (getAdapter() != null && bitmap != null)
            calculateParallaxParameters();
    }

    private void calculateParallaxParameters() {
        if (bitmap.getWidth() < getWidth() && bitmap.getWidth() < bitmap.getHeight() && scaleType == FIT_HEIGHT) {
            Log.w(ParallaxViewPager.class.getName(), "Invalid bitmap bounds for the current device, parallax effect will not work.");
        }

        final float ratio = (float) getHeight() / bitmap.getHeight();
        if (ratio != 1) {
            switch (scaleType) {
                case FIT_WIDTH:
                    source.top = (int) ((bitmap.getHeight() - bitmap.getHeight() / ratio) / 2);
                    source.bottom = bitmap.getHeight() - source.top;
                    chunkWidth = (int) Math.ceil((float) bitmap.getWidth() / (float) getAdapter().getCount());
                    projectedWidth = chunkWidth;
                    break;
                case FIT_HEIGHT:
                default:
                    source.top = 0;
                    source.bottom = bitmap.getHeight();
                    projectedWidth = (int) Math.ceil(getWidth() / ratio);
                    chunkWidth = (int) Math.ceil((bitmap.getWidth() - projectedWidth) / (float) getAdapter().getCount() * overlap);
                    break;
            }
        }
    }

    /**
     * Sets the background from a resource file.
     *
     * @param resid
     */
    @Override public void setBackgroundResource(int resid) {
        bitmap = BitmapFactory.decodeResource(getResources(), resid);
    }

    /**
     * Sets the background from a Drawable.
     *
     * @param background
     */
    @Override public void setBackground(Drawable background) {
        bitmap = ((BitmapDrawable) background).getBitmap();
    }

    /**
     * Deprecated.
     * Sets the background from a Drawable.
     *
     * @param background
     */
    @Override public void setBackgroundDrawable(Drawable background) {
        bitmap = ((BitmapDrawable) background).getBitmap();
    }

    /**
     * Sets the background from a bitmap.
     *
     * @param bitmap
     * @return The ParallaxViewPager object itself.
     */
    public ParallaxViewPager setBackground(Bitmap bitmap) {
        this.bitmap = bitmap;
        return this;
    }

    /**
     * Sets how the view should scale the background. The available choices are:
     * <ul>
     * <li>FIT_HEIGHT - the height of the image is resized to matched the height of the View, also stretching the width to keep the aspect ratio. The non-visible part of the bitmap is divided into equal parts, each of them sliding in at the proper position.</li>
     * <li>FIT_WIDTH - the width of the background image is divided into equal chunks, each taking up the whole width of the screen.</li>
     * </ul>
     *
     * @param scaleType
     * @return
     */
    public ParallaxViewPager setScaleType(final int scaleType) {
        if (scaleType != FIT_WIDTH && scaleType != FIT_HEIGHT)
            throw new IllegalArgumentException("Illegal argument: scaleType must be FIT_WIDTH or FIT_HEIGHT");
        this.scaleType = scaleType;
        return this;
    }

    /**
     * Sets the amount of overlapping with the setOverlapPercentage(final float percentage) method. This is a number between 0 and 1, the smaller it is, the slower is the background scrolling.
     *
     * @param percentage
     * @return The ParallaxViewPager object itself.
     */
    public ParallaxViewPager setOverlapPercentage(final float percentage) {
        if (percentage <= 0 || percentage >= 1)
            throw new IllegalArgumentException("Illegal argument: percentage must be between 0 and 1");
        overlap = percentage;
        return this;
    }

    /**
     * Recalculates the parameters of the parallax effect, useful after changes in runtime.
     *
     * @return The ParallaxViewPager object itself.
     */
    public ParallaxViewPager invalidateParallaxParameters() {
        calculateParallaxParameters();
        return this;
    }

    @Override protected void onDraw(Canvas canvas) {
        if (bitmap != null)
            canvas.drawBitmap(bitmap, source, destination, null);
    }

    public void addOnPageChangeListener(OnPageChangeListener listener) {
        secondOnPageChangeListener = listener;
    }
}

1、创建布局XML parallaxviewpager。

        通过XML或下列方法设置背景:

               

  • setBackgroundResource(int resid)

  • setBackground(Drawable background) or setBackgroundDrawable(Drawable background)

  • setBackground(Bitmap bitmap)


    指定视图的规模应该与setscaletype背景(scaletype)方法。

选择下列参数:

fit_height    意味着图像的高度调整到相匹配的观点的高度,同时拉伸宽度保持纵横比。 

                  位图的不可见的部分分成相等的部分,他们每个人都在适当的位置的滑动。这是默认值。

fit_width     背景图像的宽度被分成相等的块,每个占据整个屏幕宽度。

                   这种模式是不寻常的视差效应,为背景的滚动速度等于视图的速度。

设定的setoverlappercentage重叠(最后的浮动比例)的方法。这是一个0和1之间的数字,小,速度慢的背景滚动。默认值是百分之50。这只适用于fit_height。


    final ParallaxViewPager parallaxViewPager = new ParallaxViewPager(this);
    parallaxViewPager.setAdapter(new MyPagerAdapter());
    parallaxViewPager.setBackgroundResource(R.drawable.nagy);
    setContentView(parallaxViewPager);


© 著作权归作者所有

共有 人打赏支持
军歌
粉丝 9
博文 86
码字总数 43501
作品 0
深圳
程序员
【Parallax Animation】实现知乎 Android 客户端启动页视差滚动效果

欢迎转载,但请务必注明出处![http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen-of-zhihu/][6] 前言 Parallax Scrolling(视差滚动)......

RyanHoo
2014/07/18
0
3
android中ViewPager详解--视图滑动、界面卡等效果 (一)

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一。利用它,我们可以做很多事情,从最简单的导航,到页面菜单...

一别经年
2014/01/21
0
0
GankApp 侧滑和title修改颜色的完整项目app

GankApp 侧滑和title修改颜色的完整项目app GankApp 侧滑和title修改颜色的完整项目app,本项目主要由侧滑框架和4.4以及以上的头部title颜色调整和, 首页viewpager滑动切换,以及处理侧滑和...

抉择很难
2015/10/26
0
0
Android ViewPager使用详解

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等...

Remix_jx
2014/10/27
0
0
Android中如何使用ViewPager实现类似laucher左右拖动效果

现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面,这样会获得很好的用户体验,能够帮助用户更好使用应用的某些功能。其实该功能和Android主界面的 luncher 的...

MrLovelyCbb
2012/05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows小技巧 – Win+R提高Windows使用效率

追求效率的朋友都需要一款顺手的快速启动工具,Win 平台上有键盘流的RunZ、Listary、ALTRun、Launchy、Wox 和图标流的 Fences、Rolan、 WinLaunch 等,而 Mac 上也有 Alfred、Spotlight。 而...

QQZZFT
10分钟前
1
0
Android 移植ffmpeg报错:"atof" referenced by "libavformat.so"

cannot locate symbol "atof" referenced by "libavformat-57.so"... 原因:android的stdlib.h中atof是内联的, 外部模块不能直接使用。跟android版本有关。 解决办法:将所有的atof改成str...

她叫我小渝
24分钟前
1
0
Java并发编程:volatile关键字解析

volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java 5之后,volatile关键字才得以重获生...

engeue
40分钟前
1
0
php-fpm配置文件详解

第一部分:FPM 配置 参数          | 说明 -p            | 命令行中动态修改--prefix   ;include=etc/fpm.d/*.conf  | 用于包含一个或多个文件,如果glob(3)存在(...

bengozhong
42分钟前
1
0
Django允许外部ip访问

1、关闭防火墙 service iptables stop 2、设置django 开启django时,使用0.0.0.0:xxxx,作为ip和端口例如: python manage.py runserver 0.0.0.0:8000 3、在settings里修改ALLOWED_HOSTS = [......

MichaelShu
45分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部