iOS网格的使用

首先我们先创建一个CollectionViewCell
然后我们在.h里写
@property (nonatomic,retain)UIImageView *imageView; // 显示图片
@property (nonatomic,retain)UILabel *titleLabel; // 显示文字
【iOS网格的使用】然后在.m里写

  • (UIImageView *)imageView{
    if (!_imageView) {
    _imageView = [[UIImageView alloc] initWithFrame:self.viewForFirstBaselineLayout.bounds];
    [self.contentView addSubview:_imageView];
    }return _imageView;
    }
  • (UILabel *)titleLabel{
    if (!_titleLabel) {
    _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.bounds) - 30, CGRectGetWidth(self.bounds), 30)];
    [self.contentView addSubview:_titleLabel];
    }return _titleLabel;
    }
最后我们先在viewcontroller里导入CollectionViewCell头文件
import "CollectionViewCell.h" @interface ViewController ()
@property (nonatomic,retain)NSDictionary *itemDic; // 承载一个item上面显示的图片和文字
@property (nonatomic,retain)NSMutableArray *allDataArray; // 成方所有的item上显示的内容,其实就是盛放小字典
@end
@implementation ViewController
  • (NSMutableArray *)allDataArray{
    if (!_allDataArray) {
    _allDataArray = [[NSMutableArray alloc]init];
    }return _allDataArray;
    }
  • (void)viewDidLoad {
    [super viewDidLoad];
    for (int i = 1; i < 20; i++) {
    NSDictionary *itemDic = [[NSDictionary alloc] initWithObjectsAndKeys: [NSString stringWithFormat:@"%d.jpg",i],@"imageName", [NSString stringWithFormat:@"我是第%d个妹子",i] ,@"textLable", nil]; [self.allDataArray addObject:itemDic];

    }
    self.navigationItem.title = @"github";
    // 由于初始化集合视图需要布局对象,所以我们才需要初始化布局对象,并且设置它的某些属性
    // 这个是系统提供的布局类,可以布局一些比较规则的布局。
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    // 设置每个item的大小,
    flowLayout.itemSize = CGSizeMake(120, 160);
    // flowLayout.itemSize = CGSizeMake(CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame));
    // 设置列的最小间距
    flowLayout.minimumInteritemSpacing = 10;
    // 设置最小行间距
    flowLayout.minimumLineSpacing = 15;
    // 设置布局的内边距
    flowLayout.sectionInset = UIEdgeInsetsMake(15, 15, 15, 15);
    // 滚动方向
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    // flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    // 如果未设置背景颜色是黑色设置背景颜色
    collectionView.backgroundColor = [UIColor whiteColor];
    // 设置代理
    collectionView.delegate = self;
    collectionView.dataSource = self;
    // [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CELL"];
    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"CELL"];
    [self.view addSubview:collectionView];
    }
// 返回分区数
  • (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
    }
// 每个分区多少个item
  • (NSInteger )collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _allDataArray.count;
    }
  • (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    // UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];
    // 取出每个item所需要的数据
    NSDictionary *dic = [_allDataArray objectAtIndex:indexPath.item];
    // 取出图片名称
    NSString *imageString = [dic objectForKey:@"imageName"];
    cell.imageView.image = [UIImage imageNamed:imageString];
    // 取出文字
    NSString *textString = [dic objectForKey:@"textLable"];
    cell.titleLabel.text = textString;
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/256.0 green:arc4random()%256/256.0 blue:arc4random()%256/256.0 alpha:1];
return cell;

}
// 点击图片的方法
  • (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"我点击了%ld图片!!!",indexPath.item + 1);
}

    推荐阅读