首页 > 代码库 > Viewpager(上)--广告自动轮播

Viewpager(上)--广告自动轮播

本例子是通过ViewPager来实现广告自动轮播,并且实现小圆点的显示和点击监听等功能,算是比较实用的功能了.

此例子可自动播放、滑动和位置的随意调整,比较灵活,原项目中是添加了三级缓存的,不过想之后单写一个缓存的就先拿图片做了个DEMO.

如有什么好的建议,请大家提出来,共同进步..

效果图:



代码结构:主要就是3个文件,主类、viewpager适配器、页面的xml布局

原理网上有很多,所以直接在代码上写比较详细的注释,就不多说了- -

主类

<span style="font-size:14px;">package com.example.viewpagerimage;

import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.annotation.SuppressLint;
import android.app.Activity;

public class MainActivity extends Activity {

	/*存储轮播图片*/
	public int[] myBanner = {R.drawable.banner3,R.drawable.banner2,R.drawable.banner1};
	/*轮播容器viewpager*/
	public ViewPager mViewPager;
	/*viewpager的适配器*/
	public ViewPagerAdapter mViewPagerAdapter;
	/*存放图片资源*/
	public ArrayList<ImageView> mImageList;
	/*存储广告轮播小圆点*/
	public ImageView IVdicator[];
	/*轮播小圆点对象*/
	public View Vdicator;
	/*布小圆点的布局参数*/
	public LinearLayout.LayoutParams mLayoutParams;
	/*定时器*/
	public Timer mTimer; 
	public TimerTask mTimerTask;
	public int mTimerNum = 0;
	
	public final int PICTURE = 0x1;
	
	@SuppressLint("HandlerLeak")
	Handler mHandler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			
			switch(msg.what){
			case PICTURE:
					setmyPagerIndex();
				break;
			}
			super.handleMessage(msg);
		}
	};
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    	// 获取屏幕高的5分之2
		@SuppressWarnings("deprecation")
		int screenHeight = this.getWindowManager().getDefaultDisplay().getHeight()/5*2; 
		
		//设置viewpager的位置
		RelativeLayout layout = (RelativeLayout)this.findViewById(R.id.id_main_layout0);
		RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) layout.getLayoutParams();
		params.height = screenHeight;
		layout.setLayoutParams(params);
		
        init();
    }
    
    /**
     * 初始化组建
     * */
    public void init(){
    	
    	mImageList = new ArrayList<ImageView>();
    	IVdicator = new ImageView[myBanner.length];
    	
    	mLayoutParams = new LinearLayout.LayoutParams(10, 10);
		
		//设置小圆点边框距离
		mLayoutParams.setMargins(7, 10, 7, 10);
		
		//小圆点对象
    	Vdicator = this.findViewById(R.id.viewpager_indicator);
    	
    	//设置有多少个轮播图和小圆点
    	for(int i = 0; i < myBanner.length; i++){
    		
    		ImageView nowImageView = new ImageView(this);
    		
    		nowImageView.setImageResource(myBanner[i]);
    		
    		mImageList.add(nowImageView);
    		
    		nowImageView = new ImageView(this);
    		
    		nowImageView.setLayoutParams(mLayoutParams);
    		
    		nowImageView.setBackgroundResource(R.drawable.indicator);
    		
    		IVdicator[i] = nowImageView;
    		
    		//一个一个添加小圆点
    		((ViewGroup) Vdicator).addView(IVdicator[i]);
    	}
    	
    	mViewPager = (ViewPager)this.findViewById(R.id.viewpager);
    	
    	mViewPagerAdapter = new ViewPagerAdapter(mImageList,this);
    	
    	//给viewpager添加适配器
    	mViewPager.setAdapter(mViewPagerAdapter);
    	
    	//给viewpager添加滑动监听
    	mViewPager.setOnPageChangeListener(new OnPageChangeListener(){
			@Override
			public void onPageScrollStateChanged(int arg0) {}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {}

			@Override
			public void onPageSelected(int arg0) {
				setDicator(arg0);
			}
    	});
    	
    	//默认第一个小圆点亮
    	setDicator(0);
    	
    	startTimer();
    }
    
    /**
     * 开启广告自动轮播
     * */
    public void startTimer(){
    	
    	mTimer = new Timer();
    	mTimerTask = new TimerTask(){
			@Override
			public void run() {
				
				mTimerNum++;
				//需异步调用
				mHandler.sendEmptyMessage(PICTURE);
			}
    	};
    	
    	//设置4秒轮播一次
    	mTimer.schedule(mTimerTask, 4 * 1000, 4 * 1000);
    }
    
	/**
	 * 切换广告动画
	 * */
	public void setmyPagerIndex() {
		
		try{
			if (mTimerNum >= myBanner.length) {
				mTimerNum = 0;
			}
			mViewPager.setCurrentItem(mTimerNum, true);
		}catch(Exception e){
			e.printStackTrace();
		}
	}
    
    /**
     * 设置小圆点的背景
     * */
    public void setDicator(int j){
    	
    	//设置有多少个轮播图和小圆点
    	for(int i = 0; i < myBanner.length; i++){
    		
    		if(i == j){
				
				IVdicator[i].setBackgroundResource(R.drawable.indicator_focused);
			}else{
				
				IVdicator[i].setBackgroundResource(R.drawable.indicator);
			}
    	}
    }
    
	/**
	 * 停止定时任务
	 * */
	public void stopTask(){
		try{
			mTimer.cancel();
		}catch(Exception e){
			e.printStackTrace();
		}
	}

}
</span>


ViewPager适配器

<span style="font-size:14px;">package com.example.viewpagerimage;

import java.util.ArrayList;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewPagerAdapter extends PagerAdapter{

	public ArrayList<ImageView> mImageView;
	public Activity mActivity;
	
	public ViewPagerAdapter(ArrayList<ImageView> mImageView ,Activity mActivity){
		
		this.mImageView = mImageView;
		this.mActivity = mActivity;
	}
	
	@Override
	public int getCount() {
		return mImageView.size();
	}

	/**
	 * 判断两张图片是否一致 
	 */
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}

	/**
	 * 向适配器返回要显示的图片
	 * */
	@Override
	public Object instantiateItem(ViewGroup container, int position) {

		container.addView(mImageView.get(position));
		
		//广告轮播图点击动作的监听
		View mView = mImageView.get(position);
		mView.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View arg0) {
				;
			}
		});
		return mImageView.get(position);
	}

	/**
	 * 从ViewGroup中移除当前view
	 * */
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		
		container.removeView(mImageView.get(position));
	}

}
</span>

例子唯一一个xml文件

<span style="font-size:14px;"><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="#000"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/id_main_layout0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:id="@+id/viewpager_indicator"
            android:layout_width="100dip"
            android:layout_height="20dip"
            android:layout_alignBottom="@id/viewpager"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="12dip"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout></span>