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