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