android使用ViewPager实现图片自动切换

1
2
3
4
5
6
7
8
9
10
11
12
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 
 <RelativeLayout
  android:id="@+id/my_viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>
 
</RelativeLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <ImageView
  android:id="@+id/iv_pic"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@mipmap/ic_launcher"
  android:layout_weight="1"/>
 <TextView
  android:id="@+id/tv_desc"
  android:text="123"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />
 
</LinearLayout>

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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
 
import java.util.ArrayList;
import java.util.List;
 
public class MyViewPager extends RelativeLayout {
 private static final int START_SCROLL = 1;
 private static final int SCROLL_NEXT = 2;
 private static final int SHOW_TIME = 5000;//显示时间
 private List<String> mDatas = new ArrayList<>();//viewpager每一页对应的标题
 private ViewPager mPager;
 private Context mContext;
 private int mWidth, mHeight; //viewpager的宽高
 private int mTitleHeight;  //标题高度
 private TipView mTipView;  //标题对应的view
 //在主ui中更新viewpager，也就是切换图片
 private static Handler sHandler = new Handler() {
  @Override
  public void handleMessage(Message msg) {
   int w = msg.what;
   ViewPager pager = (ViewPager) msg.obj;
   switch (w) {
    case START_SCROLL:
     pager.setCurrentItem(msg.arg1, true);
     break;
    case SCROLL_NEXT:
     pager.setCurrentItem(msg.arg1, true);
     break;
   }
  }
 };
 
 /**
  * 构造函数
  * @param context content
  * @param w 要显示的viewpager的宽
  * @param h 要显示的viewpager的高
  */
 public MyViewPager(Context context, int w, int h) {
  super(context);
  mContext = context;
  mWidth = w;
  mHeight = h;
  initView(); //取得数据 左边随便取的 只是为了看起来有效果
//  对viewpager滑动进行监听
  mPager.setOnPageChangeListener(new MOnPagerChangeListener());
  init();
  DisplayMetrics dm = mContext.getResources().getDisplayMetrics();
  mTitleHeight = cm_DptoPx(48, dm);
 }
 
 /**
  * 对viewpager控件进行绘制宽高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  ViewGroup.LayoutParams vp = getLayoutParams();
  if (vp != null) {
   vp.width = mWidth;
   vp.height = mHeight;
  }
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }
 
 /**
  * 把dp转化成px
  */
 public static int cm_DptoPx(int dp,DisplayMetrics dis){
  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, dis);
 }
 
 private void init() {
  getData();
 }
 
 private void initView() {
  mPager = new ViewPager(mContext);
  RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
  addView(mPager, rp);
 }
 
 public void getData() {
  for (int i = 0; i < 4 ; i++){
   mDatas.add(i,"viewpager"+i);
  }
  sHandler.postDelayed(new Runnable() {
   @Override
   public void run() {
    stopAnimation();
    initTipView();
    mPager.setAdapter(new RecommendAdapter());
    mPager.setCurrentItem(10000 * mDatas.size());
   }
  }, 2000);
 }
 
 /**
  * 删除队列中的消息
  */
 public void stopAnimation() {
  sHandler.removeMessages(START_SCROLL);
  sHandler.removeMessages(SCROLL_NEXT);
 }
 public void startAnimation() {
  if (mDatas.size() == 0) {
   return;
  }
  Message msg = sHandler.obtainMessage(START_SCROLL);
  msg.obj = mPager;
  msg.arg1 = (mPager.getCurrentItem() + 1);//取得后一张图片
  sHandler.sendMessageDelayed(msg, SHOW_TIME);//5秒后发送给ui线程
 }
 
 /**
  * 对标题view移动的光标初始化
  */
 private void initTipView() {
 
  if (mTipView == null) {
   RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(10, 10);
   rp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
   rp.bottomMargin = mTitleHeight;
   mTipView = new TipView(mContext, mDatas.size());
   addView(mTipView, rp);
  } else {
   mTipView.setCount(mDatas.size());
  }
 }
 
 
 
 private class MOnPagerChangeListener implements ViewPager.OnPageChangeListener {
  private int curState;
  @Override
  public void onPageScrolled(int i, float v, int i1) {
  }
  @Override
  public void onPageSelected(int i) { //滑动结束
   sHandler.removeMessages(SCROLL_NEXT);
   sHandler.removeMessages(START_SCROLL);
   if(curState == ViewPager.SCROLL_STATE_DRAGGING){
    return;
   }
   Message msg = sHandler.obtainMessage(SCROLL_NEXT);
   msg.arg1 = i + 1;
   msg.obj = mPager;
   sHandler.sendMessageDelayed(msg, SHOW_TIME);
   mTipView.setCurPostion(i % mDatas.size());
  }
 
  @Override
  public void onPageScrollStateChanged(int i) { //正在滑动时
   curState = i;
   if(i == ViewPager.SCROLL_STATE_DRAGGING){ //SCROLL_STATE_DRAGGING正在滑动 SCROLL_STATE_IDLE什么都没有做
    //SCROLL_STATE_SETTLING 滑动完毕
    stopAnimation();
   }else {
    if(!(sHandler.hasMessages(START_SCROLL)&&sHandler.hasMessages(SCROLL_NEXT))){
     startAnimation();
    }
   }
  }
 }
 
 private class RecommendAdapter extends PagerAdapter {
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   Log.i("MyViewPager","instantiateItem ");
   int curPos = position % mDatas.size();
   View view = View.inflate(mContext, R.layout.layout_recommend_item, null);
   ViewGroup.LayoutParams vp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
   ImageView iv = (ImageView) view.findViewById(R.id.iv_pic);
   TextView tv = (TextView) view.findViewById(R.id.tv_desc);
   tv.setText(mDatas.get(curPos));
   container.addView(view, vp);
   view.setTag(curPos);
   view.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    }
   });
   return view;
  }
 
  @Override
  public int getCount() {
   return Integer.MAX_VALUE;
  }
 
  @Override
  public boolean isViewFromObject(View view, Object o) {
   return view == o;
  }
 
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView((View) object);
  }
 }
 
 private class TipView extends View {
 
  private int mPadding;
  private int mCount;
  private int mCurPos;
  private Paint mNorPaint;
  private Paint mSelPaint;
  private int mHeight;
 
  public TipView(Context context, int count) {
   super(context);
   mNorPaint = new Paint();
   mNorPaint.setAntiAlias(true);
   DisplayMetrics dm = context.getResources().getDisplayMetrics();
   int selHeight = cm_DptoPx(2, dm);
   int norHeight = cm_DptoPx(1, dm);
   mHeight = cm_DptoPx(2, dm);
   mNorPaint.setStrokeWidth(norHeight);
   mNorPaint.setColor(Color.argb(80, 255, 255, 255));
   mSelPaint = new Paint();
   mSelPaint.setAntiAlias(true);
   mSelPaint.setStrokeWidth(selHeight);
   mSelPaint.setColor(Color.WHITE);
   mCount = count;
   mPadding = cm_DptoPx(0, dm);
  }
  @Override
  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   int ow = (getWidth()-2*mPadding)/ mCount;
   int y = getHeight() / 2;
   canvas.drawLine(mPadding, y, mCurPos * ow + mPadding, y, mNorPaint);
   canvas.drawLine(mCurPos * ow + mPadding, y, (mCurPos + 1) * ow + mPadding, y, mSelPaint);
   canvas.drawLine((mCurPos + 1) * ow + mPadding, y, getWidth() - mPadding, y, mNorPaint);
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   ViewGroup.LayoutParams vp = getLayoutParams();
   vp.width = ViewGroup.LayoutParams.MATCH_PARENT;
   vp.height = mHeight;
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
 
  public void setCurPostion(int pos) {
   mCurPos = pos;
   invalidate();
  }
 
  public void setCount(int count) {
   mCount = count;
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.RelativeLayout;
 
public class MainActivity extends Activity {
 private RelativeLayout mViewPager;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  DisplayMetrics dm = getResources().getDisplayMetrics();
  mViewPager = (RelativeLayout) findViewById(R.id.my_viewpager);
  mViewPager.addView(new MyViewPager(getApplicationContext(),dm.widthPixels ,(dm.widthPixels)/2));
 }
}