Cách tạo ứng dụng như Flipboard?

Question

Tôi muốn tạo một ứng dụng tương tự như Flipboard trên Android như this. Tôi đang sử dụng GridView để hiển thị hình ảnh trong Thư viện nhưng không áp dụng được. Làm thế nào tôi có thể đạt được điều này? Tôi cũng muốn áp dụng trang curl và flip.bởi vì trang curl và flip.

Tôi phải triển khai hiệu ứng curl trong bảng lật, bất kỳ ai cũng hướng dẫn tôi.

Answer 1

Không chắc về cách bố trí nhưng trang này lật hình ảnh động hướng dẫn có thể giúp:

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

Answer 2

bạn có thể đạt được điều đó bằng cách sử dụng ViewFlipper hoặc ViewPager API. API ViewPager được hỗ trợ trên ICS. nhưng, đối với phiên bản người yêu bạn có thể sử dụng thư viện android.support-v4.

cho Xem Flipper, bạn có thể sử dụng hoạt ảnh để lật.

đang nguồn 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); 
} 
} 

Xem Flipper XML layout:

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

    </LinearLayout> 

ViewPager đang 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) { 

    } 


} 



} 

ViewPager XML layout ::

 <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

Nếu ai đó sử dụng thư viện từ câu trả lời chấp nhận và cần phải lật trang mà không cần vuốt cử chỉ (ví dụ để thực hiện các nút tiếp theo và trước) có thể sử dụng các phương pháp mà tôi đã làm cho bản thân mình . Tôi dành một chút thời gian để tìm ra cách thức hoạt động của thư viện vì vậy tôi nghĩ rằng nó có thể hữu ích.

thêm video này vào 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(); 
    } 

và điều này để FlipViewController.java

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

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