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

简单实现下拉图片放大③ - 定时器轮播图_第1张图片
QQ20160908-2.png
  • 因为项目还在更改,需求还没定下来所以有时间做点小小的研究 ..
  • 今天把之前下拉刷新的的图片换成了轮播图 ~ 所以今天聊聊轮播图那点事
    传送门 :
    简单实现下拉图片放大① - 全屏手势
    简单实现下拉图片放大② - 单张图
    简单实现下拉图片放大③ - 定时器轮播图
    简单实现下拉图片放大④ + pageControl指示器

github下载地址点我

  • 言归正传看下效果 :
Untitled3.gif

细节包括 :

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


    简单实现下拉图片放大③ - 定时器轮播图_第2张图片
    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  *)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];
}
简单实现下拉图片放大③ - 定时器轮播图_第3张图片
接收通知做调整.png
//移除定时器
- (void)tingzhi {
    [_timer invalidate];
    _timer = nil;
}
//添加定时器继续
- (void)jixu {
    [self addTimer];
}
  • 原理:在scrollViewWillBeginDraggingscrollViewDidEndDragging代理方法里加通知中心
  • 注册通知并接收通知即可

任何其他问题,欢迎留言,愿与你一起学习
邮箱:[email protected]

你可能感兴趣的:(简单实现下拉图片放大③ - 定时器轮播图)