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
9f8e
_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