Record two official ViewPager animations

Posted by jeankaleb on Wed, 01 Jul 2020 17:43:26 +0200

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);
        }
    }
}
  1. 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

Topics: Android