自定义ViewFlipper实现带索引效果的自动播放广告栏

前几天看到淘宝和易迅的客户端的广告栏做的不错，今天就尝试了一下，模仿着写了带指引的ViewFlipper。本文主要介绍指引栏的实现，论坛上关于ViewFlipper的使用和介绍很多，就不过多介绍。

效果图如下：

首先是布局，稍有Android开发经验的人很容易看出来，这是一个Layout里面嵌套了ViewFliper和一个LinearLayout。布局如下：

<RelativeLayout android:id="@+id/food_recom_viewfliper_rl"android:layout_width="fill_parent"android:longClickable="true"android:layout_height="150dp"><com.mobsut.mm.widget.GestureViewFliperandroid:id="@+id/food_recom_viewfliper"android:layout_height="150dp"android:background="@color/white"android:layout_width="fill_parent"/><LinearLayoutandroid:id="@+id/food_recom_page_indicator"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:gravity="center"android:orientation="horizontal"android:padding="@dimen/offset_2dp"></LinearLayout></RelativeLayout >

可以看到这个GestureViewFliper是我自定义的，继承于VIewFlipper，实现OnGestureListener接口用来识别用户手势，让用户可以手动滑动广告栏。在用GestureDetector识别手势时，会出现一个问题：onFling函数不被触发，这时需要把onDown设置为true。

在用户滑动之前，需要注意：当用户将作出滑动手势时，需要停掉自动播放，然后用户结束滑动时，继续自动播放。

然后是重点，要实现带索引的效果，首先需要得到ViewFlipper的当前展示的View的索引值，而这个View当自动播放时是实时变化的，但是ViewFlipper并没有提供一个接口，在可以监听自动播放时view的变化。所以，需要自定义一个回调接口，监听displayView的变化，并把相应的索引值传递出去。这样才可以实现索引效果。

自定义的ViewFlipper源码如下：

package com.mobsut.mm.widget;import android.content.Context;import android.util.AttributeSet;import android.view.GestureDetector;import android.view.View;import android.view.GestureDetector.OnGestureListener;import android.view.MotionEvent;import android.view.animation.AnimationUtils;import android.widget.ViewFlipper;/** 自定义的ViewFliper，监听滑动手势,以及自动指引* @author jiakang*/import com.mobsut.mm.R;public class GestureViewFliper extends ViewFlipper implements OnGestureListener {GestureDetector gestureDetector = null;private Context mContext = null;FlipperFacousChangedListener flipperFacousChangedListener=null;public GestureViewFliper(Context mContext) {super(mContext);}public GestureViewFliper(Context mContext, AttributeSet attrs) {super(mContext, attrs);this.mContext = mContext;gestureDetector = new GestureDetector(mContext, this);setLongClickable(true);setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubreturn gestureDetector.onTouchEvent(event);}});}@Overridepublic void startFlipping() {// TODO Auto-generated method stubsuper.startFlipping();setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.m_push_up_in)); setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.m_push_up_out));}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubstopFlipping(); //用户点击屏幕时，停止滑动setAutoStart(false); //取消自动滑动return this.gestureDetector.onTouchEvent(event); //把touch事件交给gesture处理}@Overridepublic boolean onDown(MotionEvent e) {// TODO Auto-generated method stubreturn true; // 缺省值是false,在onTouchEvent后触发，如果为false，onFling将得不到down的事件即不触发}/** 重写了onFling，为了判断手势，让手势滑动* * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.* MotionEvent, android.view.MotionEvent, float, float)*/@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {// TODO Auto-generated method stubif (e2.getX() - e1.getX() > 120) { // 从左侧滑进setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.m_push_up_in));//设置进出动画setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.m_push_up_out));//用户手势滑动结束，再次开始自动播放showPrevious();setAutoStart(true);startFlipping();return true;} else if (e2.getX() - e1.getX() < -120) { //从右侧画出setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.m_push_up_out)); //设置进出动画setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.m_push_up_in));//滑动结束，再次自动播放showNext();setAutoStart(true);startFlipping();return true;}return false;}@Overridepublic void showNext() {// TODO Auto-generated method stubsuper.showNext();//监听向下向下翻页flipperFacousChangedListener.onFliperChanged(getDisplayedChild());}@Overridepublic void showPrevious() {// TODO Auto-generated method stubsuper.showPrevious();//监听向上翻页flipperFacousChangedListener.onFliperChanged(getDisplayedChild());}@Overridepublic void onLongPress(MotionEvent e) {// TODO Auto-generated method stub}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {// TODO Auto-generated method stubreturn true;}@Overridepublic void onShowPress(MotionEvent e) {// TODO Auto-generated method stub}@Overridepublic boolean onSingleTapUp(MotionEvent e) {// TODO Auto-generated method stubreturn false;}/** 回调接口，用于监听viewflipper切花事件*/public interface FlipperFacousChangedListener{public void onFliperChanged(int index);}public void setOnFacousChangedListener(FlipperFacousChangedListener flipperFacousChangedListener){this.flipperFacousChangedListener=flipperFacousChangedListener;}}

接着是实现部分，指引条是由两张图片构成，选中项目一个颜色，未选中时一个颜色。实现比较简单，部分代码如下：

package com.mobsut.mm.foods;public class FoodRecomFragment extends Fragment {private Context mContext=null;private LinearLayout mainLayout=null;private LinearLayout indicatorLayout=null;private ImageView[] mImageView;private int[] fliperImage={R.drawable.fliper1,R.drawable.fliper2,R.drawable.fliper3};@Overridepublic void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);mContext=getActivity();}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubmainLayout=(LinearLayout)inflater.inflate(R.layout.food_recom_fragment_main,container,false);indicatorLayout=(LinearLayout)mainLayout.findViewById(R.id.food_recom_page_indicator);GestureViewFliper viewFilper=(GestureViewFliper)mainLayout.findViewById(R.id.food_recom_viewfliper);mImageView=new ImageView[fliperImage.length];for(int i=0;i<fliperImage.length;i++){ImageView iv=new ImageView(mContext);ImageView indicatorView=new ImageView(mContext);if(i==0){indicatorView.setImageResource(R.drawable.page_selected);//初始默认选中第一张为当前指引}else{indicatorView.setImageResource(R.drawable.page_normal);}iv.setImageResource(fliperImage[i]);//把指引条的图片添加到LinearLayout里面LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);lp.setMargins(6, 0, 0, 0);indicatorView.setLayoutParams(lp);iv.setScaleType(ScaleType.FIT_XY);viewFilper.addView(iv, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));mImageView[i]=indicatorView;indicatorLayout.addView(mImageView[i]);}viewFilper.setAutoStart(true); //让viewFlipper自动播放viewFilper.setFlipInterval(4000); //间隔为4Sif(viewFilper.isAutoStart()&&viewFilper.isFlipping()){viewFilper.startFlipping();}if(viewFilper.getDisplayedChild()!=0){viewFilper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.m_push_up_in)); //进出动画viewFilper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.m_push_up_out));}viewFilper.setOnFacousChangedListener(new FlipperFacousChangedListener() {@Override //实现监听接口public void onFliperChanged(int index) {// TODO Auto-generated method stubfor(int i=0;i<mImageView.length;i++){if(i==index){mImageView[i].setImageResource(R.drawable.page_selected);}else{mImageView[i].setImageResource(R.drawable.page_normal);}}}});return mainLayout;}}