iOS中UICollectionView使用

想當初學習iOS時,對這個看得不是那么重,同事們也告訴我這個可以不用掌握。可是到實際項目中就不這么想了,特別是知道怎么用了之后,無論到哪感覺都需要使用它。個人覺得UICollectionView還是要掌握一下,雖然一大堆按鈕按鈕的確可以實現(xiàn),但是再怎么樣還是沒有UICollectionView好用。
首先說一下UICollectionView是什么,在什么場合下用。UICollectionView我們常稱之為網(wǎng)格表視圖,展示上就是iPhone手機APP列表,如下圖所示。

Snip20160619_1.png

它在某些方面和UITableView很像,但又有很大的不同。下面我們來說說怎么做吧。

首先我們自定義一個UICollectionViewCell,和自定義UITableViewCell差不多,只是這里定義的是一個網(wǎng)格。

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //設置CollectionViewCell中的圖像框
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetWidth(self.frame))];
        [self addSubview:self.imageView];
        
        //文本框
        self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxX(self.imageView.frame) + 10, CGRectGetWidth(self.frame), 15)];
        self.label.font = [UIFont systemFontOfSize:13];
        self.label.textColor = Color(102, 102, 102);
        self.label.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.label];
        
    }
    return self;
}

之后我們就可以定義UICollectionView了

#pragma mark  設置CollectionView的的參數(shù)
- (void) initCollectionView
{
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    //設置CollectionView的屬性
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 220, DeviceSize.width, DeviceSize.height - 220) collectionViewLayout:flowLayout];
    self.collectionView.backgroundColor = Color(238, 238, 238);
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    self.collectionView.scrollEnabled = YES;
    [self.view addSubview:self.collectionView];
    //注冊Cell
    [self.collectionView registerClass:[MedalCell class] forCellWithReuseIdentifier:@"cell"];
}

這里需要注意一下,UICollectionView的布局方式需要定義一下,UICollectionViewScrollDirectionVertical是垂直布局方式;還有一點就是使用自定義的UICollectionViewCell時不僅僅導入頭文件就可以了,還需要在UICollectionView注冊一下。

下面就是UICollectionView的Delegate和DataSource。

#pragma mark  設置CollectionView的組數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

#pragma mark  設置CollectionView每組所包含的個數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.medals.count;
    
}

#pragma mark  設置CollectionCell的內(nèi)容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identify = @"cell";
    MedalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identify forIndexPath:indexPath];
    Medal *p = self.medals[indexPath.row];
    cell.medal = p;
    return cell;
}



#pragma mark  定義每個UICollectionView的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return  CGSizeMake(DeviceSize.width /3,(DeviceSize.width / 3));
}



#pragma mark  定義整個CollectionViewCell與整個View的間距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0, 0, (self.medals.count / 3 - 2) * DeviceSize.width / 3, 0);//(上、左、下、右)
}


#pragma mark  定義每個UICollectionView的橫向間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 0;
}

#pragma mark  定義每個UICollectionView的縱向間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 0;
}

#pragma mark  點擊CollectionView觸發(fā)事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    Medal *p = self.medals[indexPath.item];
    NSLog(@"---------------------");
}

#pragma mark  設置CollectionViewCell是否可以被點擊
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

這里我就不一一解釋了,代碼注釋的應該比較詳細了,我是用模型封裝數(shù)據(jù)的,一個模型就是一個網(wǎng)格。點擊事件我也放進去了,不需要的話可以刪掉。整體上和UITableView很像,因為布局方式的不同造成了差異。此處代碼的效果圖如下,可以上下滑動的。

Snip20160619_2.png

好了UICollectionView到此就結(jié)束了,是不是比堆按鈕簡單點。我想UICollectionViewController也應該會了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 翻譯自“Collection View Programming Guide for iOS” 0 關(guān)于iOS集合視...
    lakerszhy閱讀 3,926評論 1 22
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,257評論 4 61
  • 因為要結(jié)局swift3.0中引用snapKit的問題,看到一篇介紹Xcode8,swift3變化的文章,覺得很詳細...
    uniapp閱讀 4,537評論 0 12
  • 筆記整理于2016.11.30老師:易仁永澄地點:朝夕日歷課程時間:2016.11.28 一、為什么要做回顧 為什...
    Wynonna閱讀 489評論 0 1
  • 時光飛逝,夏似乎還未走遠,卻已置身秋高。擋不住滾滾的年輪,抹不平深深的皺紋,忘不了滿滿的回味,訴不盡濃濃的友情。愿...
    山之尖閱讀 257評論 0 1