Android ViewFlipper翻轉視圖的基本使用

前言：

ViewFlipper，它是Android自帶的一個多頁面管理控件，且可以自動播放！和ViewPager不同，ViewPager是一頁頁的，而ViewFlipper則是一層層的，和ViewPager一樣，很多時候，用來實現進入應用後的引導頁，或者用來圖片輪播，本次實現圖片輪播功能。

一、爲ViewFlipper加入View的兩種方式

1、靜態導入 

 所謂的靜態導入就是像圖片這樣，把個個頁面添加到ViewFlipper的中間！

<ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000"><!--每隔3秒切換一個view-->
        <include layout="@layout/page1"/>
        <include layout="@layout/page2"/>
        <include layout="@layout/page3"/>
        <include layout="@layout/page"/>
    </ViewFlipper>

2、動態導入

   通過addView()方法填充View。

viewFlipper=findViewById(R.id.viewFlipper);
viewFlipper.addView(v1);
viewFlipper.addView(v2);
viewFlipper.addView(v3);
viewFlipper.addView(v4);
viewFlipper.startFlipping();

二、常用方法

• setInAnimation():設置View進入屏幕時使用的動畫
• setOutAnimation():設置View退出屏幕時使用的動畫
• showNext():調整該方法來顯示ViewFlipper裏的下一個View
• showPrevious():調整該方法來顯示ViewFlipper裏的上一個View
• setFilpInterval():設置View之間切換的時間間隔
• setFlipping():使用上面設置的時間間隔來開始切換所有的View，切換會循環進行
• stopFlipping():停止View切換

三、實例Demo 

1、靜態導入，使用ViewFlipper實現圖片輪播

實現效果：

實現代碼：

首先添加四個子佈局，每個佈局都添加ImageView控件，不貼了吧！

動畫anim實現向左翻轉：

right_in.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0"
        />
</set>

right_out.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="-100%p"/>
</set>

View層主佈局activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000"><!--每隔3秒切換一個view-->
        <include layout="@layout/page1"/>
        <include layout="@layout/page2"/>
        <include layout="@layout/page3"/>
        <include layout="@layout/page"/>
    </ViewFlipper>

</LinearLayout>

Control層MainActivity.java:

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;//翻轉視圖類
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper=findViewById(R.id.view_flipper);
        viewFlipper.startFlipping();//開啓viewFlipper
    }
}

2、動態導入，支持手勢滑動的ViewFlipper

實現效果圖：

實現代碼：應爲可以左右滑動，因此需要添加兩個向右的動畫。

left_in.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate
       android:fromXDelta="-100%p"
       android:toXDelta="0"
       android:duration="500"/>
</set>

left_out.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate
       android:toXDelta="100%p"
       android:fromXDelta="0"
       android:duration="500"/>
</set>

Control層 DynamicViewFlipperActivity.java：

public class DynamicViewFlipperActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;
    private int[] resId={R.mipmap.nature,R.mipmap.sun,R.mipmap.waterfall,R.mipmap.flowers};
    private final static  int MIN_MOVE=200;//最小距離
    private GestureDetector mDetector;//識別一些基本的觸摸手勢
    private MyGestureListener myGestureListener;//觸摸手勢監聽
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dynamic_view_flipper);
        init();
    }
    private void init(){
        viewFlipper=findViewById(R.id.viewFlipper);
        myGestureListener=new MyGestureListener();
        mDetector=new GestureDetector(this,myGestureListener);
        for (int i=0;i<resId.length;i++){
            viewFlipper.addView(getImageView(resId[i]));
        }
    }
    //重寫onTouchEvent觸發MyGestureListener裏的方法
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mDetector.onTouchEvent(event);
    }
    //獲取圖片
    private ImageView getImageView(int resId){
        ImageView image=new ImageView(this);
        image.setImageResource(resId);
        return image;
    }
    //自定義一個GestureListener,這個是View類下的
    private class MyGestureListener extends GestureDetector.SimpleOnGestureListener{
        //onFling():鼠標手勢相當於一個向量（當然有可能手勢是曲線），e1爲向量的起點，e2爲向量的終點，
        // velocityX爲向量水平方向的速度，velocityY爲向量垂直方向的速度
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            if(e1.getX()-e2.getX()>MIN_MOVE){
                viewFlipper.setInAnimation(DynamicViewFlipperActivity.this,R.anim.right_in);
                viewFlipper.setOutAnimation(DynamicViewFlipperActivity.this,R.anim.right_out);
                viewFlipper.showNext();
            }else if (e2.getX()-e1.getX()>MIN_MOVE){
                viewFlipper.setInAnimation(DynamicViewFlipperActivity.this,R.anim.left_in);
                viewFlipper.setOutAnimation(DynamicViewFlipperActivity.this,R.anim.left_out);
                viewFlipper.showPrevious();
            }
            return true;
        }
    }
}

問題：圖片不能全屏顯示

解決辦法：讓類繼承Activity，而不是AppCompatActivity(v7包下）；在Android配置文件application中添加Android自帶主題：

android:theme="@android:style/Theme.NoTitleBar"