首页 > 代码库 > ViewPager的使用

ViewPager的使用

  在许多APP中经常会看到许多图片的滑动显示,是使用ViewPager的使用,我做了一个小Demo实现它的应用,有什么的不对希望读者留评论指正。示意图如下

技术分享

通过滑动图片,小红点也随着移动。首先先找几个图片作为显示:

技术分享

将图片放入集合之中:

技术分享

写ViewPager的适配器,需要另外添加两个方法。

技术分享

因为是无限循环向右滑动,所以:

技术分享

getCount要返回最大值。这样就实现了图片的无限向右滑动效果,但是还需要显示圆点呢,由于圆点的个数和图片是对应的 ,所以在刚开始的集合中加入圆点:

技术分享

 

圆点与圆点之间是有间隔的,设置为10dp.在显示图片时,在显示时,第一个设置为红点的。随着图片的转移,红点也要跟着转移,这就需要在ViewPager的滑动监听时候去写:

mVp_view.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
private ImageView mChildAt;

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
currentPage = position;
ImageView mChildAtZero = (ImageView) mLl_point.getChildAt(0);
ImageView mChildAtOne = (ImageView) mLl_point.getChildAt(1);
ImageView mChildAtTwo = (ImageView) mLl_point.getChildAt(2);
ImageView mChildAtThree = (ImageView) mLl_point.getChildAt(3);
int x = position%4;
Log.d("TAG","X="+x);
if (x==0){
mChildAtZero.setImageResource(R.drawable.shape_point_change);
mChildAtOne.setImageResource(R.drawable.shape_point);
mChildAtTwo.setImageResource(R.drawable.shape_point);
mChildAtThree.setImageResource(R.drawable.shape_point);
}else if (x==1){
mChildAtZero.setImageResource(R.drawable.shape_point);
mChildAtOne.setImageResource(R.drawable.shape_point_change);
mChildAtTwo.setImageResource(R.drawable.shape_point);
mChildAtThree.setImageResource(R.drawable.shape_point);
}else if (x==2){
mChildAtZero.setImageResource(R.drawable.shape_point);
mChildAtOne.setImageResource(R.drawable.shape_point);
mChildAtTwo.setImageResource(R.drawable.shape_point_change);
mChildAtThree.setImageResource(R.drawable.shape_point);
}else {
mChildAtZero.setImageResource(R.drawable.shape_point);
mChildAtOne.setImageResource(R.drawable.shape_point);
mChildAtTwo.setImageResource(R.drawable.shape_point);
mChildAtThree.setImageResource(R.drawable.shape_point_change);
}
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

滑动监听用addOnPageChangeListener代替之前过时的setOnPageChangeListener的这个方法。在进行图片改变时候,去变换原点的位置。这样就可以实现效果图了。

ViewPager的使用