UICollectionView 具體解說學習

UICollectionView 和UITableView很是像,是APPLE公司在iOS 6後推出的用於處理圖片這類UITableView 佈局困難的控件,和UITableView 同樣,它也有本身的Datasource和delegate。如下具體說下像這種方式的效果.
首先來看看UICollectionView 的DataSource。objective-c

@protocol UICollectionViewDataSource <NSObject>
@required

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

@optional

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

@end

可以看到和UITableView 同樣,它有兩個必須實現的方法:xcode

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section//有多少個item -dequeueReusableCellWithReuseIdentifier:forIndexPath: - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;//每個長什麼樣,它要使用dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:來生成

其餘的兩個是分別有幾部分cell,和UITableView中的numberOfSection同樣.默認是1個,viewForSupplementaryElementOfKind這個則是用來作出表頭和表尾的。ruby


UICollectionViewDelegate 它的代理方法全是可選的,經常且主要用到的就是:markdown

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;

這是代表選中後要作什麼.
如下來實現一下:
首先在自定義的頭文件里加入一個UIColletionView的屬性(比直接用實例變量好,具體請看Effective objective-c的學習筆記1)配置各類屬性,而後加到self.view上。佈局

@property (nonatomic, strong) ZJCollectionViewFlowOut *collectionViewFlowLayout;
self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:self.collectionViewFlowLayout];
    _collectionView.backgroundColor = [UIColor clearColor];
    _collectionView.dataSource = self;
    _collectionView.delegate = self;
    [self.view addSubview:_collectionView];

再設置viewController 遵照delegate和dataSource;post

@interface ZJCollectionViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>
@end

這樣再xcode 上新的一行輸入- collection就會出現很是多collectionView的提示了.
實現:collectionView:cellForItemAtIndexPath:
因爲這種方法要用到前面說的那個註冊的cell因此先建一個UICollectionViewCell,順便搞定那個FlowLayout.
Cell的內容固然可以自定義的了.
在viewDidLoad中建立CollectionView的如下加上:學習

[_collectionView registerClass:[ZJCollectionViewCell class] forCellWithReuseIdentifier:kCellReuseIdentifier];
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ZJCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellReuseIdentifier forIndexPath:indexPath];
    NSString *image = @"201502192144014806.jpg";
    cell.userImageView.image = [UIImage imageNamed:image];
    return cell;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.pictureArray.count;
}

在viewDidLoad中collectionView建立以前要建立那個佈局的
collectionViewFlowLayout 對象.ui

 self.collectionViewFlowLayout = [[ZJCollectionViewFlowOut alloc]init]; 

當中在collectionViewFlowLayout裏面是這種:atom

spa

- (id)init { if (self = [super init]) { self.minimumInteritemSpacing = 1.0;//item 之間的行的距離 self.minimumLineSpacing = 0.0;//item 之間豎的距離 self.itemSize = (CGSize){[UIScreen mainScreen].bounds.size.width/3,[UIScreen mainScreen].bounds.size.width/3}; // self.sectionInset = UIEdgeInsetsMake(4, 4, 4, 4); 這個是設置一個section的距離上下上左下右間距。

} return self; }

得出的結果例如如下圖:
這裏寫圖片描寫敘述 這是一個簡單的UICollectionView的展現,時間很少。有空再具體點

相關文章
相關標籤/搜索