自定义控件之viewPager轮播图

1.activity中

public class MainActivity extends Activity {

    private static final int VIEWPAGER_CHANGE = 0;

	private ViewPager mViewPager;
    
    private int[] imageResIds = {
			R.drawable.a,
			R.drawable.b,
			R.drawable.c,
			R.drawable.d,
			R.drawable.e,
	};

    private String[] descs = {
			"巩俐不低俗，我就不能低俗",
			"扑树又回来啦！再唱经典老歌引万人大合唱",
			"揭秘北京电影如何升级",
			"乐视网TV版大派送",
			"热血屌丝的反杀",
	};
    
    /**
     * 保存imageView数组
     */
    private ImageView[] imageViews = new ImageView[imageResIds.length];
    /**
     * 保存点的数组
     */
    private View[] dots = new View[imageResIds.length];
    
    private TextView mViewPagerText;

	private LinearLayout mLLDot;
	
	/**
	 * 保存白色的点
	 */
	private View currentDot;
	
	private int maxpager;
	
	private Handler handler = new Handler(){
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case VIEWPAGER_CHANGE:
				//切换界面
				switchpage();
				break;
			}
		};
	};
	
	/**
	 * 切换界面操作
	 * 2016-8-12 下午4:12:16
	 */
	protected void switchpage() {
		//获取当前显示的界面
		int currentItem = mViewPager.getCurrentItem();//获取当前显示的界面,返回的是界面的位置
		//1 -> 2  2 -> 3  3 -> 4 4 -> 0
		//判断当前显示的界面是否是最后一个界面,如果是切换到第0个
		//getAdapter : 获取viewpager设置的adapter
		if (currentItem == mViewPager.getAdapter().getCount()-1) {
			currentItem = 0;
		}else{
			currentItem++;
		}
		//设置显示新的界面
		mViewPager.setCurrentItem(currentItem);//设置当前显示的界面
		
		//一次完成,还要再进行第二次操作
		handler.sendEmptyMessageDelayed(VIEWPAGER_CHANGE, 2000);
		
	}
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    
	/**
     * 初始化控件
     * 2016-8-12 上午11:35:08
     */
	private void initView() {
		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		mViewPagerText = (TextView) findViewById(R.id.viewpagertext);
		mLLDot = (LinearLayout) findViewById(R.id.lldot);
		
		//将图片放到imageview中,然后将imageview放到viewpager中展示
		//根据图片的张数,创建相应个数的imageview
		for (int i = 0; i < imageResIds.length; i++) {
			//创建图片对应的imageview
			createImageView(i);
			//根据图片的张数,创建相应个数的点
			createDot(i);
		}
		//当viewpager界面切换的时候,更改显示的文本
		//设置viewpager的界面切换监听
		//当viewpager刚进入界面的时候,没有执行切换界面操作,不会执行监听
		mViewPager.setOnPageChangeListener(changeListener);
		//手动设置第一个界面显示的文本
		change(0);
		
		//设置viewpager显示最大条目数据
		maxpager = imageResIds.length * 1000 * 100;
		
		//设置刚进入界面的时候,往前滑也可以实现无限滑动,思路:将当前显示的界面定位到第25万条目位置
		int currentitem = maxpager / 2;
		
		mViewPager.setAdapter(new Myadapter());
		
		mViewPager.setCurrentItem(currentitem);//设置当前显示哪个条目,item:显示条目的位置
		
	}
	
	@Override
	protected void onStart() {
		//delayMillis : 延迟时间
		handler.sendEmptyMessageDelayed(VIEWPAGER_CHANGE, 2000);//给handler发送延迟消息
		super.onStart();
	}
	
	@Override
	protected void onStop() {
		//停止发送消息
		handler.removeMessages(VIEWPAGER_CHANGE);//停止给handler发送消息
		super.onStop();
	}
	
	/**
	 * ViewPager的界面切换监听
	 */
	private OnPageChangeListener changeListener = new OnPageChangeListener() {
		//当界面切换完成调用的方法
		//position : 切换完成条目位置
		@Override
		public void onPageSelected(int position) {
			//更改显示文本
			change(position);
		}
		//当界面切换的是调用的方法
		@Override
		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			// TODO Auto-generated method stub
			
		}
		//当切换状态改变的时候调用
		//state : viewpager的状态
		@Override
		public void onPageScrollStateChanged(int state) {
			//ViewPager.SCROLL_STATE_IDLE;//空闲的状态,停止滑动状态
			//ViewPager.SCROLL_STATE_DRAGGING;//滑动的状态
			//ViewPager.SCROLL_STATE_SETTLING;//滑动到最后一个条目的状态
			//滑动的时候,不自动滑动,停止滑动的时候,自动滑动
			if (state == ViewPager.SCROLL_STATE_IDLE) {
				handler.sendEmptyMessageDelayed(VIEWPAGER_CHANGE, 2000);
			}else{
				handler.removeMessages(VIEWPAGER_CHANGE);
			}
		}
	};

	/**
	 * 切换文本和点
	 * 2016-8-12 下午3:09:53
	 */
	protected void change(int position) {
		
		position = position % imageResIds.length;
		
		mViewPagerText.setText(descs[position]);
		
		//再次进入的时候,判断是否有白色的点,有变成黑色
		if (currentDot != null) {
			currentDot.setSelected(false);
		}
		//切换点
		dots[position].setSelected(true);//选中点
		//保存白色的点
		currentDot = dots[position];
	}
	
	
    /**
     * 创建imageView
     * 2016-8-12 下午2:47:24
     */
	private void createImageView(int i) {
		//创建了imageView,保存imageview数组中
		imageViews[i] = new ImageView(this);
		//将相应的图片设置给相应的imageview
		imageViews[i].setBackgroundResource(imageResIds[i]);
	}
	
	/**
	 * 创建点的操作
	 * 2016-8-12 下午3:18:15
	 */
	private void createDot(int i) {
		dots[i] = new View(this);
		//设置宽高
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(5, 5);
		//设置背景
		dots[i].setBackgroundResource(R.drawable.selector_dot_bg);
		//设置距离右边的距离
		params.rightMargin=5;
		//将属性设置给控件,使其生效
		dots[i].setLayoutParams(params);//给控件设置属性
		//将创建的点,放到linearlayout中显示
		mLLDot.addView(dots[i]);
	}

	private class Myadapter extends PagerAdapter{

		//获取条目的个数
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return maxpager;
		}
		//判断是否可以添加显示新的条目
		//判断界面的view对象是否和instantiateItem返回的object一致
		//在添加条目的时候,isViewFromObject判断添加的界面的view对象,是否有通过instantiateItem进行添加,如果view == object,可以添加,view != object,不可以添加显示
		@Override
		public boolean isViewFromObject(View view, Object object) {
			// TODO Auto-generated method stub
			return view == object;
		}
		//给viewpager添加条目
		//container : viewpager
		//position : 条目的位置
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			
			//5%5=0  6%5=1  7%5=2
			position = position % imageResIds.length;
			
			//根据条目获取相应的imageview
			ImageView imageView = imageViews[position];
			//添加给viewpager
			container.addView(imageView);
			//返回添加的imageView,告诉viewpager应该展示哪个条目对象,  注意:添加了哪个view对象,返回哪个view对象
			return imageView;
		}
		//当移出viewpager条目的时候调用方法
		//container : viewpager
		//position : 条目的位置
		//object : instantiateItem返回的添加过的viewpager的条目
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			//super.destroyItem(container, position, object);//抛出一个异常
			container.removeView((View) object);
		}
		
	}		
	
}

2.布局文件

<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.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        ></android.support.v4.view.ViewPager>
    <!-- layout_alignBottom : 在某个控件的底部 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#55000000"
        android:padding="8dp"
        android:gravity="center_horizontal"
        android:layout_alignBottom="@+id/viewpager"
        >
        <TextView 
            android:id="@+id/viewpagertext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试文本"
            android:textColor="#FFFFFF"
            />
        <!-- 点 -->
        <LinearLayout
            android:id="@+id/lldot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <!-- <View 
                android:layout_width="5dp"
                android:layout_height="5dp"
                android:background="#FFFFFF"
                android:layout_marginRight="5dp"
                /> -->
           
        </LinearLayout>
        
    </LinearLayout>

3.点的选择器设置selector_dot_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- state_selected : 选择的状态 -->
    <item android:state_selected="true" android:drawable="@drawable/shape_dot_selected"></item>
	<item android:drawable="@drawable/shape_dot_unselected"></item>
</selector>

4.选中的点shape_dot_selected.xml

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

5.未选中的点shape_dot_unselected.xml

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