ViewPager.PageTransformer avec une ombre portée

Question

J'ai une pile de fragments dans un ViewPager, avec un PageTransformer personnalisé défini ci-dessous.

mPager.setPageTransformer(true, new ViewPager.PageTransformer() { 
    @Override 
    public void transformPage(View page, float position) { 
     page.setTranslationX(page.getWidth() * -position); 
    } 
}); 

Comment puis-je dessiner une ombre pour le fragment sortant? Longue histoire courte, je suis à la recherche de quelque chose comme dans le livre de lecture, aucun effet papillotes nécessaire, que l'ombre de l'élément sur le dessus de la pile, de préférence API 18 compatible

Merci

Answer 1

J'avais des doutes environ setPageMargin car cela ne fonctionne que si la vue entrante a une transparence alpha. Je veux dire, il semble que la marge a une mauvaise élévation et il se trouve en dessous de la vue d'entrée, mais peut-être que je l'ai trouvé un compromis

Ceci est le code dans l'activité de la marge et la coutume PageTransformer

int margin = getResources().getDisplayMetrics().widthPixels/15; 
    mPager = (ViewPager) findViewById(R.id.pager); 

    mPager.setPageMargin(margin); 
    mPager.setPageMarginDrawable(R.drawable.shadow); 
    mPager.setPageTransformer(true, new StackTransformer()); 

où le drawable est défini comme

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" > 
     <gradient 
      android:angle="360" 
      android:endColor="#00000000" 
      android:startColor="#aa000000" 
      android:type="linear" /> 
    </shape> 

enfin, le transformPage méthode de la PageTransformer, où un effet acceptable

@Override 
public void transformPage(View view, float position) { 
    int pageWidth = view.getWidth(); 
    if (position < -1) { 
     view.setAlpha(0); 
    } else if (position <= 0) { 
     view.setAlpha(1); 
     view.setTranslationX(0); 
    } else if (position <= 1) { 
     view.setAlpha(1-position/2); // divide by 2 is the trick 
     view.setTranslationX(pageWidth * -position); 
    } else { 
     view.setAlpha(0); 
    } 
} 

J'ai joué avec la position et l'alpha pour trouver l'effet qui en résulte est ce que vous voyez dans le gif ci-dessus, mais je suis sûr que là-bas, il y a une meilleure façon d'obtenir cet effet