安卓之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