Android-使用ViewFlipper实现轮番切换广告栏

所谓的轮番切换广告栏，指的是下面这个东西，笔主不知道该怎么确切描述这货...

笔主没有百度研究过其他大牛是怎么实现这个功能的，在这里笔主充分发挥DIY精神，利用ViewFlipper闭门土制了一个，下面尽笔主所能，将整个仿造过程所需的全部技能一次性放送出来，先上效果图！

（不保证以上广告真实性...）

素材：请自行百度图片，美女尤佳

圆点：1：  2：

ViewFlipper：

android自带的ViewFlipper类提供了定时自动轮放内置View对象的功能，基本上这个博文所需要的大部分功能其实都已经现成实现了。。

但是有一个缺陷，原生的ViewFlipper并不提供自动播放时切换回调的监听器，就是说，图片广告切换的时候，你并不知道什么时候切换的，也不知道切换到了哪一张图，笔主通过研究源代码，继承派生了一个新的 NotifiableViewFlipper ，目的就是为了提供上述回调所需的监听器，代码如下

 import android.content.Context;
 import android.util.AttributeSet;
 import android.widget.ViewFlipper;

 /**
  *
  * @author wavky.wand
  *
  */
 public class NotifiableViewFlipper extends ViewFlipper {

     private OnFlipListener onFlipListener;

     public static interface OnFlipListener {
         public void onShowPrevious(NotifiableViewFlipper flipper);

         public void onShowNext(NotifiableViewFlipper flipper);
     }

     public void setOnFlipListener(
             OnFlipListener onFlipListener) {
         this.onFlipListener = onFlipListener;
     }

     public NotifiableViewFlipper(Context context) {
         super(context);
     }

     public NotifiableViewFlipper(Context context, AttributeSet attrs) {
         super(context, attrs);
     }

     @Override
     public void showPrevious() {
         super.showPrevious();
         if(hasFlipListener()){
             onFlipListener.onShowPrevious(this);
         }
     }

     @Override
     public void showNext() {
         super.showNext();
         if(hasFlipListener()){
             onFlipListener.onShowNext(this);
         }
     }

     private boolean hasFlipListener() {
         return onFlipListener != null;
     }
 }

布局文件：

笔主使用 RadioButton组 作为标记显示播放进度的那排小圆点，关于 RadioButton 的布局参数，如果遇到问题，请先参考博文 Android中使用RadioButton代替ImageButton

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#333"
     android:orientation="vertical" >

     <wavky.wand.NotifiableViewFlipper
         android:id="@+id/viewFlipper_AD"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:animateFirstView="true"
         android:autoStart="true"
         android:flipInterval="2000"
         android:inAnimation="@anim/left_in"
         android:minHeight="100dp"
         android:outAnimation="@anim/left_out" />

     <RadioGroup
         android:id="@+id/radioGroup_flipperPoints"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignBottom="@+id/viewFlipper_AD"
         android:layout_centerHorizontal="true"
         android:layout_marginBottom="10dp"
         android:orientation="horizontal" >

         <RadioButton
             android:id="@+id/radioButton_flipperPoint0"
             style="@style/radioStyle_ADPoint"
             android:checked="true" />

         <RadioButton
             android:id="@+id/radioButton_flipperPoint1"
             style="@style/radioStyle_ADPoint" />

         <RadioButton
             android:id="@+id/radioButton_flipperPoint2"
             style="@style/radioStyle_ADPoint" />

         <RadioButton
             android:id="@+id/radioButton_flipperPoint3"
             style="@style/radioStyle_ADPoint" />

         <RadioButton
             android:id="@+id/radioButton_flipperPoint4"
             style="@style/radioStyle_ADPoint" />

         <RadioButton
             android:id="@+id/radioButton_flipperPoint5"
             style="@style/radioStyle_ADPoint" />
     </RadioGroup>

 </RelativeLayout>

RadioButton的style脚本（截取）：

     <style name="radioStyle_ADPoint">
         <item name="android:gravity">center</item>
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="android:layout_gravity">center</item>
         <item name="android:button">@null</item>
         <item name="android:background">@null</item>
         <item name="android:clickable">false</item>
         <item name="android:drawableLeft">@drawable/radio_adpoint</item>
         <item name="android:layout_marginLeft">8dp</item>
     </style>

Activity实现类：

 package wavky.wand.activity;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.ImageView;
 import android.widget.RadioGroup;
 import android.widget.Toast;

 import wavky.wand.R;
 import wavky.wand.activity.base.NotifiableViewFlipper;
 import wavky.wand.activity.base.NotifiableViewFlipper.OnFlipListener;

 /**
  *
  * @author wavky.wand
  *
  */
 public class HomeActivity extends Activity{

     // 轮番广告Flipper
     private NotifiableViewFlipper adViewFlipper;

     // Flipper内的ImageView数组，保留引用，目前没什么用
     private ImageView[] adFlipperImageViews;

     // 这里放六个具体广告图片的id
     private int[] adIds = { R.drawable.home_ad_banner,
             R.drawable.home_ad_banner, R.drawable.home_ad_banner,
             R.drawable.home_ad_banner, R.drawable.home_ad_banner,
             R.drawable.home_ad_banner };

     // 轮番广告进度锚点（小圆点）
     private RadioGroup adPointRadioGroup;

     // 六个小圆点的id
     private static final int[] AD_POINT_IDS = { R.id.radioButton_flipperPoint0,
             R.id.radioButton_flipperPoint1, R.id.radioButton_flipperPoint2,
             R.id.radioButton_flipperPoint3, R.id.radioButton_flipperPoint4,
             R.id.radioButton_flipperPoint5 };

     // 广告数量
     private static final int AD_FLIPPER_COUNT = AD_POINT_IDS.length;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_home);
         adViewFlipper = (NotifiableViewFlipper) findViewById(R.id.viewFlipper_AD);
         adPointRadioGroup = (RadioGroup) findViewById(R.id.radioGroup_flipperPoints);
         adViewFlipper.setOnFlipListener(adFlipListener);
         addAdFlipperImageViews();
     }

     /**
      * 初始化插入轮番广告
      */
     private void addAdFlipperImageViews() {
         adFlipperImageViews = new ImageView[AD_FLIPPER_COUNT];
         for (int i = 0; i < AD_FLIPPER_COUNT; i++) {
             ImageView imageView = makeAdFlipperImageView();
             imageView.setImageResource(adIds[i]);
             imageView.setOnClickListener(adFlipperImageViewListener);
             adFlipperImageViews[i] = imageView;
             adViewFlipper.addView(imageView);
         }
     }

     /**
      * 工厂生产轮番广告容器ImageView对象
      * @return
      */
     private ImageView makeAdFlipperImageView() {
         ImageView i = new ImageView(this);
         i.setBackgroundColor(0xFF000000);
         i.setScaleType(ImageView.ScaleType.FIT_CENTER);
         i.setLayoutParams(new NotifiableViewFlipper.LayoutParams(
                 NotifiableViewFlipper.LayoutParams.MATCH_PARENT,
                 NotifiableViewFlipper.LayoutParams.MATCH_PARENT));
         return i;
     }

     /**
      * 每个广告的点击事件监听器
      */
     private OnClickListener adFlipperImageViewListener = new OnClickListener() {

         @Override
         public void onClick(View v) {
             Toast.makeText(HomeActivity.this, "广告 " + adViewFlipper.getDisplayedChild(), Toast.LENGTH_SHORT).show();
         }
     };

     /**
      * 轮番广告切换监听器，更新进度标记锚点的显示
      */
     private OnFlipListener adFlipListener = new OnFlipListener() {

         @Override
         public void onShowPrevious(NotifiableViewFlipper flipper) {
             adPointRadioGroup.check(AD_POINT_IDS[flipper.getDisplayedChild()]);
         }

         @Override
         public void onShowNext(NotifiableViewFlipper flipper) {
             adPointRadioGroup.check(AD_POINT_IDS[flipper.getDisplayedChild()]);
         }
     };
 }

上述代码或存在引用包缺少、错误，缺少package指向，style文件头不完整等小问题，包括监听器具体功能的实现，请各位批判性自行调整修改。

完毕。