所谓的轮番切换广告栏,指的是下面这个东西,笔主不知道该怎么确切描述这货...
素材:请自行百度图片,美女尤佳
圆点: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实现类:
扫描二维码关注公众号,回复:
203926 查看本文章
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()]); } }; }
push_left_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="300" android:fromXDelta="100.0%p" android:toXDelta="0.0" /> <alpha android:duration="300" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>
push_left_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="300" android:fromXDelta="0.0" android:toXDelta="-100.0%p" /> <alpha android:duration="300" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set>
radio_adpoint.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/icon_view_s" android:state_enabled="true"></item> <item android:drawable="@mipmap/icon_view_n" android:state_enabled="false"></item> </selector>
上述代码或存在引用包缺少、错误,缺少package指向,style文件头不完整等小问题,包括监听器具体功能的实现,请各位批判性自行调整修改。
完毕