Android ViewFlipper用法淺析

在Android應用開發中，我們經常會需要實現左右切換視圖的功能，這通常需要在LinearLayout、RelativeLayout等布局中添加ImageView來實現。如果每次只需展示一張圖片，並可以通過左右滑動屏幕來顯示前一張或者后一張圖片，就可以通過ViewFlipper或者ViewSwitcher來實現。滑動的手勢檢測主要通過MotionEvent類來實現，但在本文中是由GestureDetector類來實現的。

 

當我們需要在兩個或更多個視圖間滑動顯示時，ViewFlipper類通常是最好的選擇。使用ViewFlipper需在布局文件中添加相應的ViewFlipper內容：

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
    </ViewFlipper>

</RelativeLayout>

可以通過兩種方式向ViewFlipper中添加子視圖：

    > 在布局資源內添加

    > 程序化添加

在下面的示例中采用第二種方式。

接下來在Activity中向ViewFlipper程序化添加圖片：

public class MainActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;
    private GestureDetector gestureDetector;

    int[] resources = {
            R.drawable.one,
            R.drawable.two,
            R.drawable.three,
            R.drawable.four,
            R.drawable.five,
            R.drawable.six
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);

        for (int i = 0; i < resources.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(resources[i]);
            viewFlipper.addView(imageView);
        }
    }
}

至此，運行APP可以看到會顯示第一張圖片，但滑動屏幕並不能顯示其他圖片。下面，我們用GestureDetector類來檢測滑動動作，首先需要自定義一個繼承了SimpleOnGestureListener的類，在其中判斷滑動方向並顯示相應圖片：

class CustomGestureDetector extends GestureDetector.SimpleOnGestureListener {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        if (e1.getX() > e2.getX()) { //如果初始觸點的X坐標比最終觸點的X坐標大表示向左滑動
            viewFlipper.showNext();
        }

        if (e1.getX() < e2.getX()) { //如果初始觸點的X坐標比最終觸點的X坐標小表示向右滑動
            viewFlipper.showPrevious();
        }

        return super.onFling(e1, e2, velocityX, velocityY);
    }
}

最后通過簡單代碼在onCreate()方法內初始化改監聽方法：

CustomGestureDetector customGestureDetector = new CustomGestureDetector();
gestureDetector = new GestureDetector(this, customGestureDetector);

並在onTouchEvent()回調中實現getstureDetector.onTouchEvent(event);

@Override
public boolean onTouchEvent(MotionEvent event){
    gestureDetector.onTouchEvent(event);

    return super.onTouchEvent(event);
}

此外，還可以通過ViewFlipper為圖片切換增加動畫效果：

viewFlipper.setInAnimation(this, android.R.anim.fade_in);
viewFlipper.setInAnimation(this, android.R.anim.fade_out);

如果希望應用能夠自動切換圖片，還可以通過ViewFlipper設置圖片自動播放和播放時間：

viewFlipper.setAutoStart(true);
viewFlipper.setFlipInterval(2000);

 

 

 

參考：

http://codetheory.in/android-viewflipper-and-viewswitcher/