iOS UICollectionView 实现轮播图

标签: ios 轮播图
3743人阅读 评论(0) 收藏 举报
分类:

利用UICollectionView 实现轮播图 :



<span style="font-size:24px;">//
//  ViewController.m
//  CollectionPhotosView
//
//  Created by 帝炎魔 on 16/5/30.
//  Copyright © 2016年 帝炎魔. All rights reserved.
//

/**
 *  UICollectionView  实现轮播图的实现
    将定时器NSTimer 加入到mainrunloop中实现定时轮播
 *
    CollectionCell 和tableViewCell 用法不太一样, CollectionCell 需要注册, 告诉系统这种标识对应的cell是什么类型的cell, 如果缓冲池中没有, 自动创建这种类型的cell
 
 *
 */

#import "ViewController.h"
#import "News.h"
#import "YYCell.h"

#define kWidth [UIScreen mainScreen].bounds.size.width
#define kHeight [UIScreen mainScreen].bounds.size.height

#define MaxSections 100

@interface ViewController () <UICollectionViewDelegate, UICollectionViewDataSource>





@property (nonatomic, strong) UICollectionView *collectionView;

@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, strong) NSMutableArray *news;

@property (nonatomic, strong) NSTimer *timer;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.collectionView];
    
    [self.view addSubview:self.pageControl];
    
    // 注册cell
    [self.collectionView registerClass:[YYCell class] forCellWithReuseIdentifier:@"Cell"];

    
    // 添加定时器 实现轮播功能呢
    [self addTimer];
    
    
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)addTimer
{
    _timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:NULL repeats:YES];
    
}

// 定时器的内容
- (void)nextPage
{
    // 获取当前的 indexPath
    NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    NSIndexPath *currentIndexPathSet = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:MaxSections / 2];
    
    [self.collectionView scrollToItemAtIndexPath:currentIndexPathSet atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    
    // 设置下一个滚动的item的indexPath
    NSInteger nextItem = currentIndexPathSet.item + 1;
    NSInteger nextSection = currentIndexPathSet.section;
    if (nextItem == self.news.count) {
        // 当item等于轮播图的总个数的时候
        // item等于0, 分区加1
        // 未达到的时候永远在50分区中
        nextItem = 0;
        nextSection ++;
    }
    // NSLog(@"----%ld---%ld", nextItem, nextSection);
    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
    
}

#pragma mark ----ScrollView 代理方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 添加定时器
    [self addTimer];
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 移除定时器
    [self.timer invalidate];
    self.timer = nil;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 滚动时 动态设置 pageControl.currentPage
    int page = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5) % self.news.count;
    self.pageControl.currentPage = page;
}

#pragma mark ---- 创建集合视图

// 创建集合视图
- (UICollectionView *)collectionView
{   
    if (!_collectionView) {
        // 创建UICollectionViewFlowLayout约束对象
        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
        // 设置item的Size大小
        flowLayout.itemSize = CGSizeMake(kWidth, kHeight);
        // 设置uicollection 的 横向滑动
        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        flowLayout.minimumLineSpacing = 0;
        
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, kWidth, kHeight) collectionViewLayout:flowLayout];
        
        // 设置代理
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        
        // 设置不展示滑动条
        _collectionView.showsHorizontalScrollIndicator = NO;
        // 设置整页滑动
        _collectionView.pagingEnabled = YES;
        _collectionView.backgroundColor = [UIColor clearColor];

        
        // 设置当前collectionView 到哪个位置(indexPath row 0 section 取中间(50个))
        [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:MaxSections / 2] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
        
       
        
    }
    return _collectionView;
    
}

- (UIPageControl *)pageControl
{
    if (!_pageControl) {
        UIPageControl *pageControl = [[UIPageControl alloc] init];
        pageControl.center = CGPointMake(kWidth / 2, kHeight - 100);
        pageControl.numberOfPages = _news.count;
        pageControl.bounds = CGRectMake(0, 0, 150, 40);
        pageControl.enabled = NO;
        pageControl.pageIndicatorTintColor = [UIColor blueColor];
        pageControl.currentPageIndicatorTintColor = [UIColor redColor];
        [self.view addSubview:pageControl];
        _pageControl = pageControl;
    }
    return _pageControl;
}

#pragma mark --- 数据源
- (NSMutableArray *)news
{
    if (!_news) {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"resource.plist" ofType:nil];
        NSArray *arr = [NSArray arrayWithContentsOfFile:path];
        _news = [NSMutableArray array];
        for (NSDictionary *dic in arr) {
            [_news addObject:[News newsWithDict:dic]];
        }
    }
    return _news;
}


#pragma mark --- 实现collectionView代理方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return MaxSections;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.news.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *string = @"Cell";
    YYCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:string forIndexPath:indexPath];
    if (!cell) {
        cell = [[YYCell alloc] init];
    }
    cell.news = self.news[indexPath.row];
    return cell;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
</span>



查看评论

iOS中 UICollectionView图片浏览(高性能轮播器)

//自定义UICollectionViewFlowLayout布局 需要继承UICollectionViewFlowLayout  图片浏览效果 需要继承UICollectionViewFlowLa...
  • LG_CodeMachine
  • LG_CodeMachine
  • 2016-06-06 12:27:22
  • 1248

iOS 使用UICollectionView实现图片轮播

1.因为UICollectionView继承于UIScrollView,所以我们可以使用UICollectionView来实现图片的无限轮播,当图片数量增加UICollectionView可以帮助我们...
  • u011312237
  • u011312237
  • 2017-04-21 14:02:56
  • 860

[iOS] UICollectionView实现图片水平滚动

首先先加入一些资源文件: 先建立一个 xcassets 文件,放入图片:  再建立一个plist文件,写入与图片对应的内容: 在ViewController中读取 plist 到词典中:  @...
  • u010850094
  • u010850094
  • 2016-09-19 14:13:22
  • 3619

iOS 使用UICollectionView实现轮播图

一般来说实现轮播图的基础控件有两个,UIScrollView或UICollectionView,二者选一,我更愿意用UICollectionView,至于原因,读者们发挥想象力吧,我只是在看轮播图的时...
  • Mo_Mo123
  • Mo_Mo123
  • 2017-09-03 18:09:22
  • 384

IOS项目之UICollectionView中Item布局偏移问题

在使用UICollectionView做九宫格布局的时候,或多或少都会出现一些不尽人意的问题。 图片是从网络上找来的,我自己懒得截图了,文章内容确是我自己写的。请不要有争议。 看两...
  • u011290399
  • u011290399
  • 2015-09-10 10:08:51
  • 5911

使用UICollectionView实现图片轮播

1.因为UICollectionView继承于UIScrollView,所以我们可以使用UICollectionView来实现图片的无限轮播,当图片数量增加UICollectionView可以帮助我们...
  • zxm13848
  • zxm13848
  • 2015-10-14 16:28:28
  • 3349

IOS开发UI篇--使用UICollectionView实现一个无限轮播的案例

一、案例演示本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播。知识点主要集中在UICollectionView和NSTimer的使用。 二、知识储备2.1、UICollectionV...
  • yixiangboy
  • yixiangboy
  • 2015-11-07 21:59:07
  • 5616

轮播图+tableView的问题

自学iOS的过程中,会遇到各种问题,这几天也遇到了一个开发中难免会遇到的问题:轮播图+tableView的时候,轮播图应该怎么设计才好呢?错误的设计思路: 一开始吧,我觉得tableView有he...
  • Feng512275
  • Feng512275
  • 2017-04-12 14:38:36
  • 846

使用UIcollectionView实现图片轮播

使用UIcollectionView实现图片轮播 此处使用collectionView的偏移特性实现图片的轮播功能,其实挺简单 下面实现的完整代码: DKAdvertisementView....
  • lgx_admin
  • lgx_admin
  • 2016-03-30 16:56:30
  • 465

UICollectionView/UIScrollView滚动到指定的行

// 如果调用scrollToItemAtIndexPath不起作用 // 需要先调用layoutIfNeeded方法 [self layoutIfNeeded]; [_che...
  • yaoliangjun306
  • yaoliangjun306
  • 2016-12-20 14:10:05
  • 5088
    个人资料
    专栏达人
    等级:
    访问量: 15万+
    积分: 2089
    排名: 2万+
    博客专栏
    微信思密达
    最新评论