No more nonsense, just code it
1. This class is the basic implementation of ViewPager, and then add viewPager.setPageTransformer(); this method, you can add switching animation, very convenient
By the way, viewPager.setOffscreenPageLimit(4) ; this method, by default, is 1, which means preloading an adjacent page, one on the left and one on the right
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new MyPagerAdapter());
viewPager.setOffscreenPageLimit(4);
// viewPager.setPageTransformer(true, new ZoomOutPageTransformer());
viewPager.setPageTransformer(true, new DepthPageTransformer());
}
private class MyPagerAdapter extends PagerAdapter {
private int[] images = {R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4};
@Override
public int getCount() {
return images.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(images[position]);
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((ImageView) object);
}
}
}
- First animation file class
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.9f;//Scale setting zoom
private static final float MIN_ALPHA = 1.0f;
private static float defaultScale = 0.9f;
//position has three values - 1, 0 and 1 representing the previous view, the current view and the next view
//Three position s are transferred at a time by sliding, and the view can be judged respectively
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
//This page is very far from the left side of the screen
view.setAlpha(0);
view.setScaleX(defaultScale);
view.setScaleY(defaultScale);
} else if (position <= 1) { // [-1,1]
//Modify the default slide transition to shrink the page
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
Log.e("wy____p","--- " + position);
//Zoom out page (in Min_ Between scale and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Make the page disappear relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
// This page is way off screen to the right.
view.setAlpha(0);
view.setScaleX(defaultScale);
view.setScaleY(defaultScale);
}
}
}
3. The second animation file class
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) {
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
By the way: the first animation
Add this property to the root layout of the layout where viewPager is located:
android:clipChildren="false"
android:clipChildren Whether to limit the child View to its range. If we set the value to false, the child control will be fully displayed when it is higher than the parent control, and will not be compressed
Don't forget to set the width of the viewPager to both sides
You can achieve a gallery like effect