前几天看到淘宝和易迅的客户端的广告栏做的不错，今天就尝试了一下，模仿着写了带指引的ViewFlipper。本文主要介绍指引栏的实现，论坛上关于ViewFlipper的使用和介绍很多，就不过多介绍。
效果图如下：
首先是布局，稍有Android开发经验的人很容易看出来，这是一个Layout里面嵌套了ViewFliper和一个LinearLayout。布局如下：
[html]view plain copy <RelativeLayout android:id="@+id/food_recom_viewfliper_rl" android:layout_width="fill_parent" android:longClickable="true" android:layout_height="150dp"> <com.mobsut.mm.widget.GestureViewFliper android:id="@+id/food_recom_viewfliper" android:layout_height="150dp" android:background="@color/white" android:layout_width="fill_parent"/> <LinearLayout android: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源码如下：
[java]view plain copy packagecom.mobsut.mm.widget; importandroid.content.Context; importandroid.util.AttributeSet; importandroid.view.GestureDetector; importandroid.view.View; importandroid.view.GestureDetector.OnGestureListener; importandroid.view.MotionEvent; importandroid.view.animation.AnimationUtils; importandroid.widget.ViewFlipper; /* *自定义的ViewFliper，监听滑动手势,以及自动指引 *@authorjiakang */ importcom.mobsut.mm.R; publicclassGestureViewFliperextendsViewFlipperimplementsOnGestureListener{ GestureDetectorgestureDetector=null; privateContextmContext=null; FlipperFacousChangedListenerflipperFacousChangedListener=null; publicGestureViewFliper(ContextmContext){ super(mContext); } publicGestureViewFliper(ContextmContext,AttributeSetattrs){ super(mContext,attrs); this.mContext=mContext; gestureDetector=newGestureDetector(mContext,this); setLongClickable(true); setOnTouchListener(newOnTouchListener(){ @Override publicbooleanonTouch(Viewv,MotionEventevent){ //TODOAuto-generatedmethodstub returngestureDetector.onTouchEvent(event); } }); } @Override publicvoidstartFlipping(){ //TODOAuto-generatedmethodstub super.startFlipping(); setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.m_push_up_in)); setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.m_push_up_out)); } @Override publicbooleanonTouchEvent(MotionEventevent){ //TODOAuto-generatedmethodstub stopFlipping();//用户点击屏幕时，停止滑动 setAutoStart(false);//取消自动滑动 returnthis.gestureDetector.onTouchEvent(event);//把touch事件交给gesture处理 } @Override publicbooleanonDown(MotionEvente){ //TODOAuto-generatedmethodstub <spanstyle="color:#ff0000;">returntrue;</span>//缺省值是false,在onTouchEvent后触发，如果为false，onFling将得不到down的事件即不触发 } /* *重写了onFling，为了判断手势，让手势滑动 * *@seeandroid.view.GestureDetector.OnGestureListener#onFling(android.view. *MotionEvent,android.view.MotionEvent,float,float) */ @Override publicbooleanonFling(MotionEvente1,MotionEvente2,floatvelocityX, floatvelocityY){ //TODOAuto-generatedmethodstub if(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(); returntrue; }elseif(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(); returntrue; } returnfalse; } @Override publicvoidshowNext(){ //TODOAuto-generatedmethodstub super.showNext(); //监听向下向下翻页 <spanstyle="color:#ff0000;">flipperFacousChangedListener.onFliperChanged(getDisplayedChild());</span> } @Override publicvoidshowPrevious(){ //TODOAuto-generatedmethodstub super.showPrevious(); //监听向上翻页 <spanstyle="color:#ff0000;">flipperFacousChangedListener.onFliperChanged(getDisplayedChild());</span> } @Override publicvoidonLongPress(MotionEvente){ //TODOAuto-generatedmethodstub } @Override publicbooleanonScroll(MotionEvente1,MotionEvente2,floatdistanceX, floatdistanceY){ //TODOAuto-generatedmethodstub returntrue; } @Override publicvoidonShowPress(MotionEvente){ //TODOAuto-generatedmethodstub } @Override publicbooleanonSingleTapUp(MotionEvente){ //TODOAuto-generatedmethodstub returnfalse; } /* *回调接口，用于监听viewflipper切花事件 */ publicinterfaceFlipperFacousChangedListener{ publicvoidonFliperChanged(intindex); } publicvoidsetOnFacousChangedListener(FlipperFacousChangedListenerflipperFacousChangedListener){ this.flipperFacousChangedListener=flipperFacousChangedListener; } }
接着是实现部分，指引条是由两张图片构成，选中项目一个颜色，未选中时一个颜色。实现比较简单，部分代码如下：
[java]view plain copy packagecom.mobsut.mm.foods; publicclassFoodRecomFragmentextendsFragment{ privateContextmContext=null; privateLinearLayoutmainLayout=null; privateLinearLayoutindicatorLayout=null; privateImageView[]mImageView; privateint[]fliperImage={R.drawable.fliper1,R.drawable.fliper2,R.drawable.fliper3}; @Override publicvoidonCreate(BundlesavedInstanceState){ //TODOAuto-generatedmethodstub super.onCreate(savedInstanceState); mContext=getActivity(); } @Override publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer, BundlesavedInstanceState){ //TODOAuto-generatedmethodstub mainLayout=(LinearLayout)inflater.inflate(R.layout.food_recom_fragment_main,container,false); indicatorLayout=(LinearLayout)mainLayout.findViewById(R.id.food_recom_page_indicator); GestureViewFliperviewFilper=(GestureViewFliper)mainLayout.findViewById(R.id.food_recom_viewfliper); mImageView=newImageView[fliperImage.length]; for(inti=0;i<fliperImage.length;i++){ ImageViewiv=newImageView(mContext); ImageViewindicatorView=newImageView(mContext); if(i==0){ indicatorView.setImageResource(R.drawable.page_selected);//初始默认选中第一张为当前指引 }else{ indicatorView.setImageResource(R.drawable.page_normal); } iv.setImageResource(fliperImage[i]); //把指引条的图片添加到LinearLayout里面 LinearLayout.LayoutParamslp=newLinearLayout.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,newLayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); mImageView[i]=indicatorView; indicatorLayout.addView(mImageView[i]); } viewFilper.setAutoStart(true);//让viewFlipper自动播放 viewFilper.setFlipInterval(4000);//间隔为4S if(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(newFlipperFacousChangedListener(){ @Override//实现监听接口 publicvoidonFliperChanged(intindex){ //TODOAuto-generatedmethodstub for(inti=0;i<mImageView.length;i++){ if(i==index){ mImageView[i].setImageResource(R.drawable.page_selected); }else{ mImageView[i].setImageResource(R.drawable.page_normal); } } } }); returnmainLayout; } }
