ViewPager animation fade in / out au lieu de slide

J'ai obtenu L'exemple FragmentBasics de ici . Existe-t-il un moyen de rendre l'animation ViewPager simplement fade in et out quand je glisse au lieu de glisser vers la gauche et la droite? J'ai essayé des choses avec PageTransformer, mais pas de succès, je peux toujours le voir glisser. Donc, je suppose que je dois en quelque sorte forcer sa position à rester sur place, tout en faisant glisser mon doigt affecte seulement l'alpha.

public class SecondActivity extends Activity {

SectionsPagerAdapter mSectionsPagerAdapter;

ViewPager mViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_second);

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

    // Set up the ViewPager with the sections adapter.
    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setPageTransformer(false, new FadePageTransformer());
    mViewPager.setAdapter(mSectionsPagerAdapter);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.second, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a PlaceholderFragment (defined as a static inner class below).
        return PlaceholderFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        // Show 3 total pages.
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
        case 0:
            return getString(R.string.title_section1).toUpperCase(l);
        case 1:
            return getString(R.string.title_section2).toUpperCase(l);
        case 2:
            return getString(R.string.title_section3).toUpperCase(l);
        }
        return null;
    }
}

public static class PlaceholderFragment extends Fragment {
    /**
     * The fragment argument representing the section number for this fragment.
     */
    private static final String ARG_SECTION_NUMBER = "section_number";

    /**
     * Returns a new instance of this fragment for the given section number.
     */
    public static PlaceholderFragment newInstance(int sectionNumber) {
        PlaceholderFragment fragment = new PlaceholderFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_second, container, false);
        TextView textView = (TextView) rootView.findViewById(R.id.section_label);
        textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
        return rootView;
    }
}

public class FadePageTransformer implements ViewPager.PageTransformer {
        public void transformPage(View view, float position) {

            if (position < -1 || position > 1) {
                view.setAlpha(0);
            }
            else if (position <= 0 || position <= 1) {
                // Calculate alpha. Position is decimal in [-1,0] or [0,1]
                float alpha = (position <= 0) ? position + 1 : 1 - position;
                view.setAlpha(alpha);
            }
            else if (position == 0) {
                view.setAlpha(1);
            }
        }
    }
29
demandé sur KKO 2014-08-02 18:29:50

4 réponses

Cela devrait mieux fonctionner pour la transformation fade in/out:

        public void transformPage(View view, float position) {
                view.setTranslationX(view.getWidth() * -position);

            if(position <= -1.0F || position >= 1.0F) {
                view.setAlpha(0.0F);
            } else if( position == 0.0F ) {
                view.setAlpha(1.0F);
            } else { 
                // position is between -1.0F & 0.0F OR 0.0F & 1.0F
                view.setAlpha(1.0F - Math.abs(position));
            }
        }
61
répondu murena 2014-11-04 17:01:25

Basé sur la réponse d'un @murena, cela devrait mieux fonctionner pour la transformation fade in/out. A la fin de l'animation, la position est restaurée à la valeur par défaut.

public void transformPage(View view, float position) {
            if(position <= -1.0F || position >= 1.0F) {
                view.setTranslationX(view.getWidth() * position);
                view.setAlpha(0.0F);
            } else if( position == 0.0F ) {
                view.setTranslationX(view.getWidth() * position);
                view.setAlpha(1.0F);
            } else { 
                // position is between -1.0F & 0.0F OR 0.0F & 1.0F
                view.setTranslationX(view.getWidth() * -position);
                view.setAlpha(1.0F - Math.abs(position));
            }
        }
32
répondu umberto_sidoti 2015-10-23 22:47:40

Un simple transformateur de décoloration pourrait être implémenté comme ceci:

private static class FadePageTransformer implements ViewPager.PageTransformer {
    public void transformPage(View view, float position) {
        view.setAlpha(1 - Math.abs(position));
        if (position < 0) {
            view.setScrollX((int)((float)(view.getWidth()) * position));
        } else if (position > 0) {
            view.setScrollX(-(int) ((float) (view.getWidth()) * -position));
        } else {
            view.setScrollX(0);
        }
    }
}

Peut-être pas exactement ce que vous cherchez, mais un bon point de départ.

7
répondu stephan 2014-08-05 23:39:29

J'ai trouvé la réponse de @ murena super utile. Cependant, j'ai rencontré un problème lorsque j'ai essayé d'ajouter un OnClickListener à chaque onglet. J'avais besoin de chaque page pour ouvrir un lien URL différent. J'ai modifié le code pour masquer les vues qui sont hors de vue et ajouté un petit effet supplémentaire pour faire glisser la vue.5 la vitesse:

public void transformPage(View view, float position) {

    if (position <= -1.0F || position >= 1.0F) {        // [-Infinity,-1) OR (1,+Infinity]
        view.setAlpha(0.0F);
        view.setVisibility(View.GONE);
    } else if( position == 0.0F ) {     // [0]
        view.setAlpha(1.0F);
        view.setVisibility(View.VISIBLE);
    } else {

        // Position is between [-1,1]
        view.setAlpha(1.0F - Math.abs(position));
        view.setTranslationX(-position * (view.getWidth() / 2));
        view.setVisibility(View.VISIBLE);
    }
}
1
répondu Pablo S. Campos 2016-01-14 21:20:04