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

ParallaxBackgroundView 有兩種模式：

• 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

<dependency>
  <groupId>com.xpleemoon.view</groupId>
  <artifactId>parallaxbackgroundview</artifactId>
  <version>1.0.1</version>
  <type>pom</type>
</dependency>

ParallaxBackgroundView 如何使用

視差效果需要使用兩層layer實現：

• 一層作為content，比如ScrollView、ListView or RecyclerView等可以滑動的view

• 另一層作為background，即 ParallaxBackgroundView

下面用ViewPager作content，以xml屬性和代碼分別設置 ParallaxBackgroundView 來實現視差效果。

通過xml屬性設置 ParallaxBackgroundView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <com.xpleemoon.view.ParallaxBackgroundView
        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.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

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);
            }
        });

通過代碼設置 ParallaxBackgroundView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <com.xpleemoon.view.ParallaxBackgroundView
        android:id="@+id/parallax_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <fr.castorflex.android.verticalviewpager.VerticalViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

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);
            }
        });