高效的图片轮播

原创 2016年08月29日 14:59:14

最近在做写知乎日报,用到图片轮播,看到比较普遍的方法是把getcount设得很大。这种方法明显是不够高效的。后来看到前辈@Krelve的一篇博客,大赞。这里做详细讲解下。这里写图片描述
原理就是,在最后一张图片的后面,加多一张和第一张一样的图片。当轮播到最后一张时(也就是和第一张一样的图片),在OnPageChangeListener的onPageScrollStateChanged方法中将图片无动画地设为第一张。

1、初始化数据,i==0和i==5设置同一张图片
private void initData() {
viewList = new ArrayList();
for (int i = 0; i <= 4 + 1; i++) {
View item = LayoutInflater.from(this).inflate(R.layout.item, null);
ImageView imageView = (ImageView) item.findViewById(R.id.image_view);

        if (i == 0) {
            imageView.setImageResource(R.drawable.item1);
        } else if (i == 5) {
            //本身5张图,在第六张图的位置,再添加第一张图
            imageView.setImageResource(R.drawable.item1);
        } else if (i == 1) {
            imageView.setImageResource(R.drawable.item2);
        } else if (i == 2) {
            imageView.setImageResource(R.drawable.item3);
        } else if (i == 3) {
            imageView.setImageResource(R.drawable.item4);

        } else if (i == 4) {
            imageView.setImageResource(R.drawable.item5);
        }
        viewList.add(item);
    }

    MyAdapter myAdapter = new MyAdapter(viewList);
    mViewPager.setAdapter(myAdapter);
    mViewPager.setCurrentItem(0);
    mViewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    current_item = 0;
}

2、viewpager滑动监听,onPageScrollStateChanged的arg0参数:arg0 ==1–默示正在滑动,arg0==2–默示滑动完毕了,arg0==0–默示什么都没做。判断i==5时,将它无动画地切换到i==0

class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

    /**
     * arg0这个参数有三种状态(0,1,2)。arg0 ==1--默示正在滑动,arg0==2--默示滑动完毕了,arg0==0--默示什么都没做。
     *
     * @param arg0
     */
    @Override
    public void onPageScrollStateChanged(int arg0) {
        switch (arg0) {
            case 1:
                isAutoPlay = false;
                break;
            case 2:
                isAutoPlay = true;
                break;
            case 0:
                if (mViewPager.getCurrentItem() == 4 + 1) {
                    /**
                     * false表示无动画效果调到指定页。
                     * 由于最后一页和第一页的图片是一样的,无动画跳转给人的感觉就是已经是第一页
                     */
                    mViewPager.setCurrentItem(0, false);
                }
                current_item = mViewPager.getCurrentItem();
                isAutoPlay = true;
                break;
        }
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }

    @Override
    public void onPageSelected(int arg0) {
    }
}

3、通过handler.postDelayed(task, 1500);方法实现定时切换

private void startPlay() {
isAutoPlay = true;
handler.postDelayed(task, 1500);
}

private Runnable task = new Runnable() {
    @Override
    public void run() {
        current_item = current_item % 6 + 1;
        if (isAutoPlay) {
            if (current_item == 0) {
                mViewPager.setCurrentItem(current_item, false);
                handler.postDelayed(task, 1500);
            } else {
                mViewPager.setCurrentItem(current_item);
                handler.postDelayed(task, 1500);
            }
        } else {
            handler.postDelayed(task, 1500);
        }
    }
};

源码地址:http://download.csdn.net/detail/qq_24334367/9616116

版权声明:本文为博主原创文章,未经博主允许不得转载。

高效图片轮播,两个imageView实现

导语 在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主要思路以及大概步骤,具体代码请看...
  • hbblzjy
  • hbblzjy
  • 2016年05月31日 23:03
  • 445

高效图片轮播,两个ImageView实现

导语 在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主要思路以及大概步骤,具体代...
  • COOL_BEAR_XX
  • COOL_BEAR_XX
  • 2016年04月11日 15:43
  • 450

c# 照片轮播控件

新建一个usercontral 添加图片前要先stop using System; using System.Collections.Generic; using Syst...
  • qq_15572445
  • qq_15572445
  • 2016年03月04日 16:43
  • 927

用jquery实现图片轮播

CSS样式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px;...
  • liuxuekai
  • liuxuekai
  • 2016年07月16日 18:04
  • 6832

Android 实现图片轮播的三种方法

Android实现图片轮播主要有以下方式,汇总一下: 一、ViewPager + PagerAdapter + Handler private class ImageAdapter extends...
  • zhoumushui
  • zhoumushui
  • 2015年10月27日 10:46
  • 3537

图片轮播,一个简单的图片轮播

在学习前端时自己做了一个简单的图片轮播,五张图片。css样式和js代码全部分离。源码连接:http://download.csdn.net/detail/tanglingbo/9631405...
  • TangLingBo
  • TangLingBo
  • 2016年09月16日 12:11
  • 723

高效遍历Map

高效遍历Map
  • paincupid
  • paincupid
  • 2015年12月11日 14:21
  • 1429

使用Jquery实现图片轮播效果

JQuery实现图片轮播 *{margin: 0;padding: 0;} #box{width:600px;height:240px;position: relative;} #pic{width...
  • u013497151
  • u013497151
  • 2015年03月11日 11:17
  • 1101

纯原生javascript实现图片轮播切换效果代码。

效果如下: 代码部分:
  • CodingNoob
  • CodingNoob
  • 2017年08月20日 13:54
  • 284

一份简单的轮播图代码

图片轮播切换 #banner_lun_bo_img_box{ width:960px; height:314px; margin: 0 auto; position:relative...
  • friendan
  • friendan
  • 2016年09月29日 15:25
  • 1604
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:高效的图片轮播
举报原因:
原因补充:

(最多只允许输入30个字)