Android ViewPager使用方法+ViewPager循环滑动

新手学习android的知识总结

ViewPager是手机上最常见的效果，它能给用户带来很好的体验

ViewPager的使用：

①基于xml文件的ViewPager：

（1）主xml文件中的代码如下（这里命名为guide） 把这个东西当做一个控件就好了：

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#00000000" >
</android.support.v4.view.ViewPager>

（2）测试xml文件：主要是用来测试ViewPager的效果，随便建几个xml文件然后设置上背景做测试就可以了。例如编写one.xml,two.xml,three.xml，分别以不同图片做背景就可以了。

（3）编写一个java类做ViewPager的适配器，将这个类命名为：ViewPagerAdapter，让它继承*PagerAdapter,代码如下：*

public class ViewPagerAdapter extends PagerAdapter {
/*适配器，实现侧滑效果需要通过调用这个类中的方法实现*/
private List<View> views;
private Context context;

public ViewPagerAdapter(List<View> views, Context context) {
this.views = views;
this.context = context;
}//默认方法，调用此方法后，即默认调用以下方法

public void destroyItem(View container, int position, Object object)         {
((ViewPager) container).removeView(views.get(position));

}

public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}

public int getCount() {
return views.size();
}

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

（4）编写一个主类，这里将这个类命名为：Guide，这个类做ViewPager的操作。

public class Guide extends Activity {
private ViewPager vp;
private ViewPagerAdapter vpAdapter;
private List<View> views;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
initViews();
}

private void initViews() {
LayoutInflater inflater = LayoutInflater.from(this);
views = new ArrayList<View>();
views.add(inflater.inflate(R.layout.two, null));
views.add(inflater.inflate(R.layout.one, null));
views.add(inflater.inflate(R.layout.three, null));
/*这里注意要与前面的测试xml相对应*/
vpAdapter = new ViewPagerAdapter(views, this);
/*其实重点就是Views，这里是把xml文件添加到Views中的*/
vp = (ViewPager) findViewById(R.id.viewpager);
/*找到xml中滑动的局域*/
vp.setAdapter(vpAdapter);
/*绑定适配器*/
}
}

然后就可以实现简单的滑动效果了。

这里先只介绍一种方法，还有一种是可以脱离xml文件实现的，敬请期待。

这里我接着写吧，其实实质的东西都差不多。

②不使用xml文件的ViewPager：

可以想一下不用xml文件，那还有什么可以改变样子的方式呢？还是要归结到View上，我常用的就是用Canvas画布工具来画图，这里不做重点讲，如果以后有时间我再详细说一下Canvas。

先贴上代码：

public class Zhexian extends View {
Paint paint = new Paint();
Path path = new Path();

public zhexian(Context context) {
super(context);
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setStyle(Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
path.moveTo(0.0);
path.lineTo(10,10);
canvas.drawPath(path, paint);
}

}

执行这个代码后会画出一条直线。

然后继续我们的ViewPager，上面所说的（1）（3）相同，（2）可以去掉。重点是（4），为了方便理解，我重写（4）中的代码：

public class Guide extends Activity {
private ViewPager vp;
private ViewPagerAdapter vpAdapter;
private List<View> views;
private Zhexian zhexian01;/*不同之处*/
private Zhexian zhexian02;/*不同之处*/
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
zhexian01=new Zhexian(this);/*不同之处*/
zhexian02=new Zhexian(this);/*不同之处*/
initViews();
}

private void initViews() {

views = new ArrayList<View>();
views.add(zhexian01);/*不同之处*/
views.add(zhexian02);/*不同之处*/

vpAdapter = new ViewPagerAdapter(views, this);
/*其实重点就是Views，这里是把xml文件添加到Views中的*/
vp = (ViewPager) findViewById(R.id.viewpager);
/*找到xml中滑动的区域*/
vp.setAdapter(vpAdapter);
/*绑定适配器*/
}
}

然后就完成了，当然这个文章还没完成，还待完善。滑动的东西下方会有几个小圆点，来判断滑动到哪一个页面，我会在以后的代码中添加的。

如果有人想进一步了解Canvas的话，在评论上留言，Canvas的东西太多，不好概括。

接下来我说一下如何给ViewPager的下面添加小圆点，俗称”导航点“，贴图解释一下：

上图红色框中的就是接下来要说到的导航点，随着滑动而变化。

注意，以下代码是在上述“①基于xml文件的ViewPager”的代码的基础上增加代码

①在guide.xml中添加代码（图片的话，我是用画图工具画了一个黑点和一个白点，黑点表示被选中，白色表示未选中。可以根据自己的需要改就行）：

<LinearLayout
android:id="@+id/ll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >

<ImageView
android:id="@+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/login_point_selected" />

<ImageView
android:id="@+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/login_point"
/>

<ImageView
android:id="@+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/login_point"
/>
</LinearLayout>

显示效果为：

② Guide.java：

public class Guide extends Activity implements OnPageChangeListener {
/*别忘了要实现OnPageChangeListener*/
private ViewPager vp;
private ViewPagerAdapter vpAdapter;
private List<View> views;
private ImageView[] dots;
/*设置变量获取导航点的ImageView*/
private int[] ids = { R.id.iv1, R.id.iv2, R.id.iv3 };
/*找三个导航点的id*/
ListView listView1, listView2;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);

initViews();

initDots();

}

private void initViews() {
views = new ArrayList<View>();

LayoutInflater inflater = LayoutInflater.from(this);
views.add(inflater.inflate(R.layout.two, null));
views.add(inflater.inflate(R.layout.one, null));
views.add(inflater.inflate(R.layout.three, null));

vpAdapter = new ViewPagerAdapter(views, this);
vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(vpAdapter);
vp.setOnPageChangeListener(this);
/*绑定监听*/
}

/*初始化点，获取导航点的ImageView对象*/
private void initDots() {
dots = new ImageView[views.size()];
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) findViewById(ids[i]);
}
}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

/*看方法名就知道了，当Page被选中的时候，发生的事件*/
@Override
public void onPageSelected(int arg0) {
/*arg0表示选中了第几个Page，然后根据arg0选择哪些点显示选中的图片，哪些点显示不选中的图片*/
for (int i = 0; i < views.size(); i++) {
if (arg0 == i) {

dots[i].setBackgroundResource(R.drawable.login_point_selected);
} else {
dots[i].setBackgroundResource(R.drawable.login_point);
}
}
}
}

实现ViewPager的循环滑动：

只需要改Guide.java：

public class Guide extends Activity implements OnPageChangeListener {
/*别忘了要实现OnPageChangeListener*/
private ViewPager vp;
private ViewPagerAdapter vpAdapter;
private List<View> views;
private ImageView[] dots;
/*设置变量获取导航点的ImageView*/
private int[] ids = { R.id.iv1, R.id.iv2, R.id.iv3 };
/*找三个导航点的id*/
ListView listView1, listView2;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);

initViews();

initDots();

}

private void initViews() {
views = new ArrayList<View>();

LayoutInflater inflater = LayoutInflater.from(this);
View vreplace1=new View(this);
View vreplace2=new View(this);

views.add(vreplace1);
//添加第一个view做辅助使用，不显示
views.add(inflater.inflate(R.layout.two, null));
views.add(inflater.inflate(R.layout.one, null));
views.add(inflater.inflate(R.layout.three, null));
views.add(vreplace2);
//添加最后一个view做辅助使用，不显示

vpAdapter = new ViewPagerAdapter(views, this);
vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(vpAdapter);
vp.setOnPageChangeListener(this);
/*绑定监听*/
}

/*初始化点，获取导航点的ImageView对象*/
private void initDots() {
dots = new ImageView[views.size()];
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) findViewById(ids[i]);
}
}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

/*看方法名就知道了，当Page被选中的时候，发生的事件*/
@Override
public void onPageSelected(int arg0) {
/*arg0表示选中了第几个Page，然后根据arg0选择哪些点显示选中的图片，哪些点显示不选中的图片*/
for (int i = 0; i < views.size(); i++) {
if ((arg0-1) == i) {
//views中的view发生变化，导航点也发生变化
dots[i].setBackgroundResource(R.drawable.login_point_selected);
} else {
dots[i].setBackgroundResource(R.drawable.login_point);
}
/*要注意的地方，arg0表示滑到view3了，再向下滑，就变成4了。这时候让它显示view1*.arg0小于1的时候同理/
if (arg0 > 3) {
viewPager.setCurrentItem(1);
}
if (arg0 < 1) {
viewPager.setCurrentItem(5);
}
}
}
}

想在可滑动的xml文件上添加代码什么的，例如添加一个监听，需要将该xml文件利用inflate转换为view,然后用view.findViewById(…)，最后添加监听即可。

测试代码已上传：http://download.csdn.net/detail/zhengyikuangge/9298475 ，若有需要请自行下载，不用积分的哦