安卓之ViewFlipper實現漸變視差導航頁

前言

以前的導航頁總是使用viewPager配套fragment來實現的，某天一個妹子說其實導航頁也可以使用ViewFilpper 來實現，哈哈確實不錯，前段時間就用ViewFilpper 實現了京東快報,然後呢那時候對ViewFilpper 也隨便了解了下，不過那個直接是xml實現的，這裡不表了，接著看今天實現的漸變視差導航頁。

ViewFilpper

ViewFilpper 是Android官方提供的一個View容器類，繼承於ViewAnimator類，用於實現頁面切換，也可以設定時間間隔，讓它自動播放。 又ViewAnimator繼承至於FrameLayout的，所以ViewFilpper的Layout裡面可以放置多個View viewFlipper的學習使用 viewFlipper的學習使用，可做引導頁。

實現思路

Activity實現android.view.GestureDetector.OnGestureListener 監聽接口，並聲明gestureDetector = new GestureDetector(this); 用於監聽手勢事件 在Activity的成員函數onTouchEvent(MotionEvent event)中，注冊GestureDetector.OnGestureListener手勢監聽事件接口 在GestureDetector.OnGestureListener回調函數onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) 中，實現滑屏動畫

效果

看圖確實有點卡，截屏的確實沒有辦法。

代碼講解

懶得多扯淡看代碼：

###activity_main.xml

    
    

布局是不是非常的簡單，我去實現功能也是比較簡單

##MainActivity.java
package com.losileeya.flipguidemaster;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity implements
        android.view.GestureDetector.OnGestureListener {
    private int[] imgs = { R.drawable.hpw1, R.drawable.hpw2, R.drawable.hpw3,
            R.drawable.hpw4, R.drawable.hpw5 };

    private GestureDetector gestureDetector = null;
    private ViewFlipper viewFlipper = null;
    private LinearLayout dot_layout;
    private Activity mActivity = null;
    private ImageView[] images;
    private int index = 0;
    private boolean isrunning = false;

    private Handler handler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            showNext();
            //延時，循環調用handler
            if(isrunning){
                handler.sendEmptyMessageDelayed(0, 3000);
            }
        }


    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        mActivity = this;
        init();
        viewFlipper.setAutoStart(true); // 設置自動播放功能（點擊事件，前自動播放）
        viewFlipper.setFlipInterval(3000);//3秒鐘自動滑動下
        // 滾動時，自動切換白點
        if (viewFlipper.isAutoStart() && !viewFlipper.isFlipping()) {
            viewFlipper.startFlipping();
            isrunning=true;
            handler.sendEmptyMessageDelayed(0,3000);
        }

    }

    /**
     * 初始化
     */
    private void init() {
        viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
        dot_layout = (LinearLayout) findViewById(R.id.dot_layout);
        //初始化白點
        initDot(0);
        gestureDetector = new GestureDetector(this); // 聲明檢測手勢事件
        for (int i = 0; i < imgs.length; i++) { // 添加圖片源
            //把圖片加入到FlipperView裡面
            ImageView iv = new ImageView(this);
            iv.setImageResource(imgs[i]);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            viewFlipper.addView(iv, new LayoutParams(LayoutParams.FILL_PARENT,
                    LayoutParams.FILL_PARENT));
        }
    }

    private void initDot(int select) {
        images = new ImageView[imgs.length];//設置小白點數目為圖片的數目
        dot_layout.removeAllViews();//先清空裡面的所有白點
        for (int i = 0; i < imgs.length; i++) {
            ImageView localImageView = new ImageView(this);
            LinearLayout.LayoutParams localLayoutParams = new LinearLayout.LayoutParams(
                    -2, -2);
            localLayoutParams.leftMargin = 30;//設置白點間的邊距
            localImageView.setLayoutParams(localLayoutParams);
            localImageView.setImageResource(R.drawable.dot_bg);
            //根據是否選中來確定顯示圖片
            if (i == select)
                localImageView.setEnabled(true);
            else
                localImageView.setEnabled(false);
            images[i] = localImageView;
            dot_layout.addView(localImageView);//把所有白點添加到父布局裡面
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
//        viewFlipper.stopFlipping(); // 點擊事件後，停止自動播放
//        viewFlipper.setAutoStart(false);
       // isrunning=false;
        return gestureDetector.onTouchEvent(event); // 注冊手勢事件
    }

    /**
     * 滑動手勢事件，例如scroll事件後突然up，fling的速度大小由e每秒x和y改變大小決定
     * 實現滑屏動畫
     * @param e1
     * @param e2
     * @param velocityX
     * @param velocityY
     * @return
     */
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                           float velocityY) {
        if (e2.getX() - e1.getX() > 120) { // 從左向右滑動（左進右出）
            showPrevious();
            return true;
        } else if (e2.getX() - e1.getX() < -120) { // 從右向左滑動（右進左出）
            showNext();
            return true;
        }
        return true;
    }


    /**
     * down事件發生而move或則up還沒發生前觸發該事件，
     * 此事件一般用於通知用戶press按擊事件已發生
     * @param e
     */
    public void onShowPress(MotionEvent e) {
    }

    /**
     * 一次點擊up事件，表示按下後的抬起事件
     * @param e
     * @return
     */
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    /**
     *
     * 在屏幕上拖動事件，即down按下點——scroll拖動——up抬起點的move移動事件 本示例的滑動屏幕動畫，
     * 僅用到了上面的GestureDetector.OnGestureListener及其onFling事件
     * @param e1
     * @param e2
     * @param distanceX
     * @param distanceY
     * @return
     */
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
                            float distanceY) {
        return false;
    }

    /**
     * 長按事件，down事件後up事件前的一段時間間隔後（由系統分配，也可自定義），
     * 如果仍然按住屏幕則視為長按事件
     * @param e
     */
    @Override
    public void onLongPress(MotionEvent e) {
    }

    /**
     * down事件，表示按下事件
     * @param e
     * @return
     */
    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }

    /**
     * 下一個頁面
     */
    private void showNext() {
        Animation lInAnim = AnimationUtils.loadAnimation(mActivity,
                R.anim.push_left_in); // 向左滑動左側進入的漸變效果（alpha 0.1 -> 1.0）
        Animation lOutAnim = AnimationUtils.loadAnimation(mActivity,
                R.anim.push_left_out); // 向左滑動右側滑出的漸變效果（alpha 1.0 -> 0.1）
        viewFlipper.setInAnimation(lInAnim);
        viewFlipper.setOutAnimation(lOutAnim);
        viewFlipper.showNext();
        if (index < imgs.length - 1) {
            index++;
        } else {
            index = 0;
        }
        initDot(index);
    }

    /**
     * 上一個頁面
     */
    private void showPrevious() {
        Animation rInAnim = AnimationUtils.loadAnimation(mActivity,
                R.anim.push_right_in); // 向右滑動左側進入的漸變效果（alpha 0.1 -> 1.0）
        Animation rOutAnim = AnimationUtils.loadAnimation(mActivity,
                R.anim.push_right_out); // 向右滑動右側滑出的漸變效果（alpha 1.0 -> 0.1）
        viewFlipper.setInAnimation(rInAnim);
        viewFlipper.setOutAnimation(rOutAnim);
        viewFlipper.showPrevious();
        if (index >= 1) {
            index--;
        } else {
            index = imgs.length - 1;
        }
        initDot(index);
    }
}

1、 setAutoStart(true)，設置是否自動播放功能，true為自動播放，false為不自動播放，開啟自動播放設為true
2、 setFlipInterval(int milliseconds)，設置View播放的時間間隔，如3000（3秒）
3、 startFlipping()，開始自動播放 停止自動播放View，

設置成員函數如下：
1、 stopFlipping()，停止自動播放
2、 setAutoStart(false)，停止自動播放，設為false

從代碼 可以看出：就是把圖片加入到ViewFlipper，然後呢設置手勢的監聽，通過onFling方法來處理ViewFlipper裡面的圖片切換，並且利用showPrevious()和showNext()來切換場景，然後通過index來標記滑到的頁數，並且通過index來顯示白色點的高亮和灰色。漸變的效果其實就是切入切出動畫透明度的變化，通過handle來處理index的自動改變實現自動切換。

總結

ViewFilpper 的使用就到這裡了,主要也是ViewFilpper加了動畫並且能夠自動滾動，然後如果不加手勢監聽的話就無法監聽onFling（）方法，從而無法使用手指來控制，或許裡面存在問題，請大家指出來好了，寫這個的目的也就是為了更加了解ViewFilpper，覺得還行的點個贊，幫忙頂一下，也是很久沒有寫博客了思路有點亂。