如何使用 collectionview 流布局来获得正确的视图？答案

【问题标题】：How to use collectionview flow layout to get correct view?如何使用 collectionview 流布局来获得正确的视图？
【发布时间】：2018-04-20 08:12:48
【问题描述】：

我正在使用此代码来获取正确的类型，但没有得到我想要的视图，谁能告诉我我哪里错了

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    screenSize = UIScreen.main.bounds
    screenWidth = screenSize.width
    screenHeight = screenSize.height
    videosCollectionView.delegate = self
    videosCollectionView.dataSource = self
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 4
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = videosCollectionView.dequeueReusableCell(withReuseIdentifier: "Videos", for: indexPath as IndexPath) as! VideosCollectionViewCell
    cell.mainImgVw.image = logoImage[indexPath.row]
    cell.durationLabel.text = "duration"
    cell.nameLabel.text = "Test Video"
    return cell

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let xPadding = 10
    let spacing = 10
    let rightPadding = 10
    let width = (CGFloat(UIScreen.main.bounds.size.width) - CGFloat(xPadding + spacing + rightPadding))/2
    let height = CGFloat(215)

    return CGSize(width: width, height: height)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(10, 10, 10, 10)
}

我得到了什么

请告诉我哪里错了。请帮帮我。

我的故事板是这样的

【问题讨论】：

据我所知，我倾向于说collectionView(_ collectionView:layout:sizeForItemAt:) 返回的宽度太大。尝试在其中添加“-30”以查看是否至少显示两个，然后重新检查您的计算。
@Larme 试过这个但还是同样的问题

标签： ios swift uicollectionview uicollectionviewcell uicollectionviewflowlayout

【解决方案1】：

正如您所说，您想使用 collectionViewFlowDelegateLayout。因此，您必须将情节提要中的所有值设置为 0，如下所示。

然后你必须在你的 viewcontroller 类中编写这段代码。

此方法用于设置集合视图中的单元格大小。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let xPadding = 10
        let spacing = 10
        let rightPadding = 10
        let width = (CGFloat(UIScreen.main.bounds.size.width) - CGFloat(xPadding + spacing + rightPadding))/2
        let height = CGFloat(215)

        return CGSize(width: width, height: height)
    }

此方法用于将边距应用于指定部分中的内容。

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(10, 10, 10, 10)
    }

此方法用于节的连续行或列之间的间距。

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }

【讨论】：

【解决方案2】：

你的代码工作正常，没有任何问题，检查Size Inspector标签中的Min Spacing应该太大了，设置为10

【讨论】：

【解决方案3】：

试试这个：-

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

      return CGSize(width: (self.view.frame.width - 8) / 3.0 , height: (self.view.frame.width - 8) / 3.0)
 }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

    return UIEdgeInsetsMake(8, 8, 0, 8)
}

希望对你有帮助

【讨论】：

【解决方案4】：

斯威夫特 5

为 Storyboard 中的 collectionView 设置数据源和委托。

import UIKit

class ViewController : UIViewController {

    // MARK: - Properties -
    
    @IBOutlet var collectionView : UICollectionView?
    
    // MARK: - Lifecycle -

    override func viewDidLoad() {
        
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        collectionView?.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
        
        // collectionView flowlayout
        
        let flowLayout : UICollectionViewFlowLayout = UICollectionViewFlowLayout.init()
        flowLayout.scrollDirection = UICollectionView.ScrollDirection.vertical
        flowLayout.sectionInset = UIEdgeInsets.init(top: 0, left: 0, bottom: 0, right: 0)

        collectionView?.collectionViewLayout = flowLayout

    }
    

    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.

    }

}

extension ViewController : UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        
        return 1
        
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return 16
        
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell : CollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
        
        return cell
        
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    
        let width = collectionView.frame.size.width / 4
        
        return CGSize(width: width, height: width)
        
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
    
    // horizontal
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        
        return 0.0
        
    }
    
    // vertical
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        
        return 0.0

    }
    
}

【讨论】：

【解决方案5】：

声明UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

像这样为故事板中的单元格和行设置最小空间。

像这样设置collectionview单元格宽度，

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

    var cellWidth:CGFloat = (collectionView.frame.size.width - 20) / 2;  

    return CGSize(width: cellWidth, height: 215);
}

【讨论】：