ios 集合视图(九宫格布局)

原创 2014年11月29日 17:18:10

利用UIViewController,UIView,UICollectionViewCell,通过重写UICollectionViewDelegate,UICollectionViewDelegateFlowLayout, 协议的一些方法实现(以及UICollectionViewDataSource)

1,在RootViewController里面

    //设置代理
    self.rtView.coll.dataSource = self;
    self.rtView.coll.delegate = self;
    //注册cell
    [self.rtView.coll registerClass:[myCell class] forCellWithReuseIdentifier:kCollCell];
    //在设置header时要用到
    //注册header
    [self.rtView.coll registerClass:[UICollectionReusableView class] 
       forSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
       withReuseIdentifier:kHeaderView];
    //注册footer
    [self.rtView.coll registerClass:[UICollectionReusableView class] 
       forSupplementaryViewOfKind:UICollectionElementKindSectionFooter 
       withReuseIdentifier:kFooterView];
//返回cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView 
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    myCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCollCell 
        forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:kColorChange green:kColorChange 
        blue:kColorChange alpha:1];
    return cell;
}
//设置header和footer
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView 
     viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)
     indexPath
{
    if (kind == UICollectionElementKindSectionHeader) {
        UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:
             UICollectionElementKindSectionHeader withReuseIdentifier:kHeaderView 
             forIndexPath:indexPath];
        header.backgroundColor = [UIColor yellowColor];
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 
             header.bounds.size.height)];
        label.text = @"哈哈";
        [header addSubview:label];
        return header;
    }else{
        UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:
            UICollectionElementKindSectionFooter withReuseIdentifier:kFooterView 
            forIndexPath:indexPath];
        return footer;
    }
    
}
2,在RootView里面

 

//视图布局
-(void)addAllViews
{
    //1,创建UICollectionViewFlowLayout
    //对cell进行布局控制
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //设置
    //1.1,设置大小
    flowLayout.itemSize = CGSizeMake(80, 100);
    //1.2,设置间距(如果给定的间距,无法满足屏幕宽度,设置无效)
    flowLayout.minimumInteritemSpacing = 10;
    //1.3,设置行间距
    flowLayout.minimumLineSpacing = 10;
    //1.4,设置滑动方向
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //1.5,heater
    flowLayout.headerReferenceSize = CGSizeMake(self.bounds.size.width, 30);
    //1.6,footer
    flowLayout.footerReferenceSize = CGSizeMake(self.bounds.size.width, 100);
    //1.7,设置字内边框
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //2,创建集合视图
    self.coll = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen 
     mainScreen].bounds.size.width, CGRectGetHeight(self.frame)) collectionViewLayout:
     flowLayout];
    self.coll.backgroundColor = [UIColor whiteColor];
    [self addSubview:self.coll];
}
3,MyCell里面(继承于UICollectionViewCell)
//视图布局
-(void)addAllViews
{
    //视图空间加载在contentView上
    self.imV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 
        self.contentView.bounds.size.width, self.contentView.bounds.size.height-20)];
    self.imV.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:self.imV];
    
    self.myLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(self.imV.frame), 
        self.contentView.bounds.size.width, self.contentView.bounds.size.height - 
        CGRectGetHeight(self.imV.frame))];
    self.myLabel.text = @"nice";
    self.myLabel.textAlignment = NSTextAlignmentCenter;
    [self.contentView addSubview:self.myLabel];
}
//一旦改变,重新显示
-(void)layoutSubviews
{
    [super layoutSubviews];
    self.imV.frame = CGRectMake(0, 0, self.contentView.bounds.size.width, 
          self.contentView.bounds.size.height-20);
    self.myLabel.frame = CGRectMake(0, CGRectGetMaxY(self.imV.frame), 
          self.contentView.bounds.size.width, self.contentView.bounds.size.height - 
          CGRectGetHeight(self.imV.frame));
}








关于按钮(button)图文上下并存

由于APP要语言本地化,icon下还要有文字描述,导致切图不能带上文字;只好代码去控制了。实现方式如下:UIButton *button = [UIButton buttonWithType:UIBu...

iOS 自动布局图片类似微博

现在的应用里都有图文内容,当图片多时我们想让他们自动布局比如5张图片一排三张二排两张图片,当图片再多时能顾自动的排到下一行,大概思路是,当前端收到图片数组时,做一个循环布局,计算行数和列数,设定图片大...

【iOS开发-48】九宫格布局案例:自动布局、字典转模型运用、id和instancetype区别、xib重复视图运用及与nib关系

模型:严格叫做模型数据。核心就是我们把字典当成一个对象,字典里面的几个数据,我们分别转换成对象的几个属性,我们调用和设置数据的时候直接是“对象.属性”即可。...

【iOS开发-48】九宫格布局案例:自动布局、字典转模型运用、id和instancetype区别、xib重复视图运用及与nib关系

本次九宫格案例: (1)导入app.plist和各种图片素材,方便后续开发。实际开发中,也是如此。 (2)把plist中数组导入进来。 ——因为本案例中app...

iOS开发九宫格布局案例:自动布局、字典转模型运用、id和instancetype区别、xib重复视图运用及与nib关系

转载自:http://blog.csdn.net/weisubao/article/details/40075409 本次九宫格案例: (1)导入app.plist和各种图...

ios九宫格布局

  • 2014年06月13日 11:07
  • 165KB
  • 下载

IOS 集合视图指南6:创建自定义布局

Creating Custom Layouts(创建自定义布局) Before you start building custom layouts, consider whether doing...

iOS用代码在视图中动态添加多个有序排列UIView的方法(例如九宫格)

做开发时经常遇到有序排列很多个view的问题,如下图有序排列很多个应用看似分开的图片、名字、按钮组合,其实都在一个UIView控件上,创建代码如下 // 假设每行的应用的个数 int colu...

IOS 集合视图指南7:自定义布局范例

Custom Layouts: A Worked Example (自定义布局的一个例子) Creating a custom collection view layout is simple ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ios 集合视图(九宫格布局)
举报原因:
原因补充:

(最多只允许输入30个字)