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));
}








IOS-10行代码搞定九宫格

我们在开发中多多少少会遇到九宫格要求布局UI   如下图  直接上代码 //每个Item宽高 CGFloat W = 80; CGFloat H = 100; ...
  • han63504
  • han63504
  • 2016年06月23日 11:44
  • 3846

iOS UI设计---九宫格布局算法

在移动端开发中,我们经常会碰见类似下图的布局---九宫格布局。九宫格布局对于整体的UI设计有着重要的作用。 九宫格布局设计开发中,着重需要确认每个九宫格左上角的位置,也就是坐标。下面,我们以iOS开...
  • smallyou113
  • smallyou113
  • 2016年03月05日 08:09
  • 4532

iOS 用For循环实现九宫格的实现

//      总列数    int    totalColumns  =  3; //       每一格的尺寸 CGFolat   cellW = 50; CGFolat    cell...
  • qq_24901135
  • qq_24901135
  • 2015年02月12日 15:54
  • 6727

IOS 九宫格算法

  • 2015年03月06日 17:09
  • 384KB
  • 下载

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

利用UIViewController,UIView,UICollectionViewCell,通过重写UICollectionViewDelegate,UICollectionViewDelegate...
  • zq627240999
  • zq627240999
  • 2014年11月29日 17:18
  • 810

iOS开发:九宫格灵活布局

实现一行不同格子数的九宫格布局。 预览 思路 手动添加UI控件用除法和求余运算计算格子坐标 - (void)viewDidLoad { [super viewD...
  • u012234115
  • u012234115
  • 2016年06月12日 11:15
  • 581

iOS开发-UI-应用管理实现九宫格界面

1.实现如下界面,程序运行结果如图所示: 2.实现步骤 1.功能分析 以九宫格的形式展示应用信息 点击下载按钮后,做出相应的操作 2.步骤分析 加载应用信息 根据应用的个数创建对应的view...
  • sunnyboy9
  • sunnyboy9
  • 2013年09月28日 10:11
  • 845

iOS九宫格/布局算法

//子控件高 CGFloat w = 74; //子控件宽 CGFloat h = w; //列数 int colCount = 3; //计算间距 ...
  • POPLAR_B
  • POPLAR_B
  • 2016年08月12日 19:33
  • 598

iOS学习笔记--如何使九宫格布局图片的显示自适应大小

今天,刚学习了UICollectionView 的使用,通过第三方类库获取到图片的网址是图片以异步的方式显示出来,并且是图片的显示的大小是自适应的,其他的代码不多说,下面会给demo的链接,现在写主要...
  • u012127765
  • u012127765
  • 2015年09月21日 22:47
  • 1221

UICollectionViewController 用来创建流水布局 和 常见九宫格布局

1、概述 UICollectionView控件主要是用来做九宫格的,其用法与UITableView一样,首先要使控制器遵守数据源协议,再将控制器设置为UICollectionView的数据源。同样,控...
  • user_begin
  • user_begin
  • 2015年10月21日 20:16
  • 181
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ios 集合视图(九宫格布局)
举报原因:
原因补充:

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