如何在所有设备中使用 swift4 在 CollectionView 中显示两列

Posted 2023-03-14

【中文标题】如何在所有设备中使用 swift4 在 CollectionView 中显示两列

【英文标题】：How to show two columns in a CollectionView using swift4 in all devices

【发布时间】：2018-03-30 11:42:57

【问题描述】：

为了在 collectionView 中只显示两列，我正在使用这段代码

    let layout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
    layout.minimumInteritemSpacing = 4
    layout.itemSize = CGSize(width:(self.collectionView.frame.size.width - 10)/2,height: (self.collectionView.frame.size.height)/3)

但它只在 5s 上正确显示，而不是在每部 iphone 上。请帮忙。

我想像这张图片一样展示我的视图控制器。请帮助任何人

【问题讨论】：

班加利纳基？ @Gorib

mone prane @iPeter

【参考方案1】：

你一定是错过了UICollectionViewDelegateFlowLayout

试试这个看看：

// Source code
import UIKit

class CollectionVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 

    @IBOutlet var collection: UICollectionView!
    override func viewDidLoad() 
        super.viewDidLoad()
        collection.delegate = self
        collection.dataSource = self
    

    override func viewWillAppear(_ animated: Bool) 
        super.viewWillAppear(animated)
        //collection.reloadData()
    

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        let flowayout = collectionViewLayout as? UICollectionViewFlowLayout
        let space: CGFloat = (flowayout?.minimumInteritemSpacing ?? 0.0) + (flowayout?.sectionInset.left ?? 0.0) + (flowayout?.sectionInset.right ?? 0.0)
        let size:CGFloat = (collection.frame.size.width - space) / 2.0
        return CGSize(width: size, height: size)
    


    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return 50
    

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testcell", for: indexPath)
        cell.backgroundColor = UIColor.red
        return cell
    

// 界面设计

结果：

【讨论】：

你能告诉我如何减少两个项目之间的空间。

相应地做了，但两个项目之间的空间并没有减少先生

@GoribDeveloper - 复制我的完整代码并按照我在界面构建器设计中展示的方式设计您的界面。

这是一个非常优雅的答案 - 我喜欢它如何考虑您可能设置的任何插图 - 谢谢！

按预期工作。非常感谢 (0_0)

【参考方案2】：

确保您的协议与您的 ViewController 确认，

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout

并将 flow layout 设置为您的 collectionview 对象

在 viewDidLoad

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical //.horizontal
layout.minimumLineSpacing = 5
layout.minimumInteritemSpacing = 5
collectionView.setCollectionViewLayout(layout, animated: true)

并实现以下方法

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets 
    return UIEdgeInsets(top: 1.0, left: 1.0, bottom: 1.0, right: 1.0)//here your custom value for spacing


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let lay = collectionViewLayout as! UICollectionViewFlowLayout
    let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
    
    return CGSize(width:widthPerItem, height:100)

【讨论】：

相应地做

@karthikeyani 我说我正在按照你的步骤操作

是的..它来了..你能告诉我如何减少两个项目之间的空间。

如果对您有帮助，请告诉我们

在此处更改您的值 return UIEdgeInsets(top: 1.0, left: 1.0, bottom: 1.0, right: 1.0)

【参考方案3】：

将此代码添加到 viewDidLoad。 根据你改变高度。

试试这个！

if let layout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout
        layout.minimumLineSpacing = 10
        layout.minimumInteritemSpacing = 10
        layout.sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
        let size = CGSize(width:(collectionView!.bounds.width-30)/2, height: 250)
        layout.itemSize = size

【参考方案4】：

我已经实现了以下代码，以在集合视图中显示两列。

添加UICollectionViewDelegateFlowLayout的如下方法方法：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let size = (collectionView.frame.size.width - 30) / 2
    return CGSize(width: size, height: size)

其中 30 代表单元格之间的左侧、右侧和中间空间。

即单元格应在左侧添加 10 像素，在右侧添加 10 像素，在两个单元格之间添加 10 像素。

从情节提要和尺寸检查器中选择collectionview，并按照最小间距设置。

我希望这能解决你的问题。

如果有任何疑问，请告诉我。

【讨论】：

发生了什么？

发布截图

你连接collectionView的Delegate了吗？

我必须在哪里给 30？

如果不是项目，你能分享你的演示吗？

【参考方案5】：

Swift 5 和 XCode 12.4 更新

    import UIKit

class TwoColumnViewController: UIViewController 

    enum Section 
        case main
    

    var dataSource: UICollectionViewDiffableDataSource<Section, Int>! = nil
    var collectionView: UICollectionView! = nil

    override func viewDidLoad() 
        super.viewDidLoad()
        navigationItem.title = "Two-Column Grid"
        configureHierarchy()
        configureDataSource()
    


extension TwoColumnViewController 
    /// - Tag: TwoColumn
    func createLayout() -> UICollectionViewLayout 
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                             heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                              heightDimension: .absolute(44))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2)
        let spacing = CGFloat(10)
        group.interItemSpacing = .fixed(spacing)

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = spacing
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    


extension TwoColumnViewController 
    func configureHierarchy() 
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createLayout())
        collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        collectionView.backgroundColor = .systemBackground
        view.addSubview(collectionView)
    
    func configureDataSource() 
        let cellRegistration = UICollectionView.CellRegistration<TextCell, Int>  (cell, indexPath, identifier) in
            // Populate the cell with our item description.
            cell.label.text = "\(identifier)"
            cell.contentView.backgroundColor = .cornflowerBlue
            cell.layer.borderColor = UIColor.black.cgColor
            cell.layer.borderWidth = 1
            cell.label.textAlignment = .center
            cell.label.font = UIFont.preferredFont(forTextStyle: .title1)
        
        
        dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) 
            (collectionView: UICollectionView, indexPath: IndexPath, identifier: Int) -> UICollectionViewCell? in
            // Return the cell.
            return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)
        

        // initial data
        var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()
        snapshot.appendSections([.main])
        snapshot.appendItems(Array(0..<94))
        dataSource.apply(snapshot, animatingDifferences: false)