Android实现图片轮显效果——自定义ViewPager控件-飞外

使用ViewPager控件实现可横向翻页、水平切换图片等效果，但ViewPager需要手动滑动才能切换页面，图片轮显效果的效果本质上就是在ViewPager控件的基础上让它能自动的进行切换，所以实现图片轮显步骤如下：

1、 扩展ViewPager自定义一个MyScrollImageView类

2、 为MyScrollImageView定义适配器，装载图片信息

3、 定义图片滑动动画时间控制类

接下来我们就一步步实现下图案例：

我们先为我们的自定义ViewPager控件编写一个适配器，用于加载要轮显的图片，这个和使用ViewPager控件一样都要为适配器控件定义适配器

 // 适配器 public class MyPagerAdapter extends PagerAdapter { private Activity mActivity; // 上下文 private List View mListViews; // 图片组 public MyPagerAdapter(){ public MyPagerAdapter(Activity mActivity,List View mListViews){ this.mActivity=mActivity; this.mListViews=mListViews; public int getCount() { if (mListViews.size() == 1) {// 一张图片时不用流动 return mListViews.size(); return Integer.MAX_VALUE; 返回List中的图片元素装载到控件中 public Object instantiateItem(View v, int i) { if (((ViewPager) v).getChildCount() == mListViews.size()) { ((ViewPager) v) .removeView(mListViews.get(i % mListViews.size())); ((ViewPager) v).addView(mListViews.get(i % mListViews.size()), 0); return mListViews.get(i % mListViews.size()); public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); public void destroyItem(ViewGroup view, int i, Object object) { view.removeView(mListViews.get(i%mListViews.size())); }

自定义一个MyScrollImageView类，主要扩展一个start（ ）方法，该方法实现按时间间隔不断切换图片

