自定義基於.xib的CollectionView超出預期界限

Question

最初，我有一個密集的控制器，其中包含一個delegate和datasource以及其他與呈現我的畫廊的CollectionView相關的其他內容。爲了清理代碼，我將CollectionView轉換爲基於.xib的自定義創建視圖，這裏的關鍵點在於很多數字量保持不變。

以前，一切正常加載，每行3個縮略圖。但是，現在，每行仍有3個縮略圖，這些行溢出屏幕的右側，實際上是在屏幕之外。

我的看法是加載，這樣的：當我與它下面的註釋行替換gridPhotoGalleryView.frame = self.bounds

@IBOutlet var gridPhotoGalleryView: UICollectionView! 

// MARK: Initialization 
required init?(coder aDecoder: NSCoder) { 
    super.init(coder: aDecoder) 

    NSBundle.mainBundle().loadNibNamed("GridPhotoGalleryView", owner: self, options: nil) 

    gridPhotoGalleryView.frame = self.bounds 
    // gridPhotoGalleryView.frame = CGRectMake(self.bounds.origin.x, self.bounds.origin.y, UIScreen.mainScreen().bounds.size.width + 5, self.bounds.height) 

    self.addSubview(self.gridPhotoGalleryView) 

    self.gridPhotoGalleryView.delegate  = self 
    self.gridPhotoGalleryView.dataSource = self 

    self.gridPhotoGalleryView.registerNib(UINib(nibName: "ThumbnailCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: galleryPhotoCellIdentifier) 
} 

我的問題得到解決。

這裏發生了什麼？我的猜測是，這與加載該視圖的控制器的約束有關，但這在我的任何其他視圖中都不是問題。這個看似隨意的寬度是什麼，這個幻數讓我的3個縮略圖圖像在屏幕上完美匹配？

不確定是否有必要，但這裏有更多的代碼w.r.t.數據源。

let galleryThumbnailSize = UIScreen.mainScreen().bounds.size.width/3 - 3 

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
    let cell: ThumbnailCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(galleryPhotoCellIdentifier, forIndexPath: indexPath) as! ThumbnailCollectionViewCell 

    let asset: PHAsset = photosAsset!.objectAtIndex(indexPath.item) as! PHAsset 

    let retinaMultiplier: CGFloat = UIScreen.mainScreen().scale 
    let retinaSquare: CGSize = CGSizeMake(cell.bounds.size.width * retinaMultiplier, cell.bounds.size.height * retinaMultiplier) 

    PHImageManager.defaultManager().requestImageForAsset(
     asset, 
     targetSize: retinaSquare, 
     contentMode: .AspectFill, 
     options: nil, 
     resultHandler: {(result, _) in cell.setThumbnailImage(result!, thumbnailSize: self.galleryThumbnailSize)}) 

    return cell 
} 

Answer 1

你的猜測是正確的 - 在初始化，您最上面的觀點有大小從故事板（如果您使用的大小類，數量大概是600×600），和子視圖是基於約束在其中大小（或如果您未使用自動佈局，則基於硬編碼值）。由於您在初始化期間將gridPhotoGalleryView的大小設置爲一次，所以在佈局發生時，它的大小永遠不會調整到適合父級的大小。

這裏有3種方式就可以解決這個問題：

1. 如果您正在使用自動佈局可以跳過設置框架和使用約束的初始化，以確保gridPhotoGalleryView的框架它的父的邊界相匹配。

   self.addSubview(self.gridPhotoGalleryView) 
   self.gridPhotoGalleryView.translatesAutoresizingMaskIntoConstraints = false 
   
   let topConstraint = NSLayoutConstraint(item: gridPhotoGalleryView, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 0.0) 
   let leftConstraint = NSLayoutConstraint(item: gridPhotoGalleryView, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1.0, constant: 0.0) 
   let rightConstraint = NSLayoutConstraint(item: gridPhotoGalleryView, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1.0, constant: 0.0) 
   let bottomConstraint = NSLayoutConstraint(item: gridPhotoGalleryView, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1.0, constant: 0.0) 
   
   topConstraint.active = true 
   leftConstraint.active = true 
   rightConstraint.active = true 
   bottomConstraint.active = true 
   

2. 如果你不使用自動佈局（或者即使你是），你可以用彈簧和支柱在你的初始化，以確保您的視圖根據它的父調整大小。

   gridPhotoGalleryView.frame = self.bounds 
   gridPhotoGalleryView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] 
   

3. 如果由於某種原因既不是你的工作，你可以重寫layoutSubviews（其被稱爲每當視圖的框架的改變），調整子視圖幀那裏。

   override func layoutSubviews() { 
       super.layoutSubviews() 
       gridPhotoGalleryView.frame = self.bounds 
   } 
   

我認爲，＃2，就使得你的情況更乾淨的代碼，但如果需要的話，你可以實現與1號更復雜的佈局。

至於怎麼了你的幻數 - 我猜你需要添加5到屏幕寬度，因爲你的集合視圖佈局中的單元格之間有一些水平填充？或者你的sizeForCellAtIndexPath正在返回一個太大的smidge大小。