UICollectionView

 

---

UICollectionView的使用

自定義流水佈局

 

1.1 collectionView和tableView

• 區別:佈局(collectionView須要本身手動佈局,而tableView不須要,系統會自動幫咱們佈局)
• 共同點:循環利用(定義一個重用標識就能夠實現循環利用)

 

1.2 添加collectionView

• 注意點:
  • 初始化必需要傳入佈局(流水佈局:九宮格佈局)
  • UICollectionViewCell必須註冊
  • 必須自定義cell

• 步驟:建立流水佈局;建立UICollectionView;設置數據源

• 效果圖:

• 分析:這並不能知足咱們的需求,咱們須要展現圖片數據,因此咱們必須自定義cell,由於裏面的圖片格式都是同樣的,可使用xib描述.

 

1.3方法的抽取

• 爲了簡化代碼,使得代碼簡單明瞭,咱們就把方法進行了抽取

• 方式一:

• 方式二:

1.4自定義流水佈局

• 思路:照片瀏覽佈局:流水佈局,在拖動的時候,在原來的基礎上從新計算下佈局->在原來功能上再添加功能,自定義流水佈局.
• 自定義類:重寫方法,達到一些效果
• 複雜效果:分析 - > 解決:cell離中心點的距離越近就越大,越遠就越小
• 自定義佈局,重寫5個方法:

// 何時調用:一開始佈局就會調用,UICollectionView刷新的時候也會調用
// 做用:計算全部的cell佈局,條件:cell佈局固定
- (void)prepareLayout{
    [super prepareLayout]; 
}

// 做用:返回每一個cell佈局,
// 給定一個區域,就返回這個區域內全部cell佈局
// 容許一次性返回全部cell佈局
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{

    //獲取顯示區域
    CGRect visiableRect = self.collectionView.bounds;
    //獲取顯示區域內的cell佈局
   NSArray *attributes =  [super layoutAttributesForElementsInRect:visiableRect];
    
    //計算collectionView的偏移量x
    CGFloat offSetX = self.collectionView.contentOffset.x;
    //遍歷cell佈局
    for (UICollectionViewLayoutAttributes *attr in attributes) {
      //計算一下離中心的距離
        CGFloat delta = fabs(attr.center.x - offSetX - kscreenW * 0.5);
        //計算縮放比例 1 ~ 0.5
        CGFloat scale = 1 - delta / (kscreenW * 0.5) * 0.5;
        //縮放變換
        attr.transform = CGAffineTransformMakeScale(scale, scale);
    };
    return attributes;
}

// Invalidate:刷新
// 是否容許在拖動的時候刷新佈局
// 謹慎使用,YES:只要一滾動就會佈局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return YES;   
}

// 何時調用:手動拖動UICollectionView,當手指離開的時候,就會調用
// 做用:返回UICollectionView最終的偏移量
// proposedContentOffset:最終的偏移量
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity 
{
    //獲取顯示區域
    CGRect visiableRect = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, MAXFLOAT);
    
    //獲取顯示區域的cell佈局
    NSArray *attributes = [super layoutAttributesForElementsInRect:visiableRect];
    //遍歷cell佈局,判斷離center最近的cell
    CGFloat minDelta = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attr in attributes) {
        //計算離中心點的距離
        CGFloat delta = attr.center.x - proposedContentOffset.x - kscreenW * 0.5;
        //計算最小的距離
        if (fabs(delta) < fabs(minDelta)) {
            minDelta = delta;
        }        
    };
    //由於咱們是從右往左滑動
    proposedContentOffset.x += minDelta;
    
    //考慮到小於0的狀況的處理
    if (proposedContentOffset.x < 0) {
        proposedContentOffset.x = 0;
    }
    
    return proposedContentOffset;
}

// 設置collectionView滾動範圍
- (CGSize)collectionViewContentSize {
    return [super collectionViewContentSize];  
}

• UICollectionView滾動範圍不須要手動管理,佈局會自動計算.UITableView滾動範圍也不須要手動管理,自動根據內容計算.