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

转载 2016年05月31日 23:03:04

Demo下载:http://download.csdn.net/detail/hbblzjy/9537238

导语

在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主要思路以及大概步骤,具体代码请看这里,如果觉得好用,请献上你的star。

该轮播框架的优势:

  • 文件少,代码简洁

  • 不依赖任何其他第三方库,耦合度低

  • 同时支持本地图片及网络图片

  • 可修改分页控件位置,显示或隐藏

  • 自定义分页控件的图片,就是这么个性

  • 自带图片缓存,一次加载,永久使用

  • 性能好,占用内存少,轮播流畅

实际使用

我们先看demo,代码如下

1429074-f8f21b1003b900b4.png

运行效果

1429074-dbe48ca8403116a5.gif

轮播实现步骤

接下来,笔者将从各方面逐一分析。

层级结构

最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView宽高 = scrollview宽高 = view宽高

1429074-956225c7acc72a34.png

轮播原理

假设轮播控件的宽度为x高度为y,我们设置scrollview的contentSize.width为3x,并让scrollview的水平偏移量为x,既显示最中间内容

scrollView.contentSize = CGSizeMake(3x, y);
scrollView.contentOffset = CGPointMake(x, 0);

QQ截图20160330185437.png

将imageView添加到scrollview内容视图的中间位置

QQ截图20160330185419.png

接下来使用代理方法scrollViewDidScroll来监听scrollview的滚动,定义一个枚举变量来记录滚动的方向

typedef enum{
  DirecNone,
  DirecLeft,
  DirecRight
} Direction;@property (nonatomic, assign) Direction direction;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {  self.direction = scrollView.contentOffset.x >x? DirecLeft : DirecRight;
}

使用KVO来监听direction属性值的改变

[self addObserver:self forKeyPath:@"direction" options:NSKeyValueObservingOptionNew context:nil];

判断滚动的方向,当偏移量大于x,表示左移,则将otherImageView加在右边,偏移量小于x,表示右移,则将otherImageView加在左边

QQ截图20160330185217.png

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {   //self.currIndex表示当前显示图片的索引,self.nextIndex表示将要显示图片的索引
  //_images为图片数组
  if(change[NSKeyValueChangeNewKey] == change[NSKeyValueChangeOldKey]) return;  if ([change[NSKeyValueChangeNewKey] intValue] == DirecRight) {    self.otherImageView.frame = CGRectMake(0, 0, self.width, self.height);    self.nextIndex = self.currIndex - 1;    if (self.nextIndex < 0) self.nextIndex = _images.count – 1;
  } else if ([change[NSKeyValueChangeNewKey] intValue] == DirecLeft){    self.otherImageView.frame = CGRectMake(CGRectGetMaxX(_currImageView.frame), 0, self.width, self.height);    self.nextIndex = (self.currIndex + 1) % _images.count;
  }  self.otherImageView.image = self.images[self.nextIndex];
}

通过代理方法scrollViewDidEndDecelerating来监听滚动结束,结束后,会变成以下两种情况:

QQ截图20160330185030.png

此时,scrollview的偏移量为0或者2x,我们通过代码再次将scrollview的偏移量设置为x,并将currImageView的图片修改为otherImageView的图片

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
  [self pauseScroll];
}

- (void)pauseScroll {  self.direction = DirecNone;//清空滚动方向
    //判断最终是滚到了右边还是左边
  int index = self.scrollView.contentOffset.x / x;  if (index == 1) return; //等于1表示最后没有滚动,返回不做任何操作
  self.currIndex = self.nextIndex;//当前图片索引改变
  self.pageControl.currentPage = self.currIndex;  self.currImageView.frame = CGRectMake(x, 0, x, y);  self.currImageView.image = self.otherImageView.image;  self.scrollView.contentOffset = CGPointMake(x, 0);
}

那么我们看到的还是currImageView,只不过展示的是下一张图片,如图,又变成了最初的效果

QQ截图20160330185004.png

自动滚动

轮播的功能实现了,接下来添加定时器让它自动滚动,相当简单

- (void)startTimer {   //如果只有一张图片,则直接返回,不开启定时器
   if (_images.count <= 1) return;   //如果定时器已开启,先停止再重新开启
   if (self.timer) [self stopTimer];   self.timer = [NSTimer timerWithTimeInterval:self.time target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
   [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)nextPage {    //动画改变scrollview的偏移量就可以实现自动滚动
  [self.scrollView setContentOffset:CGPointMake(self.width * 2, 0) animated:YES];
}

注意:setContentOffset:animated:方法执行完毕后不会调用scrollview的scrollViewDidEndDecelerating方法,但是会调用scrollViewDidEndScrollingAnimation方法,因此我们要在该方法中调用pauseScroll

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
  [self pauseScroll];
}

拖拽时停止自动滚动

当我们手动拖拽图片时,需要停止自动滚动,此时我们只需要让定时器失效就行了,当停止拖拽时,重新启动定时器

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
  [self.timer invalidate];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
  [self startTimer];
}

加载图片

实际开发中,我们很少会轮播本地图片,大部分都是服务器获取的,也有可能既有本地图片,也有网络图片,那要如何来加载呢?

定义4个属性

  • NSArray imageArray:暴露在.h文件中,外界将要加载的图片或路径数组赋值给该属性

  • NSMutableArray images:用来存放图片的数组

  • NSMutableDictionary imageDic:用来缓存图片的字典,key为URL

  • NSMutableDictionary operationDic:用来保存下载操作的字典,key为URL

判断外界传入的是图片还是路径,如果是图片,直接加入图片数组中,如果是路径,先添加一个占位图片,然后根据路径去下载图片

_images = [NSMutableArray array];for (int i = 0; i < imageArray.count; i++) {    if ([imageArray[i] isKindOfClass:[UIImage class]]) {
      [_images addObject:imageArray[i]];//如果是图片,直接添加到images中
    } else if ([imageArray[i] isKindOfClass:[NSString class]]){
      [_images addObject:[UIImage imageNamed:@"placeholder"]];//如果是路径,添加一个占位图片到images中
      [self downloadImages:i];  //下载网络图片
    }
  }

下载图片,先从缓存中取,如果有,则替换之前的占位图片,如果没有,去沙盒中取,如果有,替换占位图片,并添加到缓存中,如果没有,开启异步线程下载

- (void)downloadImages:(int)index {  NSString *key = _imageArray[index];  //从字典缓存中取图片
  UIImage *image = [self.imageDic objectForKey:key];  if (image) {
    _images[index] = image;//如果图片存在,则直接替换之前的占位图片
  }else{    //字典中没有从沙盒中取图片
    NSString *cache = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];    NSString *path = [cache stringByAppendingPathComponent:[key lastPathComponent]];    NSData *data = [NSData dataWithContentsOfFile:path];    if (data) {             //沙盒中有,替换占位图片,并加入字典缓存中
      image = [UIImage imageWithData:data];
      _images[index] = image;
      [self.imageDic setObject:image forKey:key];
    }else{       //字典沙盒都没有,下载图片
      NSBlockOperation *download = [self.operationDic objectForKey:key];//查看下载操作是否存在
      if (!download) {//不存在
        //创建一个队列,默认为并发队列
        NSOperationQueue *queue = [[NSOperationQueue alloc] init];        //创建一个下载操作
        download = [NSBlockOperation blockOperationWithBlock:^{          NSURL *url = [NSURL URLWithString:key];          NSData *data = [NSData dataWithContentsOfURL:url];           if (data) {                        //下载完成后,替换占位图片,存入字典并写入沙盒,将下载操作从字典中移除掉
            UIImage *image = [UIImage imageWithData:data];
            [self.imageDic setObject:image forKey:key];            self.images[index] = image;                        //如果只有一张图片,需要在主线程主动去修改currImageView的值
            if (_images.count == 1) [_currImageView performSelectorOnMainThread:@selector(setImage:) withObject:image waitUntilDone:NO];
            [data writeToFile:path atomically:YES];
            [self.operationDic removeObjectForKey:key]; 
            }
        }];
        [queue addOperation:download];
        [self.operationDic setObject:download forKey:key];//将下载操作加入字典
      }
    }
  }
}

监听图片点击

当图片被点击的时候,我们往往需要执行某些操作,因此需要监听图片的点击,思路如下

1.定义一个block属性暴露给外界void(^imageClickBlock)(NSInteger index)

(不会block的可以用代理,或者看这里

2.设置currImageView的userInteractionEnabled为YES

3.给currImageView添加一个点击的手势

4.在手势方法里调用block,并传入图片索引

结束语

源码github下载:https://github.com/codingZero/XRCarouselView

相关文章推荐

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

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

图片轮播——两个ImageView实现

代码下载链接:http://download.csdn.net/download/jiang314/9530687 该轮播框架的优势 1.文件少,代码简洁 2.不依赖任何其他第三方库,耦合度...

两个imageView实现图片轮播

前言 在不少的项目中,都会用到图片轮播这个功能,现在网上关于图片轮播的轮子也层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里给大家介绍笔者的主要思路以及大概步骤。...

viewPager+photoView实现图片轮播和手势缩放功能 支持手势缩放的imageView 如何实现相册左右滑动和手势缩放 如何让图片自适应控件大小 photoView如何使用(上)

photoView+ViewPager实现相册左右滑动和手势缩放,当前页放大后,滑动到下一页,前面放大的页面恢复默认大小状态

安卓高效图片轮播

  • 2016-08-29 17:41
  • 20.66MB
  • 下载

安卓:Handler实现图片轮播(非ViewPager)

1.布局文件放一个ImageView控件 2.逻辑代码文件中找出控件id 3.定义一个int类型的图片数组imgs存放图片 4.定义一个int类型的索引变量index 5.创建一个内部类实现R...

jquery实现图片轮播效果

html 部分 css部分 #lunbo{width: 600px;height: 300px;margin: 0 auto;overf...

jquery实现图片轮播图效果

*{ padding:0; margin:0; list-style:none;} /************************样式区。原本都打算写到JS里面的。不过这玩意改的比较多。新手改CS...

Swift 3.0 实现图片轮播器

Swift 3.0 实现图片轮播器 图片轮播器的实现方法一般分为两种:一种是用三张图片,通过改变显示的数据源来达到轮播的效果;另一种是通过在数据源的起始和结束位置分别插入数据源的最后一个元素和第一个元...

js实现图片轮播效果

html部分:div(总容器)包含两个列表(图片列表&数字列表)css部分:1.全局:去掉所有列表前的样式(ul去点,ol去数字) 2.整个div容器:设置长宽(和图片大小一样),设置超过部分影藏。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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