UICollectionView 自定义单元格填充宽度 Swift

Question

我一直在想办法让单元格填满宽度，正如您在图片中看到的那样，单元格之间的宽度太大了。我正在使用只有一个 imageView 的自定义单元格。

我试图从情节提要中对其进行自定义，但我想没有针对该选项的选项，或者应该以编程方式完成。

我的 UICollectionViewController ：

 @IBOutlet var collectionView2: UICollectionView!

    let recipeImages = ["angry_birds_cake", "creme_brelee", "egg_benedict", "full_breakfast", "green_tea", "ham_and_cheese_panini", "ham_and_egg_sandwich", "hamburger", "instant_noodle_with_egg.jpg", "japanese_noodle_with_pork", "mushroom_risotto", "noodle_with_bbq_pork", "starbucks_coffee", "thai_shrimp_cake", "vegetable_curry", "white_chocolate_donut"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Do any additional setup after loading the view.

    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
         return recipeImages.count
    }

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

        // Configure the cell
        cell.recipeImageView.image = UIImage(named: recipeImages[indexPath.row])

        return cell
    }

Answer 1

以编程方式将 itemSize 设置为 [UIScreen mainScreen].bounds.size.width/3

Answer 2

使用以下代码设置 UICollectionViewCell 的宽度。

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {        
    return CGSize(width: screenWidth/3, height: screenWidth/3);
}

Answer 3

在您的视图控制器中覆盖 viewDidLayoutSubviews 方法

@IBOutlet weak var collectionView: UICollectionView!

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        let itemWidth = view.bounds.width / 3.0
        let itemHeight = layout.itemSize.height
        layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
        layout.invalidateLayout()
    }
}

(collectionView 属性是你的collectionView)

Answer 4

您需要以编程方式执行此操作。

在您的视图控制器中实施 UICollectionViewDelegateFlowLayout 并在 collectionView:layout:sizeForItemAtIndexPath:

中提供大小

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let kWhateverHeightYouWant = 100
        return CGSizeMake(collectionView.bounds.size.width, CGFloat(kWhateverHeightYouWant))
}

您还需要在视图控制器的 viewWillLayoutSubviews() 中调用 collectionView.collectionViewLayout.invalidateLayout()，这样当主视图的尺寸发生变化时（例如旋转时），集合视图会重新布局。

Swift 4 次更新

func collectionView(_ collectionView: UICollectionView,
                            layout collectionViewLayout: UICollectionViewLayout,
                            sizeForItemAt indexPath: IndexPath) -> CGSize {
            let kWhateverHeightYouWant = 100
            return CGSize(width: collectionView.bounds.size.width, height: CGFloat(kWhateverHeightYouWant))
}

Answer 5

在我的例子中，假设每个单元格的宽度为 155，高度为 220。如果我想在纵向模式下每行显示 2 个单元格，在横向模式下显示 3 个单元格。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var itemsCount : CGFloat = 2.0
    if UIApplication.sharedApplication().statusBarOrientation != UIInterfaceOrientation.Portrait {
        itemsCount = 3.0
    }
    return CGSize(width: self.view.frame.width/itemsCount - 20, height: 220/155 * (self.view.frame.width/itemsCount - 20));
}

Answer 6

最好的解决办法是在 viewDidLayoutSubviews 中更改 UICollectionViewFlowLayout 的 itemSize。那是您可以获得 UICollectionView 最准确大小的地方。您不需要在布局上调用 invalidate，这已经为您完成了。

Answer 7

Swift 3

如果你用的是swift3，用这个方法：

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

    }

注意变化：

在方法名collectionView前添加_
NSIndexPath 更改为 IndexPath

Answer 8

也在Swift3,

确保您的视图控制器符合以下要求：

UICollectionViewDelegate,
UICollectionViewDataSource，
UICollectionViewDelegateFlowLayout

Answer 9

我有同样的要求，在我的情况下，下面的解决方案有效。我将 UIImageView 顶部、左侧、底部和右侧约束设置为 0 inside UICollectionviewCell

@IBOutlet weak var imagesCollectionView: UICollectionView!

override func viewDidLoad() {
    super.viewDidLoad()
    // flowlayout
    let screenWidth = UIScreen.main.bounds.width
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 10, right: 0)
    layout.itemSize = CGSize(width: screenWidth/3 - 5, height: screenWidth/3 - 5)
    layout.minimumInteritemSpacing = 5
    layout.minimumLineSpacing = 5
    imagesCollectionView.collectionViewLayout = layout

}

Answer 10

对于我的情况，我想在 UICollectionView 中显示两列和 3 行

我将 UICollectionViewDelegateFlowLayout 委托添加到我的 class

然后我覆盖 sizeForItemAt indexPath

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellHeight = (collectionView.bounds.size.height - 30) / 3 // 3 count of rows to show
    let cellWidth = (collectionView.bounds.size.width - 20) / 2 // 2 count of colomn to show
    return CGSize(width: CGFloat(cellWidth), height: CGFloat(cellHeight))
}

30为行间距，20为单元格间距

Answer 11

就我而言，自动布局仅允许单元格增长到其内容大小，即使我覆盖了情节提要中的单元格大小，符合 UICollectionViewDelegateFlowLayout，并实施了 sizeForItemAt。所以我制作了一个虚拟 UIView 单元格边界的宽度。

UICollectionViewController:

extension CollectionViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width - 40
        return CGSize(width: width, height: collectionView.bounds.height / 3)
    }
}

Cell（我在依赖注入中调用这个方法）：

private func updateViews() {
    let padding:CGFloat = 8
    let innerView = UIView()
    innerView.translatesAutoresizingMaskIntoConstraints = false
    innerView.layer.cornerRadius = 8
    innerView.layer.borderColor = UIColor.black.cgColor
    innerView.layer.borderWidth = 1
    contentView.addSubview(innerView)
    NSLayoutConstraint.activate([
        innerView.widthAnchor.constraint(equalToConstant: bounds.width - padding*2),
        innerView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: padding),
        innerView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -padding),
        innerView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor, constant: padding),
        innerView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor, constant: -padding)
    ])
}

UICollectionView 自定义单元格填充宽度 Swift

UICollectionView Custom Cell to fill width In Swift

ios

uicollectionview

uicollectionviewlayout

swift

Swift 4 次更新