Urządzenie wyświetlające Android Viewpager przypominające interfejs użytkownika z wyglądem stosu kart 3D

Question

Próbuję utworzyć interfejs podobny do hubka w Androidzie za pomocą narzędzia ViewPager.

Zajrzałem do tej biblioteki: https://github.com/kikoso/Swipeable-Cards, ale chciałbym móc zobaczyć poprzednią kartę po przesunięciu w prawo, stąd preferencja dla ViewPagera.

Konkretny detal UI szukam jest:

Układanie zdjęć z zarysu następnego widoku pod bieżącym widoku. Byłem w stanie osiągnąć układanie widoków za pomocą interfejsu ViewPager.PageTransformer, ale nie mogę uzyskać zarysu stosu kolejnych widoków wewnątrz pager'a - części, która nadaje mu wygląd 3d - jak tutaj - Karta ułożone na innej karcie - http://i1.cdnds.net/14/38/300x522/friends-tinder-profiles-ross.jpg

Oto moja metoda pageTransform

public void transformPage(View view, float position) { 
    int pageWidth = view.getWidth(); 

    if (position < -1) { // [-Infinity,-1) 
     // This page is way off-screen to the left. 
     view.setAlpha(0); 

    } else if (position <= 0) { // [-1,0] 
     // Use the default slide transition when moving to the left page 
     view.setAlpha(1); 
     view.setTranslationX(0); 
     view.setScaleX(1); 
     view.setScaleY(1); 
     view.setRotation(90*(position)); 

    } else if (position < 1) { // (0,1] 
     // Fade the page out. 
     view.setAlpha(1); 

     // Counteract the default slide transition 
     view.setTranslationX(pageWidth * -position); 

     view.setScaleX(1); 
     view.setScaleY(1); 

    } else if (position==1) { 
     view.setAlpha(1); 
//  view.setPadding(0,15,0,0); 
    } 
    else { // (1,+Infinity] 
     // This page is way off-screen to the right. 
     view.setAlpha(0); 
    } 
} 

Czy to możliwe z viewPager?

Answer 1

Więc to był sposób, że ja go ustawić - jej trochę hacky bo ręcznie wywołać metodę transformPage jak wspomniano w moim komentarzu:

Android ViewPager manually call PageTransformer transformPage

ale to działa!

@Override 
public void transformPage(View view, float position) { 
    int pageWidth = view.getWidth(); 

    if (position < -1) { // [-Infinity,-1) 
     // This page is way off-screen to the left. 
     view.setAlpha(0); 

    } else if (position <= 0) { // [-1,0] 
     // Use the default slide transition when moving to the left page 
     view.setAlpha(1); 
     view.setTranslationX(0); 
     view.setTranslationY(0); 
     view.setScaleX(1); 
     view.setScaleY(1); 
     view.setRotation(90*(position)); 

    } else if (position < 1) { // (0,1] 
     // Fade the page out. 
     view.setAlpha(1); 
     view.setRotation(0); 

     // Counteract the default slide transition 
     view.setTranslationX(pageWidth * -position); 
     view.setTranslationY(50*position); 

     view.setScaleX(Math.max(0.9f, (1 - position))); 
     view.setScaleY(Math.max(0.9f, (1 - position))); 
     CardView cv = (CardView)view.findViewById(R.id.card_view); 
     cv.setPadding(0,0,0,0); 

    } else if (position==1) { 
     view.setAlpha(1); 
     view.setTranslationX(pageWidth*-position); 
     view.setTranslationY(50*position); 

     view.setScaleX(Math.max(0.9f, (1 - position))); 
     view.setScaleY(Math.max(0.9f, (1 - position))); 

    } 

    else { // (1,+Infinity] 
     // This page is way off-screen to the right. 
     view.setAlpha(1); 
    } 
} 

Answer 2

Nie można zaimplementować efektu łyżki za pomocą interfejsu PageTransformer, ponieważ wartość pozycji jest tylko wartością 1-osiową. Powinieneś mieć inne wartości, takie jak współrzędne punktów dotykowych na osi X, Y, ponieważ efekt szczytka wykorzystuje funkcje trygonometryczne.