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文件头不完整等小问题,包括监听器具体功能的实现,请各位批判性自行调整修改。
完毕。