Jak zrobić aplikację podobną do Flipboard?

Question

Chcę utworzyć aplikację podobną do Flipboard na Androidzie, taką jak this. Używam gridview do wyświetlania obrazów galerii, ale to nie dotyczy. Jak mogę to osiągnąć? Chcę również zastosować zwijanie i przewijanie strony. W celu zwinięcia strony i odwrócenia.

Muszę zaimplementować efekt zawijania w flipboard, proszę, poprowadź mnie.

Answer 1

Nie jestem pewien układ, ale ta strona Rzut samouczek animacja może pomóc:

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

Answer 2

można go osiągnąć za pomocą ViewFlipper lub viewPager API. ViewPager API jest obsługiwany powyżej usługi ICS. ale dla wersji kochanek możesz użyć biblioteki android.support-v4.

dla widoku Flipper można użyć animacji do przewracania.

kod ViewFlipper źródło ::

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

Zobacz Flipper XML układ:

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

    </LinearLayout> 

ViewPager kod dource ::

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) { 

    } 


} 



} 

Układ

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> 

Answer 3

Jeśli ktoś wykorzystuje bibliotekę z przyjętą odpowiedzi i trzeba odwrócić stron bez gest machnięcia (na przykład w celu realizacji kolejnych i poprzednich przycisków) można użyć metod, które zrobiłem dla siebie . Spędzam chwilę, aby dowiedzieć się, jak działa biblioteka, więc myślę, że może być pomocna.

dodać do 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(); 
    } 

i to FlipViewController.java

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

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