无线循环的可自动滚动播放轮播图

最近从网上找了一些轮播图的源码,但是发现多少都有一点小问题,就找了一个近乎完美的,稍微修改了一下,本文只是对源码进行了一些修改,修改了在触摸到图片并拖动图片的时候会继续滚动的问题,和在拖动一小下之后返回了上以页面的问题.在这里感谢原作者提供的源码让我学习,非常感谢.
下面写一下具体的实现代码
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,最后附上源码无线循环自动滚动播放轮播图展示

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值