最近从网上找了一些轮播图的源码,但是发现多少都有一点小问题,就找了一个近乎完美的,稍微修改了一下,本文只是对源码进行了一些修改,修改了在触摸到图片并拖动图片的时候会继续滚动的问题,和在拖动一小下之后返回了上以页面的问题.在这里感谢原作者提供的源码让我学习,非常感谢.
下面写一下具体的实现代码
1,先来两张效果图
2,下面是布局,这是轮播图的布局
<?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="wrap_content" >
<!-- 放置轮播图片位置 -->
<LinearLayout
android:id="@+id/ll_viewpager_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:background="#00000000"
android:gravity="center"
android:orientation="vertical" >
<!-- 放置图片标题的位置,如果不想显示标题,可设置隐藏 -->
<TextView
android:id="@+id/top_news_title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:singleLine="true"
android:text="图片标题"
android:textColor="@android:color/black" />
<!-- 放置图片中选中点的位置 -->
<LinearLayout
android:id="@+id/ll_dots"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" />
</LinearLayout>
</RelativeLayout>
3,主要代码
轮播图的适配器,原文中是在 case MotionEvent.ACTION_CANCEL:这个事件中开始滚动了图片,我觉得在这个ACTION_CANCEL中先不要滚动,因为在视图中触摸之后移动一下就会触发这个方法,最后我在dispatchTouchEvent()事件中的MotionEvent.ACTION_UP时候,触摸轮播视图之后松开手的时候继续滚动会更好一些
还有一个问题是在getCount中返回了Integer的最大值,这时候可能内部的计算问题,导致滑动一小下之后松手,就会跳到上一页,这个问题我纠结了很久,也没有得到明确的答案,可能是内部的一些计算错误导致的原因.只要设置一个非常大的值就好了,我在这里设置的是当前轮播图对象的数量*2000基本上也就够用了,return carouselDiagramList.size()*2000;可以设置更高应该都没问题,一定要在getView()方法中设置当前的页数为这个值的中间值,currentPosition=carouselDiagramList.size()*1000;这样往前滑动往后滑动都可以.
//轮播图的数据适配器
class MyPagerAdapter extends PagerAdapter{
//TODO
@Override
public int getCount() {
return carouselDiagramList.size()*2000;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//如果传入的imageUrlList为空或者大小为0,则不再进行后续操作
if(carouselDiagramList == null || carouselDiagramList.size() == 0){
return null;
}
//将positon的值从21亿中间的某个值转化为0-imageUrlList.size()之间的某个值,这样才能找到对应的资源
int newPosition = position % carouselDiagramList.size();
Log.i("info", "instantiateItem 中======> 对应集合坐标:"+newPosition+",position="+position+",currentPosition="+currentPosition+"***实例化的图片位置**"+carouselDiagramList.get(newPosition).id);
//拿到当前轮播图对象
Lunbo carouselDiagram = carouselDiagramList.get(newPosition);
//将轮播图的单个图的布局文件转化为view对象
View view = View.inflate(context, R.layout.item_poster, null);
//绑定控件
ImageView imageView = (ImageView) view.findViewById(R.id.iv);
//使用BitmapUtil通过图片url加载出图片,设置进imageView中
ImageLoader.getInstance().displayImage(carouselDiagram.pic, imageView);
//将该图片加入viewpager中
container.addView(view);
//设置该图片的点击监听事件
view.setOnTouchListener(new OnTouchListener() {
//TODO
private int downX;
private long downTime;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//当鼠标点在图片上时,取消handler所有任务,即停止轮播图的自动滚动
downX = (int) event.getX();
downTime = System.currentTimeMillis();
Log.i("info", "onTouch*******************************ACTION_DOWN");
break;
case MotionEvent.ACTION_UP:
//当鼠标离开图片时,判断是触摸操作还是点击事件
int upX = (int) event.getX();
long upTime = System.currentTimeMillis();
//如果按下和离开在一个位置,切间隔小于500ms,即为点击事件
if(downX == upX && upTime-downTime < 500){
//确定为点击事件,要跳转到详情页面
// Toast.makeText(context, "targetUrlList.get(position) = "+targetUrlList.get(newPosition), Toast.LENGTH_LONG).show();
// Toast.makeText(context, "url="+carourselDiagram.url, Toast.LENGTH_LONG).show();
if(itemClickListener != null){
// itemClickListener.click(carouselDiagram);
}
}
Log.i("info", "onTouch********************************ACTION_UP");
break;
case MotionEvent.ACTION_CANCEL:
//viewpager和内部嵌套的view的事件交互规则
//1,按下事件作用在内部view上
//2,当滑动稍许距离,加速度未达到一定值时,对应滑动事件作用在view身上
//3,当滑动达到一定距离,并且加速度达到一定值,内部的view触发cancel事件(而不会触发view的up事件),然后将滑动的事件返还给父控件(ViewPager)
//当鼠标离开图片时,继续滚动轮播图
//startRoll();
Log.i("info", "onTouch*********************************ACTION_CANCEL");
break;
}
//返回true表示当前控件响应该事件,不在进行事件分发
return true;
}
});
return view;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
将轮播图转化为View可以添加到任意的LinearLayout的布局中
//得到轮播图的视图对象
public View getView(){
//如果传入的imageUrlList为空或者大小为0,则返回一个空的view
if(carouselDiagramList == null || carouselDiagramList.size() == 0){
return new View(context);
}
//将轮播图的布局文件转化为View对象
layout_roll_view = View.inflate(context, R.layout.layout_roll_viewpager, null);
ll_viewpager_container = (LinearLayout) layout_roll_view.findViewById(R.id.ll_viewpager_container);
//设置圆点布局和标题位置
ll_dots = (LinearLayout) layout_roll_view.findViewById(R.id.ll_dots);
top_news_title=(TextView) layout_roll_view.findViewById(R.id.top_news_title);
//初始化可滚动的viewpager的相关信息(图片,标题,标志dot)
initDot(ll_dots);
initTitle();
//清除顶部布局视图,将轮播图片添加到头部布局文件中
ll_viewpager_container.removeAllViews();
ll_viewpager_container.addView(this);
//开始滚动轮播图
if(adapter == null){
adapter = new MyPagerAdapter();
this.setAdapter(adapter);
}else{
//重新设置数据适配器,getCount--->instantiateItem
adapter.notifyDataSetChanged();
}
//让页面从总数之间的值开始,可以进行左右循环滑动,不过要确保第一次开始的数是imageList.size()的倍数
currentPosition=carouselDiagramList.size()*1000;
Log.i("info", "getView==当前坐标==>"+currentPosition);
this.setCurrentItem(currentPosition);
startRoll();
return layout_roll_view;
}
4,最后附上源码无线循环自动滚动播放轮播图展示