的Cover Flow功能使用视图寻呼机的Android

Question

我有我的应用程序类似于实施的Cover Flow功能 mobikwik app cover flow

和。

我已经试过Android CoverFlow widget library和其他几个。但没有按预期工作。

如何使用ViewPager实现这种类型的视图？

Answer 1

我已经创建了我的课ZoomOutPageTransformer，这是实施PageTransformer和这个设置到使用setPageTransformer()方法的寻呼机。 请检查波纹管ZoomOutPageTransformer.class -

public class ZoomOutPageTransformer implements PageTransformer { 
    private static float MIN_SCALE = 1f; 
    private static final float MIN_ALPHA = 0.7f; 


    public ZoomOutPageTransformer(boolean isZoomEnable) { 
     if (isZoomEnable) { 
      MIN_SCALE = 0.85f; 
     } else { 
      MIN_SCALE = 1f; 
     } 
    } 

    public void transformPage(View view, float position) { 
     int pageWidth = view.getWidth(); 
     int pageHeight = view.getHeight(); 
     float vertMargin = pageHeight * (1 - MIN_SCALE)/2; 
     float horzMargin = pageWidth * (1 - MIN_SCALE)/2; 
     view.setScaleX(MIN_SCALE); 
     view.setScaleY(MIN_SCALE); 
     if (position < -1) { // [-Infinity,-1) 
      // This page is way off-screen to the left. 
      view.setAlpha(MIN_ALPHA); 
      view.setTranslationX(horzMargin - vertMargin/2); 


     } else if (position <= 1) { // [-1,1] 
      // Modify the default slide transition to shrink the page as well 
      float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 
      vertMargin = pageHeight * (1 - scaleFactor)/2; 
      horzMargin = pageWidth * (1 - scaleFactor)/2; 
      if (position < 0) { 
       view.setTranslationX(horzMargin - vertMargin/2); 
      } else { 
       view.setTranslationX(-horzMargin + vertMargin/2); 
      } 

      // Scale the page down (between MIN_SCALE and 1) 
      view.setScaleX(scaleFactor); 
      view.setScaleY(scaleFactor); 

      // Fade the page relative to its size. 
      view.setAlpha(MIN_ALPHA + 
        (scaleFactor - MIN_SCALE)/
          (1 - MIN_SCALE) * (1 - MIN_ALPHA)); 

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

     } 
    } 
} 

和PagerActivity.java -

public class PagerActivity extends Activity { 

    ViewPager pager; 

    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 

     pager = (ViewPager) findViewById(R.id.viewPager); 
//  mContainer.setViewPager(pager); 
     PagerAdapter adapter = new MyPagerAdapter(); 
     pager.setPageTransformer(true, new ZoomOutPageTransformer(true)); 
     pager.setAdapter(adapter); 
     //Necessary or the pager will only have one extra page to show 
     // make this at least however many pages you can see 
//  pager.setOffscreenPageLimit(adapter.getCount()); 
     pager.setOffscreenPageLimit(3); 
     //A little space between pages 
     pager.setPageMargin((int) getResources().getDimension(R.dimen.dimen_20)); 
     //If hardware acceleration is enabled, you should also remove 
     // clipping on the pager for its children. 
     pager.setClipChildren(false); 
    } 
    //Nothing special about this adapter, just throwing up colored views for demo 
    private class MyPagerAdapter extends PagerAdapter { 
     @Override 
     public Object instantiateItem(ViewGroup container, int position) { 
      TextView view = new TextView(PagerActivity.this); 
      view.setText("Item " + position); 
      view.setGravity(Gravity.CENTER); 
      view.setBackgroundColor(Color.argb(255, position * 50, position * 10, position * 50)); 
      container.addView(view); 
      return view; 
     } 
     @Override 
     public void destroyItem(ViewGroup container, int position, Object object) { 
      container.removeView((View) object); 
     } 
     @Override 
     public int getCount() { 
      return 9; 
     } 
     @Override 
     public boolean isViewFromObject(View view, Object object) { 
      return (view == object); 
     } 
    } 
} 

在main.xml -

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <FrameLayout 
     android:id="@+id/pager_container" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_centerVertical="true" 
     android:background="#CCC" 
     android:clipChildren="false"> 
     <android.support.v4.view.ViewPager 
      android:id="@+id/viewPager" 
      android:clipChildren="false" 
      android:layout_width="match_parent" 
      android:layout_height="300dp" 
      android:layout_gravity="center" 
      android:layout_marginLeft="@dimen/dimen_50" 
      android:layout_marginRight="@dimen/dimen_50" /> 
    </FrameLayout> 
</RelativeLayout> 

它为我工作。