Swift - UICollectionView连续显示多个项目

时间:2017-09-20 10:33:30

标签: ios swift uicollectionview human-interface

我是iOS和Swift的新手。我已经创建了一个集合视图,它工作正常但我想在一行中显示多个项目。我试过但它不起作用。有人能帮我吗?提前谢谢。

这是我的代码:

DashBoardCollectionVC

import UIKit

class DashBoardCollectionVC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak var main_collection_view: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = main_collection_view.dequeueReusableCell(withReuseIdentifier: "identify_collection_cell", for: indexPath) as! DashboardCollectionViewCell
        return cell
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        var collectionViewSize = collectionView.frame.size
        collectionViewSize.width = collectionViewSize.width/2.0 //Display Three elements in a row.
        collectionViewSize.height = collectionViewSize.height/4.0
        return collectionViewSize
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("Item Clicked : \(indexPath.item)")

    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

    }

}

看起来像这样

enter image description here

ContainerView Design

enter image description here

我想连续显示两个项目。我怎样才能做到这一点?

3 个答案:

答案 0 :(得分:3)

前段时间我遇到了一个非常类似的问题,它出现在collectionViewLayout方法中。我的细胞是完全正方形的,所以也许这对你没有帮助,或者你可以适应它。这对我有用:

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

        let width = collectionView.frame.width / 3 - 1
        return CGSize(width: width, height: width)
    }

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

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

或者,如果我们想要连续2代码,那么代码将是:

let width = collectionView.frame.width / 2 - 1

enter image description here enter image description here

另外,在故事板中通常会拖动一个"集合视图"从对象库中,单元格出现在左下角,类似于下一个图像 - 也许这不相关,你可以以编程方式设置所有内容,但以防万一与autolayout创建一些冲突。

collection view storyboard

答案 1 :(得分:1)

在计算单元格宽度时考虑边距宽度。你需要减去边距宽度,即两个单元格之间的空间以及你的单元格的前导和尾随空间 collectionViewSize.width = collectionViewSize.width/2.0结果。 高度相同。

答案 2 :(得分:0)

Use this two methods it might work for you
=======================================

    func columnWidth(for collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout) -> CGFloat 
    {
                return self.clView.frame.size.width / 2
    }

func maximumNumberOfColumns(for collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout) -> Int {
                let numColumns: Int = Int(2.0)
                return numColumns
        }