フリップアニメーションのビューページャでフラグメントを切り替える

Question

私はfragmentStatePagerAdapter内でフラグメントを切り替えようとしていましたが、同じ位置でフラグメントC-Dから変更できました。私はトランジションをアニメートできませんでした。

私はこの効果を達成するための任意の提案をいただければ幸いです：

A - B - C を| - >フリップトランジション D

ABCまたはABDは通常のアニメーションに移行しますが、Cでボタンをクリックすると、フリップアニメーションでフラグメントDをスワップする必要があります。 Cに戻ります。

Answer 1

training documentationは、カードフリップアニメーションの作成方法を詳しく説明しています。記述したようにこれを実装するには、ViewPagerの最後の2つのフラグメント（ 'C'と 'D'フラグメント）を1つのフラグメントにネストするだけです。

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

} 

Answer 2

* * 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を使用することができます。

スイッチング中にアニメーションが生成されます。