ViewPager实现Gallery效果

用ViewPager实现Gallery效果以及自动轮播的实现

之前项目中遇到了这种需求，想了几天整合了网上的各种资料实现了效果，今天特地整理一份，以备日后再遇到，就不用麻烦从网上找了~~~

效果就是”画廊”，多说无用，先上图(自己手画的图，，，只是想说明效果而已~~~)

---

没啥好解释的，注释加的听明白的，大家自己看注释吧o(∩_∩)o~（其实是我挺懒的~~）

Handler处理：

    private Handler mHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what) {
            case 6://banner图
                if (viewPager.getCurrentItem() == adapter.getCount()) {
                    viewPager.setCurrentItem(400, false);
                } else {
                    viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                }
                this.sendEmptyMessageDelayed(6, 2000);
                break;
        }
    }
};

关键代码段：

    private void init() {
    ll_container = (LinearLayout) findViewById(R.id.ll_container);
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    /**
     * 随便添加了几个图片的链接，用Picasso实现图片的加载展示
     */
    datas = new ArrayList<>();
    datas.add("http://pic1.zhimg.com/4766e0648_m.jpg");
    datas.add("http://pic1.zhimg.com/bd751e76463e94aa10c7ed2529738314_m.jpg");
    datas.add("http://pic4.zhimg.com/e6637a38d22475432c76e6c9e46336fb_m.jpg");
    datas.add("http://pic4.zhimg.com/6a1ddebda9e8899811c4c169b92c35b3.jpg");
    //设置适配器
    adapter = new ViewPagerAdapter(this, datas);
    //设置两个图片之间的间距
    viewPager.setPageMargin(30);
    //设置滚动
    setViewPagerScroller();
    viewPager.setAdapter(adapter);
    //设置ViewPager默认显示中间的
    if (datas.size() > 1) {
        viewPager.setCurrentItem(500);
        mHandler.removeMessages(6);
        mHandler.sendEmptyMessage(6);
    }
    //处理父容器的事件分发
    ll_container.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            return viewPager.dispatchTouchEvent(event);//交由ViewPager来处理事件
        }
    });
    viewPager.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
                    if (datas.size() > 1) {//滑动时停止轮播
                        mHandler.removeMessages(6);
                    }
                    break;
                case MotionEvent.ACTION_UP://手指抬起时，开始轮播
                    if (datas.size() > 1) {
                        mHandler.removeMessages(6);
                        mHandler.sendEmptyMessageDelayed(6, 2000);
                    }
                    break;
            }
            return false;
        }
    });
    /**
     * 一定要重写setOnPageChangeListener方法，实现父容器的不断刷新绘制，不然显示不了
     *
     */
    viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            ll_container.invalidate();//不断重新绘制刷新父view
        }
    });

}

滚动切换：

    /**
 * 设置viewpager的切换时间
 */
private void setViewPagerScroller() {
    ViewPagerScoller viewPagerScoller = new ViewPagerScoller(this, new DecelerateInterpolator());
    viewPagerScoller.setDuration(1000);//设置移动时间
    try {
        Field field = ViewPager.class.getDeclaredField("mScroller");
        field.setAccessible(true);
        field.set(viewPager, viewPagerScoller);
    } catch (NoSuchFieldException e) {
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    }
}

/**
 * 自定义滚动时间
 */
class ViewPagerScoller extends Scroller {
    private int mDuration = 500;

    public ViewPagerScoller(Context context) {
        super(context);
    }

    public ViewPagerScoller(Context context, Interpolator interpolator) {
        super(context, interpolator);
    }

    public ViewPagerScoller(Context context, Interpolator interpolator, boolean flywheel) {
        super(context, interpolator, flywheel);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, this.mDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

    /**
     * 设置viewpager切换的动画时间
     */
    public void setDuration(int duration) {
        this.mDuration = duration;
    }
}

适配器：

public class ViewPagerAdapter extends PagerAdapter {
private Context context;
private ArrayList<String> list;

public ViewPagerAdapter(Context context, ArrayList<String> list) {
    this.context = context;
    this.list = list;
}

@Override
public int getCount() {
    return list.size() > 1 ? 1000 : list.size();//实现无限轮播的关键返回数据改变
}

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    ImageView imageView = new ImageView(context);
    ViewPager.LayoutParams params = new ViewPager.LayoutParams();
    params.height = ViewPager.LayoutParams.MATCH_PARENT;
    params.width = ViewPager.LayoutParams.WRAP_CONTENT;
    imageView.setLayoutParams(params);
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);

    if (list.size() > 0) {
        position = position % list.size();//%计算
    }
    //加载图片
    Picasso.with(context).load(list.get(position)).into(imageView);
    //设置ImageView的监听回调事件处理
    imageView.setOnClickListener(new ImgOnClickListener(position));
    container.addView(imageView);
    return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((ImageView) object);
}

/**
 * 自定义ImageView的点击事件
 */
class ImgOnClickListener implements View.OnClickListener {
    private int position;

    public ImgOnClickListener(int position) {
        this.position = position;
    }

    @Override
    public void onClick(View v) {
        Toast.makeText(context, "点击的索引 = " + position, Toast.LENGTH_SHORT).show();
    }
}

}

布局：

特别注意一点的是：

android:clipChildren="false"

重要的事情说三遍：

必须给ViewPager以及他的ViewGroup设置！

必须给ViewPager以及他的ViewGroup设置！

必须给ViewPager以及他的ViewGroup设置！

不然会无法显示左右两个图片….

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.iven.app.MainActivity">

<LinearLayout
    android:id="@+id/ll_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="自动滚动" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="wrap_content"
        android:layout_height="250px"
        android:layout_marginLeft="44px"
        android:layout_marginRight="44px"
        android:layout_marginTop="30px"
        android:clipChildren="false"></android.support.v4.view.ViewPager>
</LinearLayout>

至于用Picasso加载圆角图片的处理，请移步：

http://blog.csdn.net/ivenes/article/details/53455214