コレクションビューのヘッダーとセルを同じサイズにする方法

Question

複数のセクションでコレクションビューを作成しました。ヘッダービューとコレクションビューのセルを同じサイズにします。

私はいくつかのことを試してみた：

• は、細胞またはヘッダに影響を及ぼさないように思われるコレクションビュー、上のインセットを設定します。
• 変更されたreferenceSizeForHeaderInSectionも効果がないようです。
• Xibのビューのサイズを再利用可能なビューに変更しました。
• Xib内のUILabelを上、左、右、下から0に制限し、幅を300に設定しましたが、これはオーバーライドされているようです（下の図の黒い部分はアプリ名です） 。以下は

Screenshot of constraints being broke

私の方法のいくつかである：

のviewDidLoad

override func viewDidLoad() { 
    super.viewDidLoad() 
    collectionView.delegate = self 
    collectionView.dataSource = self 

    collectionView.contentInset = UIEdgeInsets(top: 30, left: 30, bottom: 0, right: 30) 

    collectionViewHeightAnchor.constant = view.frame.height/2 

    let nib = UINib(nibName: "CollectionReusableView", bundle: nil) 
    collectionView.register(nib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "groceryHeader") 
} 

コレクションビューのデリゲート/データソースとヘッダの設定

// MARK: - Header 

func numberOfSections(in collectionView: UICollectionView) -> Int { 
    return foodItems.count 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 
    return CGSize(width: 120, height: 45) 
} 

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 
    let (key, _) = foodItems[indexPath.section] 
    let cell = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "groceryHeader", for: indexPath) as! CollectionReusableView 
    cell.lbl.text = key 

    return cell 
} 



// MARK: - Cell 

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    return foodItems[section].1.count 
} 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 
    return CGSize(width: 120, height: 45) 
} 

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "foodCell", for: indexPath) 
    if let cell = cell as? FoodItemCell { 
     let (_, val) = foodItems[indexPath.section] 
     cell.titleLbl.text = val[indexPath.row].text 
     cell.quantityLbl.text = val[indexPath.row].quantity 
     cell.postId = val[indexPath.row].id 

     if let arr = UserDefaults.standard.getCheckedIds() { 
      cell.checkBoxImg.setImage(arr.contains(val[indexPath.row].id) ? UIImage(named: "checked") : UIImage(named: "unchecked"), for: .normal) 
     } 
    } 
    return cell 
} 

は、事前にありがとうございます。

Answer 1

ヘッダーの幅が一定のサイズになるように思えます。 UICollectionViewFlowLayoutのデフォルトは、コレクションビューの幅を塗りつぶすことです。

あなたがここにいくつかのオプションがあります：

1）を所望の大きさで、補足意見（ヘッダー）サイズカスタムレイアウトを作成します。これはおそらく "正しい"オプションと考えられますが、必要以上に複雑なものになるでしょう。

2）ヘッダービューに「コンテナ」ビューを追加し、幅を希望のサイズ（120）に設定し、Xを親に合わせます。ルートコレクションビュー要素（UICollectionReusabableView）が透明である場合、サブビュー（「コンテナ」）を唯一の表示可能なビューとして残すことは表示されません。

3）UICollectionViewControllerを使用していない場合は、コレクションビューの幅を希望のサイズ（120）に設定するだけで済みます。 がUICollectionViewControllerを使用しての場合、はとなり、UIViewControllerに置き換え、UICollectionViewを追加してdataSourceを設定し、UIViewControllerに委譲します。このようにして、デフォルトのフローレイアウトの下にあるヘッダーがcvを埋めることになります。これは必要なだけの幅になります。