Switch fragments in view pager with flip animation

问题

I've been trying to switch fragments inside a fragmentStatePagerAdapter, but even though I was able to change from fragment C-D in the same position; I have not been able to animate the transition.

I would appreciate any suggestions to achieve this effect:

A - B - C | -> Flip transition back and forth D

ABC or ABD have the normal animation transition, but when in C if I click a button I need to swap the fragment D with a flip animation and if I'm looking at D flip back to C.

回答1:

The training documentation details how to create a card-flip animation. To implement this as you described, all you need to do is nest the last two fragments (the 'C' and 'D' fragments) of the ViewPager in a single fragment; then apply the animation to the transition:

public class CardFlipFragment extends Fragment {

    private boolean mShowingBack = false;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_card_flip, container, false);

        if(savedInstanceState == null) {
            getChildFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, new FrontFragment())
                    .commit();
        }

        return view;
    }

    public void onFlip(View view) {
        if(mShowingBack) {
            getChildFragmentManager().popBackStack();
        } else {
            mShowingBack = true;

            getChildFragmentManager()
                    .setCustomAnimations(
                            R.animator.card_flip_right_in,
                            R.animator.card_flip_right_out,
                            R.animator.card_flip_left_in,
                            R.animator.card_flip_left_out)
                    .replace(R.id.container, new BackFragment())
                    .addToBackStack(null)
                    .commit();
        }
    }

}

回答2:

*You can animate it using a * PageTransformer.

See the below sample code.

    public class MainActivity extends FragmentActivity {


    SectionsPagerAdapter mSectionsPagerAdapter;

    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // activity_main.xml should contain a ViewPager with the id "@+id/pager"
        setContentView(R.layout.activity_main);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the app.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        // set the card transformer and set reverseDrawingOrder to true, so the fragments are drawn from the right to
        // the left
        mViewPager.setPageTransformer(true, new CardTransformer(0.7f));// Animation.

    }


    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DummyFragment();
            return fragment;
        }

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


    public static class DummyFragment extends Fragment {

        public DummyFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

            LinearLayout root = new LinearLayout(getActivity());
            root.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            root.setOrientation(LinearLayout.VERTICAL);

            for (int r = 0; r < 5; r++) {

                LinearLayout row = new LinearLayout(getActivity());
                row.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1.0f));
                row.setOrientation(LinearLayout.HORIZONTAL);
                row.setGravity(Gravity.CENTER);

                for (int c = 0; c < 4; c++) {

                    ImageView icon = new ImageView(getActivity());
                    icon.setLayoutParams(new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f));
                    icon.setScaleType(ScaleType.CENTER);
                    icon.setImageResource(R.drawable.ic_launcher);

                    row.addView(icon);

                }

                root.addView(row);

            }

            return root;

        }
    }


    public class CardTransformer implements PageTransformer {

        private final float scalingStart;

        public CardTransformer(float scalingStart) {
            super();
            this.scalingStart = 1 - scalingStart;
        }

        @Override
        public void transformPage(View page, float position) {

            if (position >= 0) {
                final int w = page.getWidth();
                float scaleFactor = 1 - scalingStart * position;

                page.setAlpha(1 - position);
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
                page.setTranslationX(w * (1 - position) - w);
            }
        }
    }

}

or

You can use ViewPagerTransforms Libraray.

It will animate during switching fragment.

来源：https://stackoverflow.com/questions/40335461/switch-fragments-in-view-pager-with-flip-animation