IOS之UIKit_Day13

day13

目标:UICollectionViewController集合视图

 

1.UICollectionViewController的基本使用:

       1.1 Code纯代码的方式

              a.Cell的简单样式+系统的流式布局

              UICollectionViewCell+UICollectionViewFlowLayout

              和UITableViewController基本相同实现三问一答,注意一答只能从对列中查找

              单元格的冲用可以使用标记:

               //从队列中安标是取cell

   UICollectionViewCell *cell=[collectionViewdequeueReusableCellWithReuseIdentifier:reuseIdentifier       forIndexPath:indexPath];

    //设置cell的背景颜色

   cell.backgroundColor=[UIColor redColor];

    UILabel*lable=(UILabel *)[cell.contentView viewWithTag:1];//注意标记的值 不能为0

    if(lable==nil) {

       lable=[[UILabel alloc]init];

       lable.frame=CGRectMake(0, 0, cell.bounds.size.width,cell.bounds.size.height);

       lable.textColor=[UIColor whiteColor];

       lable.font=[UIFont boldSystemFontOfSize:26];

       lable.textAlignment=UITextAlignmentCenter;

        //为lable添加tag标示

        lable.tag=1;

       [cell.contentView addSubview:lable];

    }

   lable.text=[NSString stringWithFormat:@"%d",indexPath.row];

       returncell;

 

      b.Cell的简单样式+自定义的流式布局

          UICollectionViewCell+MyFlowLayout

          自定义的流式布局:需要重写类继承自UICollectionViewFlowLayout

                   并且重写初始化方法:

                   //布局的自定义

       self.itemSize=CGSizeMake(80, 80);//项的大小

       self.minimumLineSpacing=10.0;//行间距的大小

       self.minimumInteritemSpacing=10.0;//内部项之间的距离

       self.scrollDirection=UICollectionViewScrollDirectionHorizontal;//设置水平滚动

       //self.scrollDirection=UICollectionViewScrollDirectionVertical;//设置垂直滚动

       self.sectionInset=UIEdgeInsetsMake(154, 30, 154, 30);//上 

 

          c.自定义Cell+自定义的流式布局

          MyCell+MyFlowLayout

          自定义cell:需要重写cell继承自UICollectionViewCell

          自定义的流式布局:需要重写UICollectionViewFlowLayout

          在Cell的类方法中设置Cell的样式

          -(id)initWithFrame:(CGRect)frame

{

    self =[super initWithFrame:frame];

    if (self) {

       self.bgImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,frame.size.width, frame.size.height)];

        //设置图片视图为cell的背景视图

       self.backgroundView = self.bgImageView;

       self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0,frame.size.width, frame.size.height)];

       self.label.textAlignment = NSTextAlignmentCenter;

       self.label.font = [UIFont boldSystemFontOfSize:30];

        //将标签添加到cell的内容视图中

       [self.contentView addSubview:self.label];

    }

    return self;

}

 

1.2 Xib方式:

          a、只通过Xib建立

                   新建视图类继承自UICollectionViewController并勾选Xib  删除自带的Xib视图 新建CollectionView 选择Files Owner把View连线到collectionView,选择collectionView的第六个检查器,把dataSource和Delegate连线到Files Owner

                   选择第四个检查器 设计collectionView的显示效果

        b、cell通过Xib设计自定义流式布局

              新建FlowLayout继承自UICollectionViewFlowLayout在a中的Xib文件的第四个检查器中Layout选择Custom Class选择FlowLayout

                   在新建的FlowLayout中的-(id)initWithCoder:(NSCoder *)aDecoder{}方法中设计布局

        c、自定义Cell自定义流式布局

              新建Cell继承于UICollectionViewCell 当前状态下无法勾选Xib,再新建选择interface-选择Empty新建一个Xib名字与继承UICollectionViewCell类的名字相同

              在该Xib下拉入一个collectionViewCell 选择第三个检查器 Class选择当前类,在该Xib下实现要设计的显示效果即可。

 

 1.3 StoryBoard方式实现

       同Xib方式基本相似

 

2、使用UICollectionViewController实现复杂的布局

       2.1 自定义的复杂的流式布局实现水平波动的缩放

              可分为a.、b、c、三种情况

              以a纯代码的方式为例:

                     a、创建MyCollectionViewController继承UICollectionViewController,并设置分区数、每个分区的项数、以及每一项的格式(与UITableViewController相似)

                    b、创建MyCell继承自UICollectionViewCell,公开一个imageView的接口,在初始化的时候初始化该ImageView的大小,并把ImageView赋给self.backgroundView[可以通过self.contentView.layer.borderWidth=1.0f;设置图片的外边框 self.contentView.layer.borderColor设置外边框的颜色]

                     c、创建MyFlowLayout继承UICollectionViewFlowLayout,并在初始化方法(init)中设置self.itemSize的大小、self.scrollDirection设置滑动方向、self.sectionInset =UIEdgeInsetsMake(60, 0, 60, 0)设置item的位置。

                     关键步骤:在-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{}方法中实现以下几步:

                     1.得到所有的item

                     2.创建可视化矩形区域,并求出可视化矩形区域的中心点

                     3.遍历所有的item

                            求出每一个item的中心点坐标

                            计算出两个中心点坐标的差值

                            判断是否在某一区域{

                            在就根据差值的大小产生一个ZoomFator缩放因子

                            对得到的item调用transform3D=CATransform3DMakeScale(zoomFactor,zoomFactor, 1)设置缩放

}

 

Eg:

          -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{

          //得到每一个item放入集合

    NSArray*array = [super layoutAttributesForElementsInRect:rect];

    //创建可视化的矩形区域

    CGRectvisiabelRect = CGRectZero;//初始化为0

   visiabelRect.origin = self.collectionView.contentOffset;//滑动的坐标

   visiabelRect.size = self.collectionView.bounds.size;//bounds=frame

    //可视化矩形区域的中心点x

    CGFloatvisiableRectCenterX = CGRectGetMidX(visiabelRect);

    //依次获取系统指定的矩形区域中的每一个item

    //的中心点坐标

    //将可视化区域的中心点与item的中心点进行

    //比对,根据两个中心点的距离产生一个变化的

    //比率,并将该比率作为item的缩放比率即可

    for(UICollectionViewLayoutAttributes *attributes in array) {

        //获取每一个item的中心点

        CGFloat itemCenterX =attributes.center.x;

        //计算两个中心点的距离

        CGFloatdistance = visiableRectCenterX - itemCenterX;

        //设定两个中心点的距离在200以内时

        //才针对item做放大缩小的操作

        if(ABS(distance) < 200) {

            //根据distance的大小产生一个变化的zoomFator缩放因子

           CGFloat zoomFactor = 1 + 0.5*(1-ABS(distance/200.0));

           attributes.transform3D = CATransform3DMakeScale(zoomFactor, zoomFactor,1);

        }

    }

    returnarray;

}

 

//当滑动改变时重新确定坐标

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

    return YES;

}

 

2.2、自定义的不规则布局

       .......Tomower...Duang......Duang.....

 

补充:

       1.frame描述的视图在父视图中的位置以及大小所占区域

       2.bounds描述的视图本身的大小

       3.屏幕:3.4  宽320  高480

         屏幕:4.0  宽320  高568

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。