Android-使用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()]);
        }
    };
}

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

完毕