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

浏览数：29 / 时间：2015年06月11日

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

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

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

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

圆点：1： 2：

ViewFlipper：

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

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

 1 import android.content.Context;
 2 import android.util.AttributeSet;
 3 import android.widget.ViewFlipper;
 4 
 5 /**
 6  * 
 7  * @author wavky.wand
 8  * 
 9  */
10 public class NotifiableViewFlipper extends ViewFlipper {
11 
12     private OnFlipListener onFlipListener;
13 
14     public static interface OnFlipListener {
15         public void onShowPrevious(NotifiableViewFlipper flipper);
16 
17         public void onShowNext(NotifiableViewFlipper flipper);
18     }
19 
20     public void setOnFlipListener(
21             OnFlipListener onFlipListener) {
22         this.onFlipListener = onFlipListener;
23     }
24 
25     public NotifiableViewFlipper(Context context) {
26         super(context);
27     }
28 
29     public NotifiableViewFlipper(Context context, AttributeSet attrs) {
30         super(context, attrs);
31     }
32 
33     @Override
34     public void showPrevious() {
35         super.showPrevious();
36         if(hasFlipListener()){
37             onFlipListener.onShowPrevious(this);
38         }
39     }
40 
41     @Override
42     public void showNext() {
43         super.showNext();
44         if(hasFlipListener()){
45             onFlipListener.onShowNext(this);
46         }
47     }
48 
49     private boolean hasFlipListener() {
50         return onFlipListener != null;
51     }
52 }

布局文件：

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

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="#333"
 6     android:orientation="vertical" >
 7 
 8     <wavky.wand.NotifiableViewFlipper
 9         android:id="@+id/viewFlipper_AD"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12         android:layout_alignParentLeft="true"
13         android:layout_alignParentTop="true"
14         android:animateFirstView="true"
15         android:autoStart="true"
16         android:flipInterval="2000"
17         android:inAnimation="@anim/left_in"
18         android:minHeight="100dp"
19         android:outAnimation="@anim/left_out" />
20 
21     <RadioGroup
22         android:id="@+id/radioGroup_flipperPoints"
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:layout_alignBottom="@+id/viewFlipper_AD"
26         android:layout_centerHorizontal="true"
27         android:layout_marginBottom="10dp"
28         android:orientation="horizontal" >
29 
30         <RadioButton
31             android:id="@+id/radioButton_flipperPoint0"
32             style="@style/radioStyle_ADPoint"
33             android:checked="true" />
34 
35         <RadioButton
36             android:id="@+id/radioButton_flipperPoint1"
37             style="@style/radioStyle_ADPoint" />
38 
39         <RadioButton
40             android:id="@+id/radioButton_flipperPoint2"
41             style="@style/radioStyle_ADPoint" />
42 
43         <RadioButton
44             android:id="@+id/radioButton_flipperPoint3"
45             style="@style/radioStyle_ADPoint" />
46 
47         <RadioButton
48             android:id="@+id/radioButton_flipperPoint4"
49             style="@style/radioStyle_ADPoint" />
50 
51         <RadioButton
52             android:id="@+id/radioButton_flipperPoint5"
53             style="@style/radioStyle_ADPoint" />
54     </RadioGroup>
55 
56 </RelativeLayout>

RadioButton的style脚本（截取）：

 1     <style name="radioStyle_ADPoint">
 2         <item name="android:gravity">center</item>
 3         <item name="android:layout_width">wrap_content</item>
 4         <item name="android:layout_height">wrap_content</item>
 5         <item name="android:layout_gravity">center</item>
 6         <item name="android:button">@null</item>
 7         <item name="android:background">@null</item>
 8         <item name="android:clickable">false</item>
 9         <item name="android:drawableLeft">@drawable/radio_adpoint</item>
10         <item name="android:layout_marginLeft">8dp</item>
11     </style>

Activity实现类：

  1 package wavky.wand.activity;
  2 
  3 import android.app.Activity;
  4 import android.os.Bundle;
  5 import android.view.View;
  6 import android.view.View.OnClickListener;
  7 import android.widget.ImageView;
  8 import android.widget.RadioGroup;
  9 import android.widget.Toast;
 10 
 11 import wavky.wand.R;
 12 import wavky.wand.activity.base.NotifiableViewFlipper;
 13 import wavky.wand.activity.base.NotifiableViewFlipper.OnFlipListener;
 14 
 15 /**
 16  * 
 17  * @author wavky.wand
 18  * 
 19  */
 20 public class HomeActivity extends Activity{
 21 
 22     // 轮番广告Flipper
 23     private NotifiableViewFlipper adViewFlipper;
 24     
 25     // Flipper内的ImageView数组，保留引用，目前没什么用
 26     private ImageView[] adFlipperImageViews;
 27     
 28     // 这里放六个具体广告图片的id
 29     private int[] adIds = { R.drawable.home_ad_banner,
 30             R.drawable.home_ad_banner, R.drawable.home_ad_banner,
 31             R.drawable.home_ad_banner, R.drawable.home_ad_banner,
 32             R.drawable.home_ad_banner };
 33     
 34     // 轮番广告进度锚点（小圆点）
 35     private RadioGroup adPointRadioGroup;
 36     
 37     // 六个小圆点的id
 38     private static final int[] AD_POINT_IDS = { R.id.radioButton_flipperPoint0,
 39             R.id.radioButton_flipperPoint1, R.id.radioButton_flipperPoint2,
 40             R.id.radioButton_flipperPoint3, R.id.radioButton_flipperPoint4,
 41             R.id.radioButton_flipperPoint5 };
 42     
 43     // 广告数量
 44     private static final int AD_FLIPPER_COUNT = AD_POINT_IDS.length;
 45 
 46     @Override
 47     protected void onCreate(Bundle savedInstanceState) {
 48         super.onCreate(savedInstanceState);
 49         setContentView(R.layout.activity_home);
 50         adViewFlipper = (NotifiableViewFlipper) findViewById(R.id.viewFlipper_AD);
 51         adPointRadioGroup = (RadioGroup) findViewById(R.id.radioGroup_flipperPoints);
 52         adViewFlipper.setOnFlipListener(adFlipListener);
 53         addAdFlipperImageViews();
 54     }
 55 
 56     /**
 57      * 初始化插入轮番广告
 58      */
 59     private void addAdFlipperImageViews() {
 60         adFlipperImageViews = new ImageView[AD_FLIPPER_COUNT];
 61         for (int i = 0; i < AD_FLIPPER_COUNT; i++) {
 62             ImageView imageView = makeAdFlipperImageView();
 63             imageView.setImageResource(adIds[i]);
 64             imageView.setOnClickListener(adFlipperImageViewListener);
 65             adFlipperImageViews[i] = imageView;
 66             adViewFlipper.addView(imageView);
 67         }
 68     }
 69 
 70     /**
 71      * 工厂生产轮番广告容器ImageView对象
 72      * @return
 73      */
 74     private ImageView makeAdFlipperImageView() {
 75         ImageView i = new ImageView(this);
 76         i.setBackgroundColor(0xFF000000);
 77         i.setScaleType(ImageView.ScaleType.FIT_CENTER);
 78         i.setLayoutParams(new NotifiableViewFlipper.LayoutParams(
 79                 NotifiableViewFlipper.LayoutParams.MATCH_PARENT,
 80                 NotifiableViewFlipper.LayoutParams.MATCH_PARENT));
 81         return i;
 82     }
 83 
 84     /**
 85      * 每个广告的点击事件监听器
 86      */
 87     private OnClickListener adFlipperImageViewListener = new OnClickListener() {
 88         
 89         @Override
 90         public void onClick(View v) {
 91             Toast.makeText(HomeActivity.this, "广告 " + adViewFlipper.getDisplayedChild(), Toast.LENGTH_SHORT).show();
 92         }
 93     };
 94     
 95     /**
 96      * 轮番广告切换监听器，更新进度标记锚点的显示
 97      */
 98     private OnFlipListener adFlipListener = new OnFlipListener() {
 99 
100         @Override
101         public void onShowPrevious(NotifiableViewFlipper flipper) {
102             adPointRadioGroup.check(AD_POINT_IDS[flipper.getDisplayedChild()]);
103         }
104 
105         @Override
106         public void onShowNext(NotifiableViewFlipper flipper) {
107             adPointRadioGroup.check(AD_POINT_IDS[flipper.getDisplayedChild()]);
108         }
109     };
110 }