iOS开发UI篇--使用UICollectionView实现一个

作者: 扒皮狼 | 来源:发表于2018-11-21 13:14 被阅读4次

    一、案例演示

    本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播。知识点主要集中在UICollectionView和NSTimer的使用。


    1.gif

    二、知识储备

    2.1、UICollectionView横向布局

    只需要设置UICollectionViewFlowLayout的scrollDirection为UICollectionViewScrollDirectionHorizontal即可。

    2.2、NSTimer的基本使用

    NSTimer的初始化:

     + (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(nullable id)userInfo repeats:(BOOL)yesOrNo;
    
    • (NSTimeInterval)ti : 预订一个Timer,设置一个时间间隔。
      表示输入一个时间间隔对象,以秒为单位,一个>0的浮点类型的值,如果该值<0,系统会默认为0.1。
    • target:(id)aTarget : 表示发送的对象,如self
    • selector:(SEL)aSelector : 方法选择器,在时间间隔内,选择调用一个实例方法
    • userInfo:(nullable id)userInfo : 需要传参,可以为nil
    • repeats:(BOOL)yesOrNo : 当YES时,定时器会不断循环直至失效或被释放,当NO时,定时器会循环发送一次就失效。
      开启定时器:
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    

    关闭定时器:

    [self.timer invalidate];
    

    2.3、自动轮播和手动轮播的切换

    初始化的时候,我们默认开启定时器,定时执行切换到下一张图片的函数。当用户触摸到View的时候,我们则要关闭定时器,手动的进行UICollectionView的切换。当用户的手离开了View,我们要重新打开定时器,进行自动轮播的切换。

    三、关键代码分析

    3.1、生成UICollectionViewFlowLayout对象,设置他的滚动方向为水平滚动

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.itemSize = CGSizeMake(SCREEN_WIDTH, 200);
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    flowLayout.minimumLineSpacing = 0;
    

    3.2、初始化UICollectionView对象

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, self.navBarHeight, SCREEN_WIDTH, 200) collectionViewLayout:flowLayout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.showsHorizontalScrollIndicator = NO;
    collectionView.pagingEnabled = YES;
    collectionView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:collectionView];
    

    3.3、UICollectionView的UICollectionViewDataSource代理方法

    #pragma mark- UICollectionViewDataSource
    -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
        return YYMaxSections;
    }
    
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        return self.newses.count;
    }
    
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    
        YYCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
        if(!cell){
            cell = [[YYCell alloc] init];
        }
        cell.news=self.newses[indexPath.item];
        return cell;
    }
    

    3.4、定时器的开启和关闭

    #pragma mark 添加定时器
    -(void) addTimer{
        NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextpage) userInfo:nil repeats:YES];
        [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
        self.timer = timer ;
    
    }
    
    #pragma mark 删除定时器
    -(void) removeTimer{
        [self.timer invalidate];
        self.timer = nil;
    }
    

    3.5、手动切换 和 自动轮播 的切换

    -(void) scrollViewWillBeginDragging:(UIScrollView *)scrollView{
        [self removeTimer];
    }
    
    #pragma mark 当用户停止的时候调用
    -(void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
        [self addTimer];
    
    }
    
    #pragma mark 设置页码
    -(void) scrollViewDidScroll:(UIScrollView *)scrollView{
        int page = (int) (scrollView.contentOffset.x/scrollView.frame.size.width+0.5)%self.newses.count;
        self.pageControl.currentPage =page;
    }
    

    3.6、自动轮播切换到下一个View的方法

    -(void) nextpage{
        NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    
        NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:YYMaxSections/2];
        [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    
        NSInteger nextItem = currentIndexPathReset.item +1;
        NSInteger nextSection = currentIndexPathReset.section;
        if (nextItem==self.newses.count) {
            nextItem=0;
            nextSection++;
        }
        NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
    
        [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
    }
    

    四、Demo下载地址

    Demo下载地址:这是一个我的iOS交流群:624212887,群文件自行下载,不管你是小白还是大牛热烈欢迎进群 ,分享面试经验,讨论技术, 大家一起交流学习成长!希望帮助开发者少走弯路。——点击:加入

    如果觉得对你还有些用,就关注小编+喜欢这一篇文章。你的支持是我继续的动力。

    下篇文章预告:使用UICollectionView实现一个列表头部拉伸效果的案例

    文章来源于网络,如有侵权,请联系小编删除。

    相关文章

      网友评论

        本文标题:iOS开发UI篇--使用UICollectionView实现一个

        本文链接:https://www.haomeiwen.com/subject/pjaqqqtx.html