parallax android,Android——支持水平和垂直视差移动的ParallaxBackgroundView（使用篇）...

horizontal_parallax_bg.gif

vertical_parallax_bg.gif

本文为ParallaxBackgroundView的使用篇，自定义原理篇后续有时间会补上。

概述

Orientation

ParallaxBackgroundView是一个支持水平或者垂直方向视差移动的view。水平或者垂直方向可通过以下两种方式设置：

代码：

setParallaxOrientation(ParallaxBackgroundView.PARALLAX_VERTICAL);

xml属性:

app:parallaxOrientation="horizontal"

Parallax Background

视差背景可以通过代码或者xml属性设置：

代码：

// setParallaxBackground(Drawable)

setParallaxBackgroundResource(int);

xml属性：

app:parallaxBackground="@drawable/horizontal_parallax_bg"

切记不要和View的setBackground()搞混

Parallax Offset

视差偏移通过以下方式设置：

setParallaxPercent(float)

NOTE

MODE_PRE_SCALE——使用更多的内存，但视差滑动会更平滑。因为，bitmap已经在内存中预先缩放好了，在onDraw()的绘制中只是移动bitmap即可，不需要进行缩放。

MODE_POST_SCALE——使用更少的内存，但会加大处理器的运算。因为缩放是在onDraw()的绘制中实时进行。

默认属性

isParallax——true

parallaxMode——postScale

parallaxOrientation——horizontal

lib依赖

使用gradle：

compile 'com.xpleemoon.view:parallaxbackgroundview:1.0.1'

或者使用maven

com.xpleemoon.view

parallaxbackgroundview

1.0.1

pom

视差效果需要使用两层layer实现：

一层作为content，比如ScrollView、ListView or RecyclerView等可以滑动的view

下面用ViewPager作content，以xml属性和代码分别设置ParallaxBackgroundView来实现视差效果。

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.xpleemoon.demo.parallaxbackgroundview.HorizontalParallaxActivity">

android:id="@+id/parallax_bg"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:isParallax="true"

app:parallaxMode="postScale"

app:parallaxOrientation="horizontal"

app:parallaxBackground="@drawable/horizontal_parallax_bg"/>

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

final ParallaxBackgroundView bg = (ParallaxBackgroundView) findViewById(R.id.parallax_bg);

ViewPager pager = (ViewPager) findViewById(R.id.pager);

final PagerAdapter adapter = new MyAdapter();

pager.setAdapter(adapter);

pager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

// this is called while user's flinging with:

// position is the page number

// positionOffset is the percentage scrolled (0...1)

// positionOffsetPixels is the pixel offset related to that percentage

// so we got everything we need ....

float finalPercentage = ((position + positionOffset) * 100 / adapter.getCount()); // percentage of this page+offset respect the total pages

// now you have to scroll the background layer to this position. You can either adjust the clipping or

// the background X coordinate, or a scroll position if you use an image inside an scrollview ...

// I personally like to extend View and draw a scaled bitmap with a clipping region (drawBitmap with Rect parameters), so just modifying the X position then calling invalidate will do. See attached source ParallaxBackground

bg.setParallaxPercent(finalPercentage);

}

});

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.xpleemoon.demo.parallaxbackgroundview.VerticalParallaxActivity">

android:id="@+id/parallax_bg"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

final ParallaxBackgroundView bg = (ParallaxBackgroundView) findViewById(R.id.parallax_bg);

bg.setParallax(true);

bg.setParallaxMode(ParallaxBackgroundView.MODE_POST_SCALE);

bg.setParallaxOrientation(ParallaxBackgroundView.PARALLAX_VERTICAL);

bg.setParallaxBackgroundResource(R.drawable.vertical_parallax_bg);

VerticalViewPager pager = (VerticalViewPager) findViewById(R.id.pager);

final PagerAdapter adapter = new MyAdapter();

pager.setAdapter(adapter);

pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

// this is called while user's flinging with:

// position is the page number

// positionOffset is the percentage scrolled (0...1)

// positionOffsetPixels is the pixel offset related to that percentage

// so we got everything we need ....

float finalPercentage = ((position + positionOffset) * 100 / adapter.getCount()); // percentage of this page+offset respect the total pages

// now you have to scroll the background layer to this position. You can either adjust the clipping or

// the background X coordinate, or a scroll position if you use an image inside an scrollview ...

// I personally like to extend View and draw a scaled bitmap with a clipping region (drawBitmap with Rect parameters), so just modifying the X position then calling invalidate will do. See attached source ParallaxBackground

bg.setParallaxPercent(finalPercentage);

}

});

代码猛戳这里