web-dev-qa-db-fra.com

Afficher le téléavertisseur avec l'élément précédent et l'élément suivant de plus petite taille avec un défilement infini

Vous voulez créer le téléavertisseur de vue comme pour l'interface utilisateur suivante, le transformateur personnalisé appliqué mais ne fonctionne pas.

enter image description here

ViewPager.Java

public class MyViewPager extends ViewPager implements ViewPager.PageTransformer {
public static final String TAG = "MyViewPager";
private float MAX_SCALE = 0.0f;
private int mPageMargin;
private boolean animationEnabled=true;
private boolean fadeEnabled=false;
private  float fadeFactor=0.5f;


public MyViewPager(Context context) {
    this(context, null);
}

public MyViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    // clipping should be off on the pager for its children so that they can scale out of bounds.
    setClipChildren(false);
    setClipToPadding(false);
    // to avoid fade effect at the end of the page
    setOverScrollMode(2);
    setPageTransformer(false, this);
    setOffscreenPageLimit(3);
    mPageMargin = dp2px(context.getResources(), 50);
    setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
}

public int dp2px(Resources resource, int dp) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resource.getDisplayMetrics());
}
public void setAnimationEnabled(boolean enable) {
    this.animationEnabled = enable;
}

public void setFadeEnabled(boolean fadeEnabled) {
    this.fadeEnabled = fadeEnabled;
}

public void setFadeFactor(float fadeFactor) {
    this.fadeFactor = fadeFactor;
}

@Override
public void setPageMargin(int marginPixels) {
    mPageMargin = marginPixels;
// setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
}

@Override
public void transformPage(View page, float position) {
    if (mPageMargin <= 0|| !animationEnabled)
        return;
    page.setPadding(mPageMargin / 3, mPageMargin / 3, mPageMargin / 3, mPageMargin / 3);

    if (MAX_SCALE == 0.0f && position > 0.0f && position < 1.0f) {
        MAX_SCALE = position;
    }
    position = position - MAX_SCALE;
    float absolutePosition = Math.abs(position);
    if (position <= -1.0f || position >= 1.0f) {
        if(fadeEnabled)
            page.setAlpha(fadeFactor);
        // Page is not visible -- stop any running animations

    } else if (position == 0.0f) {

        // Page is selected -- reset any views if necessary
        page.setScaleX((1 + MAX_SCALE));
        page.setScaleY((1 + MAX_SCALE));
        page.setAlpha(1);
    } else {
        page.setScaleX(1 + MAX_SCALE * (1 - absolutePosition));
        page.setScaleY(1 + MAX_SCALE * (1 - absolutePosition));
        if(fadeEnabled)
            page.setAlpha( Math.max(fadeFactor, 1 - absolutePosition));
    }
}
}
androidandroid-viewpagerandroid-animationandroid-transitionsandroid-viewpager2
6
mdDroid

Utilisation de ViewPager2 (qui contient RecyclerView).

vp2 est une instance de ViewPager2

Cela a fonctionné pour moi:

RecyclerView rv = (RecyclerView) vp2.getChildAt(0);
rv.setPadding(80, 0, 80, 0);
rv.setClipToPadding(false);

J'ai utilisé FragmentStateAdapter pour cela et en remplaçant getItemId() et containsItem() pour ajouter/supprimer des fragments.

le résultat est ici:

enter image description here

0
Mahdi Moqadasi

Vous pouvez utiliser clipToPadding et ajouter par programme les pageMargin et padding à votre viewpager. Essayez quelque chose comme ça-

viewpager.setClipToPadding(false);
viewpager.setPadding(40, 0, 70, 0);
viewpager.setPageMargin(20);
0
Naimish Srivastava