在activity中使用ViewFlipper实现广告自动滑页和每一页的广告的点击事件

因为在项目中要实现，几张广告滑动（如下图）实现每张图的都要监听到，以便实现相关功能，在网上找一几篇文章，下面是我实现的功能后整理出来的相关代码。

小圆点是使用的白色和橘色的小毛驴文件，代码如下

白色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#FFFFFF"/>
</shape>

橘色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">   
    <solid android:color="#FFE4C4"/>
</shape>

使用的RadioButton画了四个圆点

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/rg_radiobutton"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_first"
            android:button="@null"
            android:layout_width="10dp"
            android:layout_height="10dp" 
            android:background="@drawable/bisque_purple_bg_selector"/>

        <RadioButton
            android:id="@+id/rb_second"
            android:button="@null"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/bisque_purple_bg_selector" />

        <RadioButton
            android:id="@+id/rb_third"
            android:button="@null"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/bisque_purple_bg_selector" />

        <RadioButton
            android:id="@+id/rb_four"
            android:button="@null"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/bisque_purple_bg_selector" />
    </RadioGroup>

</LinearLayout>

接下来写一个类MyViewFlipper继承ViewFlipper自其中添加自定义的抽线函数，用于下面监听使用

package com.hit.wuxi;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ViewFlipper;

public class MyViewFlipper extends ViewFlipper{
	
	private OnFlipperListener onFlipperListener;
	
	public static interface OnFlipperListener{	
		public void onShowPrevious(MyViewFlipper flipper);
		public void onShowNext(MyViewFlipper flipper);

	}
	
	public void setOnFlipperListener(OnFlipperListener onFlipperListener){
		this.onFlipperListener = onFlipperListener;
	}

	public MyViewFlipper(Context context) {
		// TODO Auto-generated constructor stub
		super(context);
	}
	
	public MyViewFlipper(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}
	
	@Override
	public void showNext() {
		// TODO Auto-generated method stub
		super.showNext();
		if(hasFlipListener()){
			onFlipperListener.onShowNext(this);
		}
	}
	
	@Override
	public void showPrevious() {
		// TODO Auto-generated method stub
		super.showPrevious();
		onFlipperListener.onShowPrevious(this);
	}
	
	private boolean hasFlipListener(){
		return onFlipperListener != null;
	}

}

然后在页面的xml中使用刚刚自己定义的MyViewFlipper添加一个视图，和另一个小圆点的视图

 <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <com.hit.wuxi.MyViewFlipper
                        android:id="@+id/flipper"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" 
                        android:autoStart="true"
                        android:flipInterval="3000">
                    </com.hit.wuxi.MyViewFlipper>

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true" >
                    <include layout="@layout/radiogroup" />
                </RelativeLayout>

            </RelativeLayout>

然后再主函数中添加

public class MainActivity extends Activity{
/*
	 * 轮播广告flipper
	 */
	private MyViewFlipper adViewFlipper;
	
	/*
	 * 存放的广告图片Id
	 */
	private int[] adIds = { R.drawable.index_photo, R.drawable.index_photo_one,
			R.drawable.index_photo_two, R.drawable.index_photo_three };
	/*
	 * 原点的进度标志
	 */
	private RadioGroup adPointRadioGroup;
	/*
	 * 存放imageview的数组
	 */
	private ImageView[] adFlipperImageViews;
	/*
	 * 存放原点的id
	 */
	private int[] ad_point_ids = { R.id.rb_first, R.id.rb_second,
			R.id.rb_third, R.id.rb_four };
	/*
	 * 将要放入的广告数量
	 */
	private static final int AD_POINT_COUNT = 4;
@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.activity_main);
		initView(this);
		adViewFlipper.startFlipping();
	}

	protected void initView(Context context) {
		/*
		 * flipper id
		 */
		adViewFlipper = (MyViewFlipper) findViewById(R.id.flipper);
		/*
		 * 圆点
		 */
		adPointRadioGroup = (RadioGroup) findViewById(R.id.rg_radiobutton);
		adViewFlipper.setOnFlipperListener(adFlipListener);	
		addAdFlipperImageViews();
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see android.view.View.OnClickListener#onClick(android.view.View)
	 * 插入轮番广告的view
	 */
	private void addAdFlipperImageViews() {
		adFlipperImageViews = new ImageView[AD_POINT_COUNT];
		for (int i = 0; i < AD_POINT_COUNT; i++) {
			ImageView imageView = makeAdFlipperImageView();
			imageView.setImageResource(adIds[i]);
			imageView.setOnClickListener(adFlipperImageViewListener);
			adFlipperImageViews[i] = imageView;
			adViewFlipper.addView(imageView);
			Log.i("tag", "i--->"+i);
		}

	}

	/*
	 * 图片的监听
	 */
	private OnClickListener adFlipperImageViewListener = new OnClickListener() {

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			Log.i("tag", "image--->click");
			/*
			 * adViewFlipper.getDisplayedChild()获得图片的数组下标
			 */
			Toast.makeText(getApplicationContext(),//
					"您点击了第"+(adViewFlipper.getDisplayedChild()+1)+"张图片", Toast.LENGTH_SHORT)//
					.show();
		
		
		}
	};
	
	/*
	 * 轮番监听，更新锚点
	 */
	private OnFlipperListener adFlipListener  = new OnFlipperListener() {
		
		@Override
		public void onShowPrevious(MyViewFlipper flipper) {
			// TODO Auto-generated method stub
			adPointRadioGroup.check(ad_point_ids[flipper.getDisplayedChild()]);
		}
		
		@Override
		public void onShowNext(MyViewFlipper flipper) {
			// TODO Auto-generated method stub
			adPointRadioGroup.check(ad_point_ids[flipper.getDisplayedChild()]);
		}
	};

	/*
	 * 轮播广告的容器 (non-Javadoc)
	 * 
	 * @see android.view.View.OnClickListener#onClick(android.view.View)
	 */
	private ImageView makeAdFlipperImageView() {
		Log.i("tag", "--->makeAdFlipperImageView");
		ImageView i = new ImageView(this);
		i.setBackgroundColor(0xff000000);
		i.setScaleType(ImageView.ScaleType.CENTER_CROP);
		i.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
		Log.i("tag", "--->makeAdFlipperImageView-->"+i);
		return i;
	}
}

之后导入包就可以了。