7

上下滑動像那些新聞應用效果inshorts息的消息雜音的Android:佈局動畫像Inshorts新聞應用程式

整體佈局平滑上/下。
檢查此鏈接上的應用程序inshortsmurmur

我想這個代碼...

public class VerticalViewPager extends ViewPager { 
    public VerticalViewPager(Context context) { 
     super(context); 
     init(); 
    } 

    public VerticalViewPager(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 
    private void init() { 
     // The majority of the magic happens here 
     setPageTransformer(true, new VerticalPageTransformer()); 
     // The easiest way to get rid of the overscroll drawing that happens on the left and right 
     setOverScrollMode(OVER_SCROLL_NEVER); 
    } 
    private class VerticalPageTransformer implements PageTransformer { 

     @SuppressLint("NewApi") 
     @Override 
     public void transformPage(View view, float position) { 

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

      } else if (position <= 1) { // [-1,1] 
       view.setAlpha(1); 

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

       //set Y position to swipe in from top 
       float yPosition = position * view.getHeight(); 
       view.setTranslationY(yPosition); 

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

    /** 
    * Swaps the X and Y coordinates of your touch event. 
    */ 
    private MotionEvent swapXY(MotionEvent ev) { 
     float width = getWidth(); 
     float height = getHeight(); 

     float newX = (ev.getY()/height) * width; 
     float newY = (ev.getX()/width) * height; 

     ev.setLocation(newX, newY); 

     return ev; 
    } 

    @Override 
    public boolean onInterceptTouchEvent(MotionEvent ev){ 
     boolean intercepted = super.onInterceptTouchEvent(swapXY(ev)); 
     swapXY(ev); // return touch coordinates to original reference frame for any child views 
     return intercepted; 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent ev) { 
     return super.onTouchEvent(swapXY(ev)); 
    } 

} 

在MainActivity.java

VerticalViewPager Pager2; 
PagerAdapter adapter; 
String[] articleTitle; 
String[] articleName; 
String[] articleDiscription; 

OnCreate() 

Pager2=(VerticalViewPager)findViewById(R.id.pager); 


// Pass results to ViewPagerAdapter Class 
adapter = new ViewPagerAdapter(getActivity(), articleTitle, articleName,  articleDiscription, btnBack,articleImage); 

// Binds the Adapter to the ViewPager 
Pager2.setAdapter(adapter); 

activity_main.xml中

<com.example.flipnews.VerticalViewPager 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:id="@+id/pager" 
    /> 

在我的代碼簡單的上下輕掃做,像這link。 但我想創建像上面提到的應用程序更好的動畫效果。 或手機內置照片庫效果。

在此先感謝。

+0

你好,Viveka ...我們不能幫你開發東西......我們只能幫你解決這個問題。你需要自己嘗試一下,然後在後面發佈你的代碼。 –

+1

@Viveka如果你發現這個動畫的任何庫,請告訴我。 – Dev

+1

我已經試過這段代碼,但沒有得到正確的輸出。請仔細檢查我的代碼。 - @MarianoZorrilla –

回答

13

我發現許多研究後的解決方案,我希望它對他人有幫助。

提示:設置查看尋呼機背景顏色黑色以獲得更好的刷卡效果。

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

     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(1); 
       view.setScaleX(1); 
       view.setScaleY(1); 
       float yPosition = position * view.getHeight(); 
       view.setTranslationY(yPosition); 
       view.setTranslationX(-1 * view.getWidth() * position); 

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

       view.setTranslationX(-1 * view.getWidth() * position); 

       // 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); 
      } 

     } 
    } 

    private MotionEvent swapXY(MotionEvent ev) { 
     float width = getWidth(); 
     float height = getHeight(); 

     float newX = (ev.getY()/height) * width; 
     float newY = (ev.getX()/width) * height; 

     ev.setLocation(newX, newY); 

     return ev; 
    } 

    @Override 
    public boolean onInterceptTouchEvent(MotionEvent ev){ 
     boolean intercepted = super.onInterceptTouchEvent(swapXY(ev)); 
     swapXY(ev); // return touch coordinates to original reference frame for any child views 
     return intercepted; 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent ev) { 
     return super.onTouchEvent(swapXY(ev)); 
    } 

} 
+0

工作真棒你救了我的一天!!!!! – user3069590

+0

@Viveka我有一個問題,我的查看傳呼器裏面有一個網格視圖。當在網格刷卡功能不起作用 – Praneeth

+0

嗨,我試過你的答案,它的效果很好。我是一個初學者。你能給我一個關於你到底在做什麼的簡短描述,例如'view.setTranslationX(-1 * view.getWidth()* position);'這個? – Vishnu