IOS UICollectionView (Storyboard篇)

今天闲下来突然想把废弃的博客重拾，就首先记录一下学习ios6之后的一个闲控件：collectionview了。

个人觉得学习collectionview的时候做一个简单的日历是最容易掌握这个控件的。首先贴一个简单日历的效果图：

额－ －测试的时候多按了几下把日期直接跳到2021年了，不管鸟！（后面还发现忘记在头加上星期树了，暂时不管了，只是学习练手罢了）

它跟tableview极其相识，由header，cell以及foot组成。

首先在拖一个UICollectionViewController到storyboard中，然后然后分别新建两个继承UICoellctionCell的CocoaTouchClass分别命名为：MyCell以及CellNil(这个两个是collection的cell，第一个用来做填充日历中的日期，第二个用来做空白的cell用来填充每个月前面几天的空白日期);

然后再新建一个继承UICollectionViewController的CocoaTouchClass命名为MyView.

由于我是做一个日历，我需要用到collection来显示当前月份以及两个按钮用来跳转月份，所以我还新建了一个继承UICollectionReusableView的cocoatouchclass命名为MyHeader.

建完需要的累之后，就到了把控件跟累配对的步骤了：

选择当前的viewcontroller，在customclass中的class中填上之前建的类：MyView.如图：

然后选中collection view把item设为2，如图：

到了这部就会出现两个cell，我把第一个cell命名为了cell2（不要在意这些细节），第二个我命名为cellnil（这个是空白的）。

然后把cell2的identifier的选项写上cell2(- -真的不要在意这些细节),

再来是像之前设置controller一样，设置cell2的class，写成MyCell.

第二个cellNil的设置也是一样的。

接下来到了代码部分了：下面贴上显示collectionview的核心代码了：

//返回section的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
#warning Incomplete method implementation -- Return the number of sections
    return 1;
}

这里返回的是1，因为为只显示了一个月份的信息；

//返回section中的cell个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
#warning Incomplete method implementation -- Return the number of items in the section
    return [Tool getDaysOfMonth:year withMonth:month] + [Tool getWeekOfFirstDayOfMonth:year withMonth:month];
}

//返回cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell ;
    
//     Configure the cell
    if (indexPath.row < [Tool getWeekOfFirstDayOfMonth:year withMonth:month]) {
//        cell.myText.text = @"";
//        cell.backgroundColor = [UIColor clearColor];
//        cell.myText.backgroundColor = [UIColor clearColor];

        cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellNil" forIndexPath:indexPath];
    }else{
        cell = [collectionView dequeueReusableCellWithReuseIdentifier:mycell forIndexPath:indexPath];
        cell.myText.text = [[NSString alloc] initWithFormat:@"%d",indexPath.row - [Tool getWeekOfFirstDayOfMonth:year withMonth:month] + 1];
        cell.layer.masksToBounds = YES;
        cell.layer.cornerRadius = 22;
        
        cell.myText.layer.masksToBounds = YES;
        cell.myText.layer.cornerRadius = 13;
    }

代码中返回section的个数是某个月的天数加上那个月的第一天是星期几得到的数值。

做完这些后会发现其实每行cell的效果并不理想，还需要设置间隔：

//返回cell的宽和高
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    NSInteger numberOfMaigin = 9;
    CGFloat with = floorf((collectionView.frame.size.width - CellMargin * numberOfMaigin) / DaysPerWeek);
    CGFloat height = with;
    
    return CGSizeMake(with, height);
}

//每行cell之间的间隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return CellMargin;
}


//返回头尾
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if (kind == UICollectionElementKindSectionHeader) {
        MyHeader *myHeader = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"myheader" forIndexPath:indexPath];
        
        myHeader.myTitle.text = [[[NSString alloc] initWithFormat:@"%d",year]
//                                 stringByAppendingString:[NSString stringWithFormat:@"年%d月",month]];
        myHeader.myTitle.text = [[NSString alloc] initWithFormat:@"%d年%d月",year,month];
        
        return myHeader;
    }
    else
        return nil;
}

上面的代码还顺便把header的设置也天出来了。

代码中还有一个工具类没展示，这个类用来得到日历所需要的信息。

本来蛮有激情写写博客的，但发现一出手就不知道写了什么，写的乱七八糟的；那就当我提供一个demo来给大家看好了，下面是源码地址：

http://download.csdn.net/detail/u014102077/8483683