实现视差效果

device-2017-05-24-123426_0-184.gif

这分三层，当然你也可以实现更多层：

• 第 1层是背景层，以一张比较大的全景图做为背景，加上HorizontalScrollView实现滚动；
• 第2层是中间层，这层用来与第3层滑动做对比，由于与滑动速度不一样，加深视差效果，同样也是用HorizontalScrollView实现；
• 第3层是viewpager,这里就不多讲了。

XML代码：

上面的只是Activity的布局，还有一些Adapter的子布局就传了,继续看代码：

public class ParallaxActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private HorizontalScrollView backgroundScrollview;
    private HorizontalScrollView layerScrollview;
    private ParallaxAdapter adapter;
    private int pageCount;
    private int backgroundWidth;

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


    private void setupView() {
        backgroundScrollview = (HorizontalScrollView) findViewById(R.id.backgroundScrollView);
        layerScrollview = (HorizontalScrollView) findViewById(R.id.layerScrollView);
        viewPager = (ViewPager) findViewById(R.id.image_pager);

        backgroundScrollview.setHorizontalScrollBarEnabled(false);
        layerScrollview.setHorizontalScrollBarEnabled(false);

        setSecondPixels();
        setupViewPager();
    }

    private void setupViewPager() {
        adapter = new ParallaxAdapter(this);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                pageCount = adapter.getCount();
                //缓动算法(学习中) 参考http://easings.net/zh-cn

                //背景滚动
                float backgroundOffset = Cubic.easeIn(positionOffset, 0, 1, 1);
                float offset = (float) ((position + backgroundOffset) * 1.0 / pageCount);
                int backgroundX = (int) (backgroundWidth * offset);
                backgroundScrollview.scrollTo(backgroundX, 0);

                //layer滚动
                float layerRealOffset = Sine.easeIn(positionOffset, 0, 1, 1);
                float layerOffset = (float) ((position + layerRealOffset) * 1.0 / pageCount);
                int layerX = (int) (backgroundWidth * layerOffset);
                layerScrollview.scrollTo(layerX, 0);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 解决HorizontalScrollView中match_parent无效问题
     * 将第2层的总宽度与viewPager的总宽度保持一致，每一个view的宽高对应手机的宽高
     */
    private void setSecondPixels() {
        DisplayMetrics dm = new DisplayMetrics();
        this.getWindowManager().getDefaultDisplay().getMetrics(dm);
        backgroundWidth = dm.widthPixels * 5;
        ViewGroup.LayoutParams layoutParams;

        View view1 = findViewById(R.id.view_1);
        layoutParams = view1.getLayoutParams();
        layoutParams.height = dm.heightPixels;
        layoutParams.width = dm.widthPixels;
        view1.setLayoutParams(layoutParams);

        View view2 = findViewById(R.id.view_2);
        layoutParams = view1.getLayoutParams();
        layoutParams.height = dm.heightPixels;
        layoutParams.width = dm.widthPixels;
        view2.setLayoutParams(layoutParams);

        View view3 = findViewById(R.id.view_3);
        layoutParams = view1.getLayoutParams();
        layoutParams.height = dm.heightPixels;
        layoutParams.width = dm.widthPixels;
        view3.setLayoutParams(layoutParams);

        View view4 = findViewById(R.id.view_4);
        layoutParams = view1.getLayoutParams();
        layoutParams.height = dm.heightPixels;
        layoutParams.width = dm.widthPixels;
        view4.setLayoutParams(layoutParams);

        View view5 = findViewById(R.id.view_5);
        layoutParams = view1.getLayoutParams();
        layoutParams.height = dm.heightPixels;
        layoutParams.width = dm.widthPixels;
        view5.setLayoutParams(layoutParams);
    }

注意：第2层与第3层都需要背景透明,保证能看到背景层;