UICollectionView基本使用之实现App新特性页面

非常抱歉,在写这个之前有必要去稍微的介绍一下UICollectionView,当然大家可以直接看代码实现哈~~~~

UICollectionView初识
  • UICollectionView 是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可以通过自定义布局达到没有做不到只有想不到的效果,用法类似于UITableView
  • 既然类似UITableView,那么它也就自带了缓存机制,性能上也是没的说
  • 目前很多应用的很多页面,比如类似九宫格、类似tableView、类似ScrollView的图片轮播器等等效果都完全可能是使用的CollectionView展示的
  • 而且自从iOS9之后,苹果更是更新了它的API,通过设置它的一些代理方法,就可以轻松实现类似支付宝首页那种按钮拖拽移动换位的效果

综上所述:目前CollectionView已经大量入侵App,学会使用它而且要像使用UITableView使用一样熟练使用它是非常非常非常有必要的

实现新特性页面前的一些简单铺垫
  • 以前我们实现新特性页面无疑是使用的UIScrollview,它就像图片轮播器的效果差不多,只不过每一个imageView的尺寸变的跟屏幕尺寸一样大了
  • 普通的使用UIScrollview,那么就是需要展示几张图片就创建几个UIImageView,这样我们就会去思考如何让当前没有显示在眼前的imageView和UITableView的cell一样有缓存机制,让imageView复用呢
  • 带着上一个问题,就有了目前比较流行的使用3个或者2个UIImageView实现多张图片的轮播器效果,这样确实可以让imageView复用,但是缓存机制需要我们自己去实现
  • OK,在上述情况下,使用CollectionView实现轮播器效果就应运而生了,自带有缓存机制,而且也不需要我们自己写复杂的布局计算,直接使用系统提供的流水布局就可以了,下面开始上代码了

具体的代码实现

1)自定义一个继承自UICollectionViewController的类
LBNewFeatureViewController
2)由于collectionView的cell没有像tableView的cell一样里面自带一些子控件,所以我们还需要自定义一个继承自UICollectionViewCell的子类,
LBNewFetureCell里面添加一个UIImageView,用以展示新特性图片

@interface LBNewFetureCell ()
/** item上的图片 */
@property (nonatomic, weak)UIImageView *itemImageView ;
@end

3)一般情况下,新特性页面都是需要在当前版本号大于之前保存的版本号的时候展示,所以在外界需要使用到它,创建它的时候,我们就需要初始化它的layout

//一般我们都是在LBNewFetureViewController.m文件中模仿苹果
//就像我们在使用xib描述控制器view的时间,使用initWithNibName:...
- (instancetype)init
{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    //layout里面的属性设置直接影响的就是cell的相关属性
    // cell的尺寸就是由布局属性决定的
    layout.itemSize = [UIScreen mainScreen].bounds.size;
    //由于设置的是新特性页面,是需要左右滚动,而且页面之间没有间距
    layout.minimumLineSpacing = 0;
    layout.minimumInteritemSpacing = 0;
    layout.scrollDirection =  UICollectionViewScrollDirectionHorizontal;
    //让CollectionView使用我们经过配置的layout
    return [self  initWithCollectionViewLayout:layout];

}

4)对collectionView的一些基本配置

static NSString * const reuseIdentifier = @"newFeature";
- (void)viewDidLoad {
    [super viewDidLoad];
    //注册cell,collectionView的cell 只可以注册,不可以通过alloc init方法创建
    [self.collectionView registerClass:[LBNewFetureCell class] forCellWithReuseIdentifier:reuseIdentifier];
    //让collectionView支持翻页
    self.collectionView.pagingEnabled = YES;
    //让collectionView隐藏水平、垂直滚动条,这个可以根据对应需求自己设置
    self.collectionView.showsVerticalScrollIndicator = NO;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    //让collectionView隐藏弹簧效果
    self.collectionView.bounces = NO;

}

4)设置好layout之后,就需要跟tableview去实现它的相关数据源和代理方法,由于我们是继承UICollectionViewController,所以不再需要自己设置数据源、代理

#pragma mark <UICollectionViewDataSource>
//collectionView每组多少行,我们这里就需要一组,MaxItemCount是我定义的宏,就是新特性页面需要展示几个页面
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return MaxItemCount;
}
//这个方法和tabbleView里面的cellForRow方法一样
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    LBNewFetureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];

   // 这里算是一个关键,我给cell定义了一个index属性,目的是希望通过当前方法传递过来的indexPath,重写index的set方法去给对应的image赋值
   // 屏蔽具体的赋值操作,把这些操作封装到cell内部
    cell.index = (int)indexPath.item;

    return cell;
}
//这个方法就是当一个cell完全展示的时候调用,因为我们新特性页面一个cell就是一个页面,所以这个方法用到我们新特性页面是非常巧妙的
#pragma mark <UICollectionViewDelegate>
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
   //indexPathsForVisibleItems这个是collectionView返回给我们的一个数组
   //这个数组里面存放的就是当前展示在我们眼前的cell,我们是新特性页面,所以这个数组每次就只有一个cell
   //通过这个数组拿到它里面的唯一的一个对象,就是当前展示在我们眼前的新特性页面对应的cell
     NSIndexPath  *speIndexPath = collectionView.indexPathsForVisibleItems.lastObject;

   // 通过上面获得到的indexPath,我们拿到对应的cell
     LBNewFetureCell *newCell = (LBNewFetureCell *)[collectionView cellForItemAtIndexPath:speIndexPath];

   //判断当前展示的cell如果是新特性页面的最后一个页面,那么就执行控制器的跳转,跳转到应用的首页,一般都是tabBarController
    if (speIndexPath.item == (MaxItemCount - 1)) {
   //执行控制器跳转,cell专门提供给外界一个switchMainController方法,用做控制器跳转
        [newCell switchMainController];
    }
}

5)这个里面是自定义cell的一些实现
LBNewFetureCell.h

@interface LBNewFetureCell : UICollectionViewCell

/** item的索引 */
@property(nonatomic,assign)int index;
/**
 *  当cell滑动到最后一个时调用
 */
- (void)switchMainController;
@end

LBNewFetureCell.m

#import "LBNewFetureCell.h"

@interface LBNewFetureCell ()

/** item上的图片 */
@property (nonatomic, weak)UIImageView  *itemImageView ;

/** 跳转按钮 */
@property (nonatomic, weak) UIButton *switchBtn ;
@end


@implementation LBNewFetureCell

#pragma mark - 懒加载跳转按钮
- (UIButton *)switchBtn
{
    if (!_switchBtn) {
        UIButton *btn =[[UIButton alloc] init];
        [btn setBackgroundImage:[UIImage imageNamed:@"Start"] forState:UIControlStateNormal];
        //按钮自适应大小
        [btn sizeToFit];

        [btn addTarget:self action:@selector(switchBtnClick) forControlEvents:UIControlEventTouchUpInside];
        
        [self.contentView addSubview:btn];

        self.switchBtn = btn;
    }
    return _switchBtn;
}
#pragma mark - 懒加载cell的imageview
-(UIImageView *)itemImageView
{
    if (!_itemImageView) {
        UIImageView  *itemImageView=[[UIImageView alloc]init];
        _itemImageView = itemImageView;

        [self.contentView addSubview:_itemImageView];
    }
    return _itemImageView;
}
#pragma mark - 布局cell上面的子控件位置
- (void)layoutSubviews
{
    [super layoutSubviews];

     _itemImageView.frame = self.bounds;

    CGFloat centerX = self.bounds.size.width * 0.5;
    CGFloat centerY = CGRectGetMaxY(self.bounds) - 180;

    self.switchBtn.center = CGPointMake(centerX, centerY);

}
#pragma mark - 重写index的set方法
- (void)setIndex:(int)index
{
    _index = index;

    NSString *imageName = [NSString stringWithFormat:@"start%dBackground",index+1];

    self.itemImageView.image = [UIImage imageNamed:imageName];
    self.switchBtn.transform=CGAffineTransformMakeTranslation(0, self.bounds.size.height);
}
#pragma mark - 弹出跳转控制器按钮(动画效果)
- (void)switchMainController
{
    [UIView animateWithDuration:.8f delay:0 usingSpringWithDamping:.7f initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        //动画结束,Btn回归原始位置
        self.switchBtn.transform=CGAffineTransformIdentity;
    } completion:nil];
}
#pragma mark - 点击跳转控制器按钮
- (void)switchBtnClick
{
    //这里我没有采用拿到窗口去执行跳转的方法,采用的是发送了一个通知去进行跳转
    NSNotification *note=[NSNotification notificationWithName:@"switchMainController" object:self userInfo:nil];
    //发送通知
    [[NSNotificationCenter defaultCenter] postNotification:note];
}

OK,基本进行到这里,这个功能大致就实现了,UICollectionView还有很多很多东西没有涉及到,这里只是初识,后续还会对于这个进行稍微深入一点的使用讲解,感谢,希望大家都可以掌握这个强大控件的使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 一、健身必须尽早开始。 身体是革命的本钱,这一句话已经被无数人讲过,讲过之后,该怎样,还是怎样。这一句话已经成了一...
    西门吹饼阅读 303评论 0 0
  • (一) 还记得门前那颗小树么 它都高过房檐了 我们终于可以在一起了 (二) 我喜欢你 远望我的样子 更喜欢你走进我...
    指间执念阅读 813评论 5 9
  • 带嘉元去打排球,没有想到遇到了贵人。我本以为与我一样是学生家长,没想到是师母。等嘉元结束训练,看到满头大汗的样子,...
    小元子zz阅读 87评论 0 0
  • 优优宝贝: 今天在植物园玩得好嗨呀,虽然没去陪你玩,但是热心的亲友团现场直播了。感恩于老师和那些家长给了你们...
    晓寒iyoyo阅读 178评论 0 1