如何制作像Flipboard一样的应用程序？

Question

我希望制作一个类似于安卓Flipboard应用的应用程序，如此类。我正在使用gridview来展示画廊图片，但这并不适用。我该如何实现这个功能？我还想应用页面翻页和翻转效果，因为这些效果很棒。

我必须在Flipboard中实现翻页效果，请有经验的人指导一下。

- LOOSER

---

检查这个 https://dev59.com/YGUq5IYBdhLWcg3wKtbs - Naskov

Answer 1

你可以通过使用ViewFlipper或ViewPager API来实现它。

ViewPager API支持ICS以上版本。但是，对于较低的版本，您可以使用android.support-v4库。

对于View Flipper，您可以使用动画进行翻转。

ViewFlipper源代码：

    import android.app.Activity;
    import android.os.Bundle;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    import android.view.Window;
    import android.view.WindowManager;
    import android.view.ViewGroup.LayoutParams;
    import android.view.animation.AnimationUtils;
    import android.widget.ImageView;
    import android.widget.ViewFlipper;

     public class ViewFlipperActivity extends Activity implements  android.view.GestureDetector.OnGestureListener {
/** Called when the activity is first created. */
private int[] imageID = { 
        R.drawable.a01, R.drawable.a02, 
        R.drawable.a03, R.drawable.a04, 
        R.drawable.a05, R.drawable.a06, 
        R.drawable.a07, R.drawable.a08, 
        R.drawable.a09, R.drawable.a010, 
        R.drawable.a011
          };
private ViewFlipper viewFlipper = null;  
private GestureDetector gestureDetector = null;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //Remove title bar
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    //Remove notification bar
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.main);
    viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper); 
    // gestureDetector Object is used to detect gesture events
    gestureDetector = new GestureDetector(this); 
    for (int i = 0; i < imageID.length; i++)  
    { 
        ImageView image = new ImageView(this);  
        image.setImageResource(imageID[i]);  
        image.setScaleType(ImageView.ScaleType.FIT_XY);
        viewFlipper.addView(image, new LayoutParams(  
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    }
}
public boolean onDown(MotionEvent arg0) {
    // TODO Auto-generated method stub
    return false;
}
public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
        float arg3) {
    // TODO Auto-generated method stub
    if (arg0.getX() - arg1.getX() > 120)  
    {  

        this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_left_in));  
        this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_left_out));  
        this.viewFlipper.showNext();  
        return true;  
    }
    else if (arg0.getX() - arg1.getX() < -120)  
    {  
        this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_right_in));  
        this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
                R.anim.push_right_out));  
        this.viewFlipper.showPrevious();  
        return true;  
    }  
    return true;
}
public void onLongPress(MotionEvent arg0) {
    // TODO Auto-generated method stub

}
public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
        float arg3) {
    // TODO Auto-generated method stub
    return false;
}
public void onShowPress(MotionEvent arg0) {
    // TODO Auto-generated method stub

}
public boolean onSingleTapUp(MotionEvent arg0) {
    // TODO Auto-generated method stub
    return false;
}
@Override  
public boolean onTouchEvent(MotionEvent event)  
{  
    return this.gestureDetector.onTouchEvent(event);  
}
 }

View Flipper的XML布局：

    <ViewFlipper  
    android:id="@+id/viewflipper"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"/>

     </LinearLayout>

ViewPager源代码：

    import android.app.Activity;
    import android.content.Context;
    import android.os.Bundle;
    import android.os.Parcelable;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.Menu;
    import android.view.View;
    import android.widget.ImageView;

  public class MainActivity extends Activity  {


private ViewPager viewPager;
private static int NUM_AWESOME_VIEWS = 20;
private Context cxt;
private pageradapter adapter;;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    cxt = this;

    adapter = new pageradapter();
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(adapter);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
}
      private class pageradapter extends PagerAdapter{


    @Override
    public int getCount() {
        return NUM_AWESOME_VIEWS;
    }

    /**
     * Create the page for the given position.  The adapter is responsible
     * for adding the view to the container given here, although it only
     * must ensure this is done by the time it returns from
     * {@link #finishUpdate()}.
     *
     * @param container The containing View in which the page will be shown.
     * @param position The page position to be instantiated.
     * @return Returns an Object representing the new page.  This does not
     * need to be a View, but can be some other container of the page.
     */
    @Override
    public Object instantiateItem(View collection, int position) {
        ImageView iv = new ImageView(cxt);
        iv.setBackgroundResource(R.drawable.a01);
        ((ViewPager) collection).addView(iv,0);


        return iv;
    }

    /**
     * Remove a page for the given position.  The adapter is responsible
     * for removing the view from its container, although it only must ensure
     * this is done by the time it returns from {@link #finishUpdate()}.
     *
     * @param container The containing View from which the page will be removed.
     * @param position The page position to be removed.
     * @param object The same object that was returned by
     * {@link #instantiateItem(View, int)}.
     */
    @Override
    public void destroyItem(View collection, int position, Object view) {
        ((ViewPager) collection).removeView((ImageView) view);
    }



    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==((ImageView)object);
    }


    /**
     * Called when the a change in the shown pages has been completed.  At this
     * point you must ensure that all of the pages have actually been added or
     * removed from the container as appropriate.
     * @param container The containing View which is displaying this adapter's
     * page views.
     */
    @Override
    public void finishUpdate(View arg0) {}


    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {}

    @Override
    public Parcelable saveState() {
        return null;
    }

    @Override
    public void startUpdate(View arg0) {

    }


}



 }

viewPager XML布局：

     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
      android:layout_height="match_parent" >


 <android.support.v4.view.ViewPager
android:id="@+android:id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>



  </RelativeLayout>

- Sharmilee

Answer 2

如果您对页面布局不确定，但是这个页面翻页动画教程可能会有所帮助：

http://openaphid.github.com/blog/2012/05/21/how-to-implement-flipboard-animation-on-android/

- Anup Cowkur

Answer 3

如果有人使用接受答案中的库，并且需要在没有滑动手势的情况下翻页（例如实现上一页和下一页按钮），可以使用我为自己编写的方法。我花了一些时间来弄清楚库是如何工作的，所以我认为这可能会有所帮助。

将此添加到 FlipCards.java 中

  protected void flipToNextCard()
  {
      if(accumulatedAngle >= (maxIndex-1)*180 || state != STATE_INIT)
          return;

      controller.showFlipAnimation();
      forward = true;
      setState(STATE_AUTO_ROTATE);
      controller.getSurfaceView().requestRender();
  }

  protected void flipToPreviousCard()
  {
      if(accumulatedAngle <= 0 || state != STATE_INIT)
          return;

      controller.showFlipAnimation();
      forward = false;
      swapCards();
      frontCards.resetWithIndex(backCards.getIndex() - 1);
      controller.flippedToView(getPageIndexFromAngle(accumulatedAngle-1), false);
      setState(STATE_AUTO_ROTATE);
      controller.getSurfaceView().requestRender();
  } 

将此内容添加至FlipViewController.java文件中

  public void flipToNextView()
  {
      cards.flipToNextCard();
  }

  public void flipToPreviousView()
  {
      cards.flipToPreviousCard();
  }

- Greg