ViewPager（一）：带指示图标的滑动页面的实现

ViewPager是可滑动的控件，在v4包中，在UI中使用该控件必须用全类名android.support.v4.view.ViewPager

下面实现带小圆点图标的图片页面滑动的效果，先来效果图吧：

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="350dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="20dp"
android:src="@drawable/dot"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="@drawable/dot"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="@drawable/dot"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="30dp"
android:src="@drawable/dot"/>
</LinearLayout>

以上是activity_main.xml的代码，四个ImageView就是那四个小圆点

在res中的drawable-hdpi中新建一个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/icon01"></item>
<item android:state_enabled="false" android:drawable="@drawable/icon02"></item>

</selector>
<!-- 控件状态：
android:state_selected  选中/未选中
android:state_focused   获得焦点/未获得焦点
android:state_enabled   可用/不可用-->

MainActivity.java代码：

package com.example.viewpager_demo01;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
private ViewPager viewPager;
private List<ImageView> data;  //存储ViewPager每一页显示的ImageView

private ImageView[] icons;  // 存储小圆点的集合
private int[] imgs={R.drawable.ic_01,R.drawable.ic_02,R.drawable.ic_03,R.drawable.ic_04};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

viewPager=(ViewPager)findViewById(R.id.viewpager);
data=new ArrayList<ImageView>();
for (int i = 0; i < imgs.length; i++) {
//创建ImageView对象
ImageView iView=new ImageView(this);
//使用图片的资源，给ImageView添加图片
iView.setImageResource(imgs[i]);
//ImageView存储到list集合
data.add(iView);
}
MyPagerAdapter adapter=new MyPagerAdapter();
viewPager.setAdapter(adapter);

//初始化小圆点
initDot();

//添加页面切换（滚动）的事件
viewPager.setOnPageChangeListener(new OnPageChangeListener() {

//页面选中调用该方法
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
for (int i = 0; i < icons.length; i++) {
icons[i].setEnabled(true);

}
icons[position].setEnabled(false);
}
//页面滚动调用该方法
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO Auto-generated method stub

}
//页面滚动过程中的状态
@Override
public void onPageScrollStateChanged(int state) {
// TODO Auto-generated method stub

}
});
}
//初始化指示性图标
private void initDot() {
//获得父控件->线性布局
LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
//创建存储小圆点的数组对象
icons=new ImageView[imgs.length];
//循环获得小圆点，并初始化图片
for (int i = 0; i < icons.length; i++) {
//从线性布局中获得每一个子控件
icons[i]=(ImageView) layout.getChildAt(i);
//设置状态为true，与dot.xml中的选择器相关联，并使用对应的图片加载到ImageView中
icons[i].setEnabled(true);
//每个ImageView保存当前的索引值，0、1、2、3
icons[i].setTag(i);

//设置小圆点的单击事件
icons[i].setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// 设置ViewPager当前显示的页面,获得与icon[i]相同索引的item（pager页面）
viewPager.setCurrentItem((Integer)v.getTag());

}
});
}
//设置第一个为默认选中
icons[0].setEnabled(false);
}

//创建自定义适配器
class MyPagerAdapter extends PagerAdapter{

//加载到适配器中的pager的个数（有几页）
@Override
public int getCount() {
// TODO Auto-generated method stub
return data.size();
}

//判断当前的View对象与instantiateItem方法的返回值是否一致
//(arg1就是instantiateItem的返回值)
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}

//创建一个新的Pager页面
//参数一：container  容器，指ViewPager
//参数二：position   位置，当前页的索引
@Override
public Object instantiateItem(ViewGroup container, int position) {
// 从ImageView的集合中取出一个元素添加到ViewPager中
container.addView(data.get(position));
//返回每一个页面添加的内容
return data.get(position);
}

//移除滑出屏幕的页面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(data.get(position));
}

}

}