正文

Android实现ViewPager无限循环效果（一）

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0707

这篇文章主要为大家详细介绍了Android实现ViewPager无限循环效果的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android实现ViewPager无限循环的具体代码，供大家参考，具体内容如下

方式一：

实现原理：

假设有3张图片，分别是1,2,3，那么就创建5张图片，这5张图片的顺序为：3,1,2,3,1，其中1,2,3为我们要实现滑动的图片，最左面的3和最右面的1是我们另外添加的图片，开始时，显示图片1，当图片向左滑动依次为1,2,3，当从第3张图片继续向左滑动，会出现我们多添加的图片1，这时，将当前的index设置为真正的图片1所在的位置。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
package com.xiaomai.myproject.demo;
 
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
 
import com.xiaomai.myproject.R;
import com.xiaomai.myproject.adapter.LoopViewPagerAdapter;
import com.xiaomai.myproject.base.BaseActivity;
import com.xiaomai.myproject.utils.Utils;
 
import java.util.ArrayList;
import java.util.List;
 
/**
 * Created by XiaoMai on 2016/10/7 17:19.
 *
 */
public class LoopViewPagerDemoActivity extends BaseActivity {
 
 /**
  * 更新图片的时间
  */
 private static final int UPDATE_TIME = 3 * 1000;
 
 private ViewPager mViewPager;
 
 private LoopViewPagerAdapter mLoopViewPager;
 
 /**
  * 图片资源集合
  */
 private int[] mImageIds;
 
 /**
  * 图片集合
  */
 private List<ImageView> mImageList;
 
 /**
  * 当前广告的index
  */
 private int mCurrentPageIndex;
 
 /**
  * 指示Point
  */
 private LinearLayout mLinearLayoutPoints;
 
 private Handler mHandler = new Handler();
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
 }
 
 @Override
 protected void onResume() {
  super.onResume();
  mHandler.postDelayed(myRunnable, UPDATE_TIME);
 }
 
 @Override
 protected void onPause() {
  super.onPause();
  mHandler.removeCallbacks(myRunnable);
 }
 
 Runnable myRunnable = new Runnable() {
  @Override
  public void run() {
   mViewPager.setCurrentItem(mCurrentPageIndex + 1);
  }
 };
 
 @Override
 protected void initVariables() {
  super.initVariables();
 }
 
 @Override
 protected void initViews() {
  mLinearLayoutPoints = (LinearLayout) findViewById(R.id.activity_ll_container);
  mViewPager = (ViewPager) findViewById(R.id.activity_loop_viewpager);
 }
 
 @Override
 protected void loadData() {
  super.loadData();
  mHandler.postDelayed(new Runnable() {
   @Override
   public void run() {
    /**
     * 初始化图片的资源id
     */
    mImageIds = new int[]{
      R.mipmap.ic_launcher,
      R.mipmap.ic_launcher,
      R.drawable.my_toast,
      R.drawable.my_toast};
    /**
     * 添加ImageView
     */
    mImageList = new ArrayList<>();
    //额外添加两张图片
    int pagerCount = mImageIds.length + 2;
    ViewGroup.LayoutParams layoutParams =
      new ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.WRAP_CONTENT);
    for (int i = 0; i < pagerCount; i++) {
     ImageView imageView = new ImageView(mContext);
     imageView.setLayoutParams(layoutParams);
     mImageList.add(imageView);
    }
    //圆点的直径
    int diameter = Utils.dip2px(mContext,10f);
    LinearLayout.LayoutParams params =
      new LinearLayout.LayoutParams(diameter, diameter);
    int margin = Utils.dip2px(mContext,5f);
    params.setMargins(margin,margin,margin,margin);
    mLinearLayoutPoints.removeAllViews();
    for (int i = 0; i < mImageList.size(); i++) {
     View view = new View(mContext);
     view.setLayoutParams(params);
     if (i != 0 && i != mImageList.size() - 1) {
      view.setBackgroundResource(R.drawable.circle_normal);
     }
     mLinearLayoutPoints.addView(view);
    }
    mLinearLayoutPoints.setVisibility(View.VISIBLE);
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
     @Override
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
     }
 
     @Override
     public void onPageSelected(int position) {
      mHandler.removeCallbacks(myRunnable);
      mHandler.postDelayed(myRunnable, UPDATE_TIME);
      mCurrentPageIndex = position;
      if (position == 0) {
       // 当视图在第一个时，将页面号设置为图片的最后一张。
       mCurrentPageIndex = mImageIds.length;
      } else if (position == mImageIds.length + 1) {
       // 当视图在最后一个时,将页面号设置为图片的第一张。
       mCurrentPageIndex = 1;
      } else {
      }
      /**
       * 当视图在第一个或者最后一个时，pageIndex和position的值不相等，
       * 所以要改变viewPager的当前item。
       */
      if (position != mCurrentPageIndex) {
       /**
        * 第二参数必须设置为false，意思是立即过渡，不给用户视觉上的效果。
        */
       mViewPager.setCurrentItem(mCurrentPageIndex, false);
       return;
      }
      for (int i = 1; i < mLinearLayoutPoints.getChildCount() - 1; i++) {
       if (i != mCurrentPageIndex){
        mLinearLayoutPoints.getChildAt(i).setBackgroundResource(R.drawable.circle_normal);
       }else {
        mLinearLayoutPoints.getChildAt(mCurrentPageIndex).setBackgroundResource(
          R.drawable.circle_select);
       }
      }
 
     }
 
     @Override
     public void onPageScrollStateChanged(int state) {
 
     }
    });
    /**
     * 当ViewPager被按下的时候，取消自动滚动
     * 反之开启自动滑动。
     */
    mViewPager.setOnTouchListener(new View.OnTouchListener() {
     @Override
     public boolean onTouch(View v, MotionEvent event) {
      if(event.getAction() == MotionEvent.ACTION_DOWN){
       mHandler.removeCallbacks(myRunnable);
      }else if (event.getAction() == MotionEvent.ACTION_UP){
       mHandler.postDelayed(myRunnable, UPDATE_TIME);
      }
      return false;
     }
    });
    mLoopViewPager = new LoopViewPagerAdapter(mImageList, mImageIds);
    mViewPager.setAdapter(mLoopViewPager);
    /**
     * 因为第0个item是另外添加的那张图片，所以初始化时要把当前item设置为1。
     */
    mViewPager.setCurrentItem(1);
    dissMissProgressDialog();
   }
  }, 3 * 1000);
 
 }
 
 @Override
 protected int getContentLayout() {
  return R.layout.act_loopviewpager;
 }
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package com.xiaomai.myproject.adapter;
 
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
 
import java.util.List;
 
/**
 * Created by XiaoMai on 2016/10/7 17:23.
 */
public class LoopViewPagerAdapter extends PagerAdapter {
 
 private List<ImageView> mImageList;
 
 private int[] mImageIds;
 
 public LoopViewPagerAdapter(List<ImageView> mImageList, int[] mImageIds) {
  this.mImageList = mImageList;
  this.mImageIds = mImageIds;
 }
 
 @Override
 public int getCount() {
  return mImageList == null ? 0 : mImageList.size();
 }
 
 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 }
 
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  if (position == 0) {
   // 如果是第0个item就设置它的图片内容为最后一个图片的内容
   mImageList.get(position).setImageResource(mImageIds[mImageIds.length-1]);
  } else if (position == (mImageList.size() - 1)) {
   // 如果是最后一个item就设置它的图片内容为第一个图片的内容
   mImageList.get(position).setImageResource(mImageIds[0]);
  } else {
   // 这是正常的图片
   mImageList.get(position).setImageResource(mImageIds[position - 1]);
  }
  container.addView(mImageList.get(position));
  return mImageList.get(position);
 }
 
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView(mImageList.get(position));
 }
}

布局文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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:orientation="vertical">
 
 <include
  android:id="@+id/titleBar"
  layout="@layout/my_app_bar" />
 
 <android.support.v4.view.ViewPager
  android:id="@+id/activity_loop_viewpager"
  android:layout_width="match_parent"
  android:layout_height="200dp"
  android:layout_below="@id/titleBar" />
 
 <LinearLayout
  android:id="@+id/activity_ll_container"
  android:layout_width="match_parent"
  android:orientation="horizontal"
  android:gravity="center"
  android:background="@color/toast"
  android:layout_alignBottom="@id/activity_loop_viewpager"
  android:visibility="gone"
  android:layout_height="40dp"/>
</RelativeLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/xiaomai949804781/article/details/52779339