学习日记--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>@Overrideprotected 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() {@Overridepublic void onPageSelected(int arg0) {updateRectangle();}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}

// viewpager适配器public class MypagerAdapter extends PagerAdapter {@Overridepublic int getCount() {return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(imageview.get(position % imageview.size()));}@Overridepublic 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