仿UC里面Viewpager的Parallax效果

话说昨天下午开会的时候，一不小心用手机登uc看点不良网站，无意间发现在uc头条栏目里面的viewpager滑动的时候界面会出现视差效果。想当初搞了一个RV滑动的时候视差的动画，那ViewPager应该怎么做呢。那先在git上去搜索一下咯，很快就搜索到了 https://github.com/xgc1986/ParallaxPagerTransformer 。 没错就是它。

说了那么多先看下今天我给大家的黄图福利

我这个司机也不是老司机。。。。

看下今天的代码

package com.heaven.application.recyclerviewtest;

import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;


public class MainActivity002 extends ActionBarActivity {
    ViewPager mViewPager;
    FrameLayout frameLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);

        mPagerAdapter = new MPagerAdapter();
        mViewPager.setAdapter(mPagerAdapter);
        frameLayout = (FrameLayout) findViewById(R.id.test_fl);
        mViewPager.setPageTransformer(false, new ParallaxPagerTransformer(R.id.iv_test));
    }

    MPagerAdapter mPagerAdapter;

    class MPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return 5;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = null;
            switch (position) {
                case 0:
                    view = View.inflate(container.getContext(), R.layout.test_layout1, null);
                    break;
                case 1:
                    view = View.inflate(container.getContext(), R.layout.test_layout2, null);
                    break;
                case 2:
                    view = View.inflate(container.getContext(), R.layout.test_layout3, null);
                    break;
                case 3:
                    view = View.inflate(container.getContext(), R.layout.test_layout4, null);
                    break;
                case 4:
                    view = View.inflate(container.getContext(), R.layout.test_layout5, null);
                    break;
            }
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    }
}

package com.heaven.application.recyclerviewtest;

import android.annotation.TargetApi;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;

/**
 * Created by Tangxb on 2016/9/2.
 */
public class ParallaxPagerTransformer implements ViewPager.PageTransformer {

    private int id;
    private int border = 0;
    private float speed = 0.5f;

    public ParallaxPagerTransformer(int id) {
        this.id = id;
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @Override
    public void transformPage(View view, float position) {
        View parallaxView = view.findViewById(id);

        if (view == null) {
            Log.w("ParallaxPager", "There is no view");
        }

        if (parallaxView != null && Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
            if (position > -1 && position < 1) {
                float width = parallaxView.getWidth();
                parallaxView.setTranslationX(-(position * width * speed));
                float sc = ((float) view.getWidth() - border) / view.getWidth();
                if (position == 0) {
                    view.setScaleX(1);
                    view.setScaleY(1);
                } else {
                    view.setScaleX(sc);
                    view.setScaleY(sc);
                }
            } else {
                parallaxView.setTranslationX(0);
                view.setScaleX(1);
                view.setScaleY(1);
            }
        }
    }

    public void setBorder(int px) {
        border = px;
    }

    public void setSpeed(float speed) {
        this.speed = speed;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/iv_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/test22" />
    </FrameLayout>
</LinearLayout>

好了，简单的说下原理就是在transformPage里面去setTranslationX和setScaleX等等。没错就是这么简单，好了，祝大家周末愉快，下班闪人。。。。。。。。。。。。