简单实现下拉图片放大③ - 定时器轮播图

QQ20160908-2.png

• 因为项目还在更改,需求还没定下来所以有时间做点小小的研究 ..

• 今天把之前下拉刷新的的图片换成了轮播图 ~ 所以今天聊聊轮播图那点事
  传送门 :
  简单实现下拉图片放大① - 全屏手势
  简单实现下拉图片放大② - 单张图
  简单实现下拉图片放大③ - 定时器轮播图
  简单实现下拉图片放大④ + pageControl指示器

github下载地址点我

• 言归正传看下效果 :

Untitled3.gif

细节包括 :

• 拖动停止定时器
• 全屏拖动pop返回
• 无限轮播 无卡顿
• 上滑渐变图片消失
• 上滑渐变出现导航栏 (自定义导航栏)
• 状态栏随图片渐变的颜色改变
• 下拉放大

• 层级机构图

  
  QQ20160907-0.png

• viewController.m获取数据

//创建图片地址字符串数组即可! 检查自己的是否支持HTTPS网络请求
- (void)loadDataFromNet {
    _urls = @[@"http://imgsrc.baidu.com/baike/pic/item/a6efce1b9d16fdfa241bf189b68f8c5494ee7b65.jpg",
              @"http://pic2016.5442.com:82/2016/0811/26/1.jpg%21960.jpg",
              @"http://imgsrc.baidu.com/forum/pic/item/5bb5c9ea15ce36d3da6bfdb93af33a87e850b1cf.jpg",
              @"http://image.tianjimedia.com/uploadImages/2012/178/K830IZAG0Q20.jpg"];
}

注意:地址是百度的高清图地址 .. 可能比较大

.

• collectionView (轮播图).m文件
  初始化接收数据,并自定义flowlayout

- (instancetype)initWithUrls:(NSArray <NSURL *> *)urls
{
    self = [super initWithFrame:CGRectZero collectionViewLayout:[[YSFlowLayout alloc] init]];
    if (self) {
        _urls = urls;
        self.delegate = self;
        self.dataSource = self;
        [self registerClass:[YSCollectionViewCell class] forCellWithReuseIdentifier:YSCollectionViewCellId];
        dispatch_async(dispatch_get_main_queue(), ^{
            NSIndexPath * path = [NSIndexPath indexPathForItem:_urls.count * 10 inSection:0];
            [self scrollToItemAtIndexPath:path atScrollPosition:0 animated:NO];
        });
        [self addTimer];

        [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(tingzhi) name:@"tingzhi" object:nil];
        [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(jixu) name:@"jixu" object:nil];
    }
    return self;
}

• flowlayout(布局item)
  .m文件

- (void)prepareLayout {
//    NSLog(@"%@",self.collectionView);
    self.minimumLineSpacing = 0;
    self.minimumInteritemSpacing = 0;
    self.itemSize = self.collectionView.bounds.size;
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    self.collectionView.showsVerticalScrollIndicator = 0;
    self.collectionView.showsHorizontalScrollIndicator = 0;
    self.collectionView.pagingEnabled = YES;
    self.collectionView.bounces = NO;
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(bigBig:) name:@"zys" object:nil];
}

注意点是 layout中有collectionView属性,并且是有大小的 !

• collectionViewCell.m

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    
    if (self) {
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
        _imageView.contentMode = UIViewContentModeScaleAspectFill;
        _imageView.layer.masksToBounds = YES;
        [self.contentView addSubview:_imageView];
    }
    return self;
}

• collecView中的定时器

- (void)addTimer {
    _timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
- (void)nextPage {
    NSUInteger page = _scrollV.contentOffset.x / self.hm_width + 1;
    NSLog(@"%zd",page);
    NSIndexPath * path = [NSIndexPath indexPathForItem:page  inSection:0];
    [self scrollToItemAtIndexPath:path atScrollPosition:0 animated:YES];
    
}

• 内容 :

  • 轮播图拖动定时器停止滚动
  • 停止拖动添加定时器继续滚动

// zhu yi  yi chu  tong  zhi ..  !移!除!
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [[NSNotificationCenter defaultCenter]postNotificationName:@"tingzhi" object:nil userInfo:nil];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    [[NSNotificationCenter defaultCenter]postNotificationName:@"jixu" object:nil userInfo:nil];
}

接收通知做调整.png

//移除定时器
- (void)tingzhi {
    [_timer invalidate];
    _timer = nil;
}
//添加定时器继续
- (void)jixu {
    [self addTimer];
}

• 原理:在scrollViewWillBeginDragging 和scrollViewDidEndDragging代理方法里加通知中心

• 注册通知并接收通知即可

任何其他问题,欢迎留言,愿与你一起学习
邮箱:zh_yes@foxmail.com