具有视差背景图像的 Android ViewPager

Question

我想在具有 View 寻呼机的 Activity 中制作背景图像的视差滚动效果，图像应该根据 ViewPager 滑动/滑动滚动。

我已经尝试使用 https://github.com/andraskindler/parallaxviewpager它不工作它显示空白背景而不是显示图像。

这个 gif 描述了我的要求:

请帮帮我

Answer 1

使用Horizo​​ntalScrollView 和ViewPager.addOnPageChangeListener 方法。
以下是示例。

在 MainActivity.java 中:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final HorizontalScrollView scrollView = (HorizontalScrollView) findViewById(R.id.scroll_view);
        final ImageView imageView = (ImageView) findViewById(R.id.background);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int x = (int) ((viewPager.getWidth() * position + positionOffsetPixels) * computeFactor());
                scrollView.scrollTo(x, 0);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }

            private float computeFactor() {
                return (imageView.getWidth() - viewPager.getWidth()) /
                        (float)(viewPager.getWidth() * (viewPager.getAdapter().getCount() - 1));
            }
        });
        viewPager.setAdapter(new CustomPagerAdapter(this));
    }
}

在布局文件(activity_main.xml)中:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <HorizontalScrollView
            android:id="@+id/scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">

        <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

            <ImageView
                    android:id="@+id/background"
                    android:layout_width="1000dp"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image"/>
        </FrameLayout>

    </HorizontalScrollView>

    <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</FrameLayout>