学习日记--ViewPager实现图片自动切换

本人最近在学习android，因为怕忘记，所以写博客主要来记录自己的学习进程。

不废话直接进入主题

布局文件：

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

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginTop="150dp"
        android:alpha="0.4"
        android:background="#CCC" />

    <LinearLayout
        android:id="@+id/rectangle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:layout_marginTop="165dp"
        android:orientation="horizontal" />

</RelativeLayout>

注意：由于使用的是RelativeLayout布局，所以TextView控件一定要在<android.support.v4.view.ViewPager>之后，不让会被遮盖掉。

drawable目录

rectangle_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_enabled="true" android:drawable="@drawable/rectangle_focus"></item>
    <item android:state_enabled="false" android:drawable="@drawable/rectangle_unfocus"></item>

</selector>

rectangle_focus.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    
    <solid android:color="@android:color/holo_red_light"/>
    
    <stroke android:width="0dp"/>

</shape>

注意：由于@android:color/holo_red_light所能用的最低sdk版本是14，

所以在AndroidManifest.xml将最低sdk版本改成14就行。

rectangle_unfocus.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    
    <solid android:color="@android:color/white"/>
    
    <stroke android:width="0dp"/>

</shape>

接下来就是主方法里的内容了

public class MainActivity extends Activity {

	private ViewPager viewpager;
	private List<ImageView> imageview;
	private LinearLayout rectangle;//图片下方的指示器
	private int drawable[];// 图片ID数组
	
	//自动切换
	private Handler handler=new Handler(){
		public void handleMessage(android.os.Message msg) {
			viewpager.setCurrentItem(viewpager.getCurrentItem()+1);
			handler.sendEmptyMessageDelayed(0, 3000);
		};
	};

     这里使用Handler+message机制，使图片3秒一次切换。

       

<span style="white-space:pre">	</span>@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		initViews();
		setListener();
		updateRectangle();
		handler.sendEmptyMessageDelayed(0, 3000);
	}

     这里就不详细说明。

initViews()方法

<span style="white-space:pre">	</span>private void initViews() {
		viewpager = (ViewPager) findViewById(R.id.viewpager);
		rectangle = (LinearLayout) findViewById(R.id.rectangle);
		imageview = new ArrayList<ImageView>();

		// 将4张图片放到一个数组里
		drawable = new int[] { R.drawable.spring, R.drawable.summer,
				R.drawable.autumn, R.drawable.winter };
		//初始化图片资源
		for (int i = 0; i < drawable.length; i++) {
			ImageView image = new ImageView(this);
			//image.setImageDrawable(getResources().getDrawable(drawable[i]));//这个也可以获取图片资源
			image.setImageResource(drawable[i]);// 获取图片资源
			image.setScaleType(ScaleType.FIT_XY);// 使图片填充满整个控件
			imageview.add(image);
		}

		//指示器
		for (int i = 0; i < imageview.size(); i++) {
			View view = new View(this);
			LayoutParams params = new LayoutParams(15, 5);
			if (i != 0) {
				params.leftMargin = 10;
			}
			view.setLayoutParams(params);
			view.setBackgroundResource(R.drawable.rectangle_selector);
			rectangle.addView(view);
		}

		viewpager.setAdapter(new MypagerAdapter());
	}

        在初始化图片之前，将图片的资源ID放入到一个数组中，再在for循环中获取图片资源，这里可以用setImageDrawable()，也可以使用setImageResource()，前者接受的drawable类型的值，后者接受的是int类型的值；最后将图片添加到imageview图片集合中。

注意：由于我们并不清楚图片的长宽，所以用setScaleType(ScaleType.FIT_XY)将其填充满整个控件。

至于图片下边那些小长方形，即指示器。初始化一个View通过LayoutParams传递进LinearLayout中，

而if语句是为了让右边的小长方形离左边的距离有10dp，而第一个小长方形并不需要。

监听图片切换。

//监听页面变换
	private void setListener() {
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				updateRectangle();
			}

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

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});

	}

// viewpager适配器
	public class MypagerAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return Integer.MAX_VALUE;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(imageview.get(position % imageview.size()));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(imageview.get(position % imageview.size()));
			return imageview.get(position % imageview.size());
		}
	}

viewpager适配器，这里可以看 ViewPager 详解这篇文章。

	private void updateRectangle() {
		int current = viewpager.getCurrentItem() % imageview.size();
		for (int i = 0; i < rectangle.getChildCount(); i++) {
			// 设置setEnabled为true的话 在选择器里面就会对应的使用红色颜色
			rectangle.getChildAt(i).setEnabled(i == current);
		}
	}

这里通过比较当前的图片的索引号，如果为true，则变为红色，否则为白色。

结语：文章写得不是很好，希望大家多多包容

源码下载

http://download.csdn.net/detail/qq_30428029/9482563