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

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

 

笔主没有百度研究过其他大牛是怎么实现这个功能的，在这里笔主充分发挥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 }

 

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

完毕。