Android ViewPager与视差背景图像

时间:2016-07-23 13:48:58

标签: android android-viewpager parallax

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

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

这个gif描述了我的要求:

enter image description here

请帮帮我

1 个答案:

答案 0 :(得分:13)

使用HorizontalScrollViewViewPager.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>