uicollectionview 流视图手写实现

因为做的是图片浏览及投票的一个工具APP，所有需要用到类似Android 里面得GridView 控件。本来打算使用UITableView 控件来做，但是后来发现在IOS6.0以后，apple提供了一个UICollectionView控件，数据源及委托都与UITableView 类似，控件类型也与GridView类似，所以就改用UICollectionView来展示图片信息啦。

自定义UICollectionView

先来看看UICollectionView怎么用：

1，自定义出UICollectionViewCell

    创建一个 WorkCell类，此类继承UICollectionViewCell

1 2 3 4 5 6 7 8 9 10

#import <UIKit/UIKit.h>   #import "Works.h"   @ interface WorkCell : UICollectionViewCell   @ property ( weak , nonatomic ) IBOutlet UIImageView * img ;   - ( void ) init_UI : ( Works * ) work ; @ end

在使用创建一个XIB文件，设置xib的文件所属以及控件输出；

其实，你完全可以不用xib文件，纯代码创建一个自定义个WorkCell.

 

 

2，创建UICollectionView

我是使用代码创建，你可以使用xib创建或者storyboard 创建。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// KCellID为宏定义 @"CollectionCell"      UICollectionViewFlowLayout * aFlowLayout = [ [ UICollectionViewFlowLayout alloc ] init ] ;      //根据苹果官网的API可知 uicollectionView必须要有一个布局，如果使用xib创建会默认创建一个流式布局。      [ aFlowLayout setItemSize : CGSizeMake ( 150 , 150 ) ] ; //设置每个ITEM的宽和高      [ aFlowLayout setScrollDirection : UICollectionViewScrollDirectionVertical ] ;      workListView = [ [ UICollectionView alloc ] initWithFrame : CGRectMake ( 0 , 37 , self . view . frame . size . width , self . view . frame . size . height - 49 - 37 - 20 - 44 ) collectionViewLayout : aFlowLayout ] ;      NSLog ( @ "height===>%f" , self . view . frame . size . height ) ;    [ workListView setBackgroundColor : [ UIColor whiteColor ] ] ; //此处非常重要，此时是注册一个自定义的UICollectionViewCell    [ workListView registerClass : [ WorkCell class ] forCellWithReuseIdentifier : KCellID ] ;      workListView . delegate = self ;      workListView . dataSource = self ;      [ self . view addSubview : workListView ] ;      [ self initData ] ;      [ self initEvent ] ;

到这里已经实现了UICollectionView和UICollectionViewCell的绑定了，下面就是委托和数据源的处理，跟UITableView类似。

1 2 3

@ interface RecomViewController ( ) < UICollectionViewDelegate , UICollectionViewDataSource > //实现委托 @ end

实现委托的方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

#pragma action - ( NSInteger ) collectionView : ( UICollectionView * ) collectionView numberOfItemsInSection : ( NSInteger ) section {      // 每个Section的item个数      return works_data . count ; }   - ( UICollectionViewCell * ) collectionView : ( UICollectionView * ) collectionView cellForItemAtIndexPath : ( NSIndexPath * ) indexPath {        WorkCell * cell = ( WorkCell * ) [ collectionView dequeueReusableCellWithReuseIdentifier : KCellID forIndexPath : indexPath ] ;      //NSLog(@"cell===>%@",cell);      // 图片的名称        // 设置label文字 //    cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.row,(long)indexPath.section];      Works * work_temp = [ works_data objectAtIndex : indexPath . row ] ;      //NSLog(@"currentWork---->%@",work_temp.workShort);        // 设置imageView的图片      [ cell . img setContentMode : UIViewContentModeScaleAspectFit ] ;      [ cell . img setImageWithURL : [ NSURL URLWithString : work_temp . workShort ] placeholderImage : [ UIImage imageNamed : @ "placeholder.png" ] ] ;        return cell ;   }   // 定义上下cell的最小间距 - ( CGFloat ) collectionView : ( UICollectionView * ) collectionView layout : ( UICollectionViewLayout* ) collectionViewLayout minimumLineSpacingForSectionAtIndex : ( NSInteger ) section {      return 5 ; }   // 定义左右cell的最小间距 - ( CGFloat ) collectionView : ( UICollectionView * ) collectionView layout : ( UICollectionViewLayout* ) collectionViewLayout minimumInteritemSpacingForSectionAtIndex : ( NSInteger ) section {      return 5 ; }   //listener the cell click - ( void ) collectionView : ( UICollectionView * ) collectionView didSelectItemAtIndexPath : ( NSIndexPath * ) indexPath {      Works * w = [ works_data objectAtIndex : indexPath . row ] ;      WorkDetailControllerViewController * detail = [ [ WorkDetailControllerViewController alloc ] init ] ;      detail . currentWork = w ;      //BIDAppDelegate *del=(BIDAppDelegate *)[UIApplication sharedApplication].delegate;      //[del.mainVc.votesNav pushViewController:detail animated:NO];      [ self . navigationController pushViewController : detail animated : YES ] ;   }   //监听下拉加载更多 - ( void ) scrollViewDidScroll : ( UIScrollView * ) scrollView {      if ( scrollView . contentOffset . y == ( scrollView . contentSize . height - scrollView . frame . size . height ) ) {          NSLog ( @ "load more data....allcount===> %d" , allCount ) ;          if ( ! isLoadOver ) {              [ self reload : YES ] ;          }        } }

你可以实现下拉更新及加载更多，下拉更新我使用apple api 里面自带的。

1 2 3 4 5 6 7 8 9 10 11

//bind the event - ( void ) initEvent {      refreshController = [ [ UIRefreshControl alloc ] init ] ; //初始化一个下拉更新      [ refreshController setTintColor : [ UIColor grayColor ] ] ;      [ refreshController addTarget : self action : @ selector ( pullToRefresh ) forControlEvents : UIControlEventValueChanged ] ;      workListView . alwaysBounceVertical = YES ; //设置监听事件      [ workListView addSubview : refreshController ] ;      //for button ,next will use tabbarcontroller to change the view;      [ uploadnew addTarget : self action : @ selector ( changeToHot ) forControlEvents : UIControlEventTouchDown ] ;      [ hot addTarget : self action : @ selector ( changeToNew ) forControlEvents : UIControlEventTouchDown ] ; }