public class MyImgScroll extends ViewPager { Activity mActivity; // 上下文 List View mListViews; // 图片组 int mScrollTime = 0; Timer timer; int oldIndex = 0; int curIndex = 0; public MyImgScroll(Context context, AttributeSet attrs) { super(context, attrs); * 开始广告滚动 * @param mainActivity * 显示广告的主界面 * @param imgList * 图片列表, 不能为null ,最少一张 * @param scrollTime * 滚动间隔 ,0为不滚动 * @param ovalLayout * 圆点容器,可为空,LinearLayout类型 * @param ovalLayoutId * ovalLayout为空时 写0, 圆点layout XMl * @param ovalLayoutItemId * ovalLayout为空时 写0,圆点layout XMl 圆点XMl下View ID * @param focusedId * ovalLayout为空时 写0, 圆点layout XMl 选中时的动画 * @param normalId * ovalLayout为空时 写0, 圆点layout XMl 正常时背景 public void start(Activity mainActivity, List View imgList, int scrollTime, LinearLayout ovalLayout, int ovalLayoutId, int ovalLayoutItemId, int focusedId, int normalId) { mActivity = mainActivity; mListViews = imgList; mScrollTime = scrollTime; // 设置圆点 setOvalLayout(ovalLayout, ovalLayoutId, ovalLayoutItemId, focusedId, normalId); this.setAdapter(new MyPagerAdapter(mActivity,mListViews));// 设置适配器 if (scrollTime != 0 imgList.size() 1) { // 设置滑动动画时间 ,如果用默认动画时间可不用 ,反射技术实现 new FixedSpeedScroller(mActivity).setDuration(this, 700); startTimer(); // 触摸时停止滚动 this.setOnTouchListener(new OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP) { startTimer(); } else { stopTimer(); return false; if (mListViews.size() 1) { this.setCurrentItem((Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2) % mListViews.size());// 设置选中为中间/图片为和第0张一样 // 设置圆点 private void setOvalLayout(final LinearLayout ovalLayout, int ovalLayoutId, final int ovalLayoutItemId, final int focusedId, final int normalId) { if (ovalLayout != null) { LayoutInflater inflater=LayoutInflater.from(mActivity); for (int i = 0; i mListViews.size(); i++) { ovalLayout.addView(inflater.inflate(ovalLayoutId, null)); //选中第一个 ovalLayout.getChildAt(0).findViewById(ovalLayoutItemId) .setBackgroundResource(focusedId); this.setOnPageChangeListener(new OnPageChangeListener() { public void onPageSelected(int i) { curIndex = i % mListViews.size(); //取消圆点选中 ovalLayout.getChildAt(oldIndex).findViewById(ovalLayoutItemId) .setBackgroundResource(normalId); //圆点选中 ovalLayout.getChildAt(curIndex).findViewById(ovalLayoutItemId) .setBackgroundResource(focusedId); oldIndex = curIndex; public void onPageScrolled(int arg0, float arg1, int arg2) { public void onPageScrollStateChanged(int arg0) { * 取得当明选中下标 * @return public int getCurIndex() { return curIndex; * 停止滚动 public void stopTimer() { if (timer != null) { timer.cancel(); timer = null; * 开始滚动 public void startTimer() { timer = new Timer(); timer.schedule(new TimerTask() { public void run() { mActivity.runOnUiThread(new Runnable() { public void run() { MyImgScroll.this.setCurrentItem(MyImgScroll.this .getCurrentItem() + 1);//设置控件当前项（改变图片） }, mScrollTime, mScrollTime);}

package com.tianshicoffeeom.app.imgscroll;import java.lang.reflect.Field;import android.content.Context;import android.support.v4.view.ViewPager;import android.view.animation.Interpolator;import android.widget.Scroller; * 图片滑动动画时间控制类 , 如果采用默认时间可不用这个类 ,通过反射技术改变ViewPager的滑动时间public class FixedSpeedScroller extends Scroller {  private Context context; private int mDuration = 500;  public FixedSpeedScroller(Context context) {  super(context);  this.context=context; public FixedSpeedScroller(Context context, Interpolator interpolator) {  super(context, interpolator);  this.context=context; * 设置改变ViewPager的滑动时间  * @param vp ViewPager 对象 * @param time 时间 public void setDuration(ViewPager vp,int time) { try { Field field = ViewPager.class.getDeclaredField("mScroller"); field.setAccessible(true); this.setmDuration(time);//设置翻动时间 field.set(vp, this); } catch (Exception e) { @Override  public void startScroll(int startX, int startY, int dx, int dy, int duration) {  //System.out.println("startScroll1"); super.startScroll(startX, startY, dx, dy, mDuration);  @Override  public void startScroll(int startX, int startY, int dx, int dy) {  //System.out.println("startScroll2"); super.startScroll(startX, startY, dx, dy, mDuration);  public void setmDuration(int time) {  mDuration = time;  public int getmDuration() {  return mDuration; }

public class MainActivity extends Activity { private MyImgScroll myPager; // 图片容器 private LinearLayout ovalLayout; // 圆点容器 private List View listViews; // 图片组 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myPager = (MyImgScroll) findViewById(R.id.myvp); ovalLayout = (LinearLayout) findViewById(R.id.vb); InitViewPager();//初始化图片 //开始滚动 myPager.start(this, listViews, 4000, ovalLayout, R.layout.ad_bottom_item, R.id.ad_item_v, R.drawable.dot_focused, R.drawable.dot_normal); @Override protected void onRestart() { myPager.startTimer(); super.onRestart(); @Override protected void onStop() { myPager.stopTimer(); super.onStop(); * 初始化图片 private void InitViewPager() { listViews = new ArrayList View (); int[] imageResId = new int[] { R.drawable.banner1, R.drawable. banner2, R.drawable. banner3, R.drawable.d, R.drawable. banner4 }; for (int i = 0; i imageResId.length; i++) { ImageView imageView = new ImageView(this); imageView.setOnClickListener(new OnClickListener() { public void onClick(View v) {// 设置图片点击事件 Toast.makeText(MainActivity.this, "点击了:" + myPager.getCurIndex(), Toast.LENGTH_SHORT) .show(); imageView.setImageResource(imageResId[i]); imageView.setScaleType(ScaleType.CENTER_CROP); listViews.add(imageView);}

 LinearLayout xmlns:andro xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"  com.jereh.view. MyScrollImageView android: android:layout_width="fill_parent" android:layout_height="120dp" /  LinearLayout android: android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="3dip" android:gravity="center" android:orientation="horizontal"  /LinearLayout  /LinearLayout