你的位置:首页 > 软件开发 > 操作系统 > CollectionView就是这么简单!

CollectionView就是这么简单!

发布时间:2016-05-28 11:00:06
UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类。使用UICollecti ...

UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类。

使用UICollectionView 必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。

 

1.首先我们创建CollectionView(代码如下)

 

- (void)initCollectionView

{

// 我是用masnory进行屏幕适配的 这个坐标你也可以直接给出。

    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {

      make.top.equalTo(self.view.mas_bottom).offset(0);

        make.top.offset(0); //顶部间隔

        make.left.offset(0);//左边

        make.bottom.offset(-10);//底部

        make.right.offset(0);//右边

 // 

    }];

    self.collectionView.backgroundColor = [UIColor colorWithRed:241 green:241 blue:241 alpha:1];//背景色

    self.collectionView.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);//插入内容的位置 与边缘

    

    self.collectionView.delegate = self;代理协议

    self.collectionView.dataSource = self;数据源协议

    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

    创建新的cell

}

2.创建collectionview 必须要添加 UICollectionViewFlowLayout

//使用懒加载的方法

- (UICollectionView *)collectionView

{

    if (!_collectionView)

    {

        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

        flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH - 50)/4, (SCREEN_WIDTH - 50)/4 + 20);

        flowLayout.minimumLineSpacing = 10; 每排的间隔

        flowLayout.minimumInteritemSpacing = 10; 每行的间隔

        

        self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];

        [self.view addSubview:self.collectionView];

    }

    return _collectionView;

}

3.接下来 我们需要新建一个类(CollectionviewCell)

 

cell.h 文件中呢  我们把需要展示的内容 都有属性展示出来

比如 展示一个图片 和文字

@property (nonatomic, strong) UIImageView *familyImageView;

@property (nonatomic, strong) UILabel *titleLabel;

所以  接下来在.m中写这2个控件(我的坐标都是masnory适配  也可以直接给出)

-(instancetype)initWithFrame:(CGRect)frame

{

         if (self = [super initWithFrame:frame])

    {

        self.familyImageView=[[UIImageView alloc] init];

         self.titleLabel = [[UILabel alloc] init];

        self.titleLabel.font = [UIFont systemFontOfSize:13];

        self.titleLabel.textAlignment=NSTextAlignmentCenter;

        [self.contentView addSubview:self.titleLabel];

        [self.contentView addSubview:self.familyImageView];

//make  是masnory的一个属性 用于定义坐标位置

        [self.familyImageView mas_makeConstraints:^(MASConstraintMaker *make)

         {

             make.top.offset = 10;

             make.left.offset = 10;

             make.bottom.equalTo(self.titleLabel.mas_top).offset(-10);

             make.right.offset = -10;

         }];

        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make)

         {

             make.left.offset = 0;

             make.bottom.offset = 0;

             make.right.offset = 0;

             make.height.offset = 20;    

         }];

    }

    return self;

}

 4.前提工作都基本做完了  接下来 就是实现协议代理的 方法 用来展示内容 显示在屏幕中

//区数

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

    return 1;

}

 //每个区显示的小模块

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

    return 18;

}

 cell 上面展示的内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

     CollectionViewCell*cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    注意上面这个CollectionViewCell 是你新建的cell  名称是一样的

 

    下面就是展示你需要展示的内容了 直接用cell 打点调用就可以用属性了。

    cell.familyImageView.image = _arr[indexPath.row];这是我之前定义的一个图片

    cell.titleLabel.text=nameArr[indexPath.row];label

     

 

 

    return cell;

}

  cell的点击方法    

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

{

 

}

 

大致就是这些了,愿猿友们早日迎娶白富美,走向人生peak!

 


原标题:CollectionView就是这么简单!

关键词:ie

ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。