カスタム.xibベースのCollectionViewが予想した範囲を超えています

Question

最初に私はdelegateとdatasourceと多くの他の多くのものが私のギャラリーを描画するCollectionViewに関連する高密度コントローラを持っていました。コードを少しきれいにするために、私は.xibに基づいてカスタム作成ビューにCollectionViewを移動しました。ここでの重要な点は、同じ数量が残っています。

以前はすべてが細かく読み込まれ、1行に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) 
} 

私の問題が修正されます。

ここで何が起こっているか私の推測では、これは何とかこのビューをロードするコントローラのAutoLayoutの制約に関連していますが、これは他のどのビューでも問題にはなりません。 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のサイズのクラスを使用している場合）のinitに、あなたの一番上のビューはストーリーボードのサイズを持っている、とサブビューが制約に基づいて、それらの中にサイズ設定されている（またはautolayoutを使用していない場合は、ハードコードされた値に基づいています）。 init中にgridPhotoGalleryViewのサイズを1回設定するので、レイアウトが発生したときに親の内部に収まるようにサイズが変更されることはありません。

1. あなたが自動レイアウトを使用している場合は、フレームをスキップ設定とgridPhotoGalleryViewのフレームは、そのスーパーの境界と一致することを確実にするためのinitで制約を使用することができます。ここでは

   は、あなたがこの問題を解決することができる3つの方法があります。

   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が大きすぎるサイズの返り値です。