使用翻转动画在视图寻呼机中切换片段

Question

我一直在尝试在 fragmentStatePagerAdapter 中切换片段，但即使我能够在相同位置从片段 C-D 进行更改；我无法为过渡设置动画。

如果有任何建议可以达到这种效果，我将不胜感激：

A - B - C | -> 来回翻转过渡 D

ABC 或 ABD 具有正常的动画过渡，但在 C 中，如果我单击一个按钮，我需要将片段 D 与翻转动画交换，如果我正在查看 D 翻转回 C。

Answer 1

*您可以使用 * PageTransformer 对其进行动画处理。

请参阅下面的示例代码。

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

}

或

您可以使用ViewPagerTransforms Libraray。

它会在切换片段期间进行动画处理。

Answer 2

training documentation 详细介绍了如何创建翻牌动画。要按照您的描述实现这一点，您需要做的就是将ViewPager 的最后两个片段（“C”和“D”片段）嵌套在一个片段中；然后将动画应用于过渡：

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();
        }
    }

}