征服 iOS 开发 iOS---Xcode 的使用@IT·互联网

UICollectionView知道这些就够用了

2017-05-10  本文已影响79人  胡胡LoL

UICollectionView的使用

1.要点说明

2.代码

/******************************** UIViewController.h  **************************/
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>{

}
@property (strong, nonatomic)UICollectionView *collectionView;

@end

/******************************** UIViewController.m  **************************/

#import "UIViewController.h"
#import "UICollectionHeaderView.h"
#import "UICollectionFooterView.h"
#import "UICollectionViewCell.h"

@interface UIViewController ()

@end

//cell、header、footerView 标识
static NSString *cellIdentifier = @"UICollectionViewCell";
static NSString *headerIdentifier = @"UICollectionHeaderView";
static NSString *footerIdentifier = @"UICollectionFooterView";

@implementation UIViewController

- (void)viewDidLoad
{
      [super viewDidLoad];
     //创建布局对象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //flowlaout的属性,确定是水平滚动,还是垂直滚动
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    //接下来就在创建collectionView的时候初始化,带上布局方法.
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 200, 320, 280) collectionViewLayout:flowLayout];
    self.collectionView.backgroundColor = [UIColor whiteColor]; 
   //添加View 上面
    [self.view addSubview:self.collectionView];
   
   //指定数据源和代理
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;

   

**注册方法分2种:
  1.代码创建的方式
  2.xib 方式创建**


    //collectionCell的注册
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];

    //collection头视图的注册。  
**注意:和TableView不同,头视图和尾部视图也得注册**
    [self.collectionView registerClass:[UICollectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
    [self.collectionView registerClass:[UICollectionFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:footerIdentifier];

      /*另一种方式,从Xib上注册
    UINib *nib = nil;
    nib = [UINib nibWithNibName:cellIdentifier bundle:nil];
    [self.collectionView registerNib:nib
                 forCellWithReuseIdentifier:cellIdentifier];
    //注册headerview和footerview
    nib = [UINib nibWithNibName:headerIdentifier bundle:nil];
    [self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
    nib = [UINib nibWithNibName:footerIdentifier bundle:nil];
    [self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier];
    
 
}

**遵守的协议:**
 **UICollectionViewDataSource/Delegate/DelegateFlowLayout**

#pragma mark  UICollectionViewDataSource/Delegate

//1.返回多少组(section),此方法不写默认是1组(跟tableview类似)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

#pragma mark required
//2.每组返回多少个Item,这个Item类似tableview中的cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

//3.返回cell,这里构建Item(即cell)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //这里是自定义的cell
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

#pragma mark  optional
//4.自定义header/footerView
// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
//这里返回的view必须要从dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:这个方法中获取,而且根据不同的kind作为headerView或者footerView,切记:collectionView中头部视图和尾部视图也需要注册
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = nil;
    if (UICollectionElementKindSectionHeader == kind) {
        //这里是自定义的头视图
        UICollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor whiteColor]; 
        return headerView;
    }
    if (UICollectionElementKindSectionFooter == kind {
        //这里是自定义的尾视图               
        UICollectionFooterView *footerView = collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
        footerView.backgroundColor = [UIColor whiteColor]; 
        return footerView;
    }
    return reusableView;
}

#pragma mark --UICollectionViewDelegateFlowLayout

//5.布局确定每个Item 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{    
    return CGSizeMake(100, 100);
}

//6.布局确定每个section内的Item距离section四周的间距 UIEdgeInsets
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(10, 10, 10, 10);
}

//7.返回每个section内上下两个Item之间的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10; 
}
//8.返回每个section内左右两个Item之间的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}

//9.返回headerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    CGFloat width = CGRectGetWidth(collectionView.bounds);
    CGFloat height = width + 86;
    return CGSizeMake(width, height);
}

//10.返回footerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    CGFloat width = CGRectGetWidth(collectionView.bounds);
    CGFloat height = 144;
    return CGSizeMake(width, height);
}

#pragma mark --UICollectionViewDelegate

//11.UICollectionView被选中时调用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell * cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor blackColor];
    NSLog(@"item======%ld",(long)indexPath.item);
    NSLog(@"row=======%ld",(long)indexPath.row);
    NSLog(@"section===%ld",(long)indexPath.section);
}

//返回这个UICollectionView是否可以被选择
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

希望可以帮助到大家.......

上一篇下一篇

猜你喜欢

热点阅读