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

Question

我正在使用此代码来获取正确的类型，但没有获得我想要的视图任何人都可以告诉我哪里错了

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)
}

以及我得到了什么

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

我的故事板就像这样

Answer 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
    }

Answer 2

您的代码运行正常并且没有任何问题，请在Min Spacing标签中检查Size Inspector它应该是否过大，设置为10

Answer 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)
}

希望它能帮到你

Answer 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

    }
    
}

Answer 5

声明UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

为这样的单元格设置单元格和行的最小空间。

像这样设置集合视图单元格宽度

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);
}