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