安卓之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
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >
    <ViewFlipper
        android:id="@+id/viewflipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
    <LinearLayout
        android:id="@+id/dot_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:orientation="horizontal" />
</RelativeLayout>

布局是不是非常的简单，我去实现功能也是比较简单

##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，觉得还行的点个赞，帮忙顶一下，也是很久没有写博客了思路有点乱。

demo 传送门：FlipGuideMaster.rar

时间： 2024-10-07 11:12:03

安卓之ViewFlipper实现渐变视差导航页

前言

ViewFilpper

实现思路

效果

代码讲解

总结

安卓之ViewFlipper实现渐变视差导航页的相关文章

ViewPager实现导航页

【Android实战】ScrollView+GridView+ViewPager实现导航页

[note]导航页调试

可滑动的顶部导航页ViewPager和Fragment的使用

深入理解BootStrap Item11 -- 导航页（navbar）

WPF，Silverlight与XAML读书笔记第十五 - 页间导航页间数据传递

微信导航页

LuaIde 文档导航页

Ionic2 渐变隐藏导航栏|标题栏