话说昨天下午开会的时候,一不小心用手机登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
等等。没错就是这么简单,好了,祝大家周末愉快,下班闪人。。。。。。。。。。。。