Herausforderung: Benutzerdefinierte Animation von ViewPager. Höhe der ausgewählten Elemente ändern (Ansicht einblenden)

Question

Ich arbeite gerade an einer benutzerdefinierten Animation zwischen den Seiten im ViewPager. Wenn ich nach links rutsche, bewegt sich View nach links und von unten kommt neue View nach vorne. Ich möchte die Ansicht machen, die nach links bewegt (die ich entsorgen) zu schrumpfen wie auf den Folowing Bilder:

Auf dem zweiten und dritten Bild, das ich nicht neu Aussicht hat Bild nach vorne kommen, aber ich denke, es war nicht notwendig. Hast du eine Idee, wie ich den Code ändern kann?

Ich möchte die Höhe von TableLayout, RelativeLayout und FrameLayout ändern und die Höhe beider TextViews beibehalten. Außerdem müsste ich die X-Position des gesamten Views ändern.

Ich freue mich auf Ihre kreativen Antworten (Code). Im Folgenden füge ich meinen Code für die Animation an.

import android.view.View; 
import android.widget.RelativeLayout; 
import android.annotation.SuppressLint; 
import android.support.v4.view.ViewPager.PageTransformer; 

public class DepthPageTransformer implements PageTransformer { 
    private static float MIN_SCALE = 0.75f; 

    @SuppressLint("NewApi") 
    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.setTranslationX(0); 
      view.setScaleX(1); 
      view.setScaleY(1); 
      //float scaleFactor = (1 - Math.abs(position)); 

      //WHAT TO PUT HERE TO ARCHIVE MY GOAL?? 

      //This is how I can get particular layouts: 
      // RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.fragment_object_canvas_RelativeLayout1); 
      //relativeLayout.setScaleX(scaleFactor); 
      //relativeLayout.setScaleY(scaleFactor); 

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

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

      // Scale the page down (between MIN_SCALE and 1) 
      float scaleFactor = MIN_SCALE 
        + (1 - MIN_SCALE) * (1 - Math.abs(position)); 
      view.setScaleX(scaleFactor); 
      view.setScaleY(scaleFactor); 

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

UPDATE:

I mit einer Höhe von ganzer Ansicht manipulieren kann (jetzt kann ich dies nur) mit dem folgenden Code:

LinearLayout relativeLayout = (LinearLayout) view.findViewById(R.id.fragment_object_canvas_linearLayout1); 
      relativeLayout.setLayoutParams(new FrameLayout.LayoutParams(relativeLayout.getWidth(), NEW_HEIGHT_HERE))); 

Aber ich bin nicht sicher, was sollte Ich setzte in NEW_HEIGHT_HERE Variable, damit es richtig funktioniert ...

Answer 1

versuchen, mit einer Position Float-Variable zu arbeiten. Holen Sie die Höhe Ihres Layout und ...:

relativeLayout.setLayoutParams(....,position*height+height) 

Answer 2

Sie ziemlich hartnäckig scheinen auf Menschen ursprünglichen Code zu veröffentlichen, aber warum das Rad neu erfinden? Diese Bibliothek enthält eine Menge toller Animationen für einen ViewPager, einschließlich einer, die sehr ähnlich zu dem ist, was Sie anscheinend anfordert.

https://github.com/jfeinstein10/JazzyViewPager

JazzyViewPager - Eine einfache ViewPager zu verwenden, die einen ehrfürchtigen Reihe von benutzerdefinierten klauen Animationen hinzufügt. Ändern Sie einfach Ihre ViewPagers zu JazzyViewPagers und Sie können loslegen!

---

public enum TransitionEffect { 
     Standard, 
     Tablet, 
     CubeIn, 
     CubeOut, 
     Flip, 
     Stack, 
     ZoomIn, 
     ZoomOut, 
     RotateUp, 
     RotateDown, 
     Accordion 
    } 

Sie können Ihre Animation auswählen, indem

private JazzyViewPager mJazzy; 
/* ... */ 
mJazzy.setTransitionEffect(TransitionEffect.*);