ios - 具有多个不同 uicollectionviewcell 的 uicollectionview

Question

我正在构建一个调查应用程序，我想使用这样的 View

在这个例子中只有两个可能的答案，但我希望有可能有 3/4 个答案和不同类型的调查，

我将收到一个 JSON 来构建它，其中包含问题的类型和可能的答案等。

我的主要问题是我真的不知道如何继续，我是 iOS 开发 atm 的新手，我不想尝试太多东西并且有意大利面条代码，所以如果有人知道如何根据 json 使用不同的 View 来执行此 Collection View

谢谢你/

Answer 1

有很多方法可以实现它，但在您的情况下，您希望使用具有多个不同 Collection View 单元的Collectionview

在 ViewController.swift 中，遵循一些 UICollectionView 协议(protocol)。

    class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate , UICollectionViewDelegateFlowLayout{

        @IBOutlet weak var mainCollectionView: UICollectionView!

        override func viewDidLoad() {
            super.viewDidLoad()
             mainCollectionView.isScrollEnabled = false
        }

然后实现 Collection View 数据源和委托(delegate)方法。

// MARK: - UICollectionViewDataSource protocol

// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 3
}


// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {



    print("indexPath.row \(indexPath.row)")
    if indexPath.row == 0{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "firstCell", for: indexPath)
        if let button = cell.contentView.viewWithTag(2) as? UIButton{
            button.addTarget(self, action: #selector(MoveToNextCell), for: .touchUpInside)
        }
        return cell
    }

    else if indexPath.row == 1{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "secondCell", for: indexPath)
        if let button = cell.contentView.viewWithTag(3) as? UIButton{
            button.addTarget(self, action: #selector(MoveToNextCell), for: .touchUpInside)
        }

        return cell
    }

    else{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "thirdCell", for: indexPath)
        if let button = cell.contentView.viewWithTag(4) as? UIButton{
            button.addTarget(self, action: #selector(MoveToNextCell), for: .touchUpInside)
        }
        return cell
    }
}


// MARK: - UICollectionViewDelegate protocol

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // handle tap events
    print("You selected cell #\(indexPath.item)!")
}

然后实现 UICollectionViewDelegateFlowLayout 方法。

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

            return CGSize(width: self.view.frame.width , height: self.view.frame.height)


    }

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

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

然后最后在单元格之间移动

func MoveToNextCell(){

        let collectionBounds = self.mainCollectionView.bounds
        let contentOffset = CGFloat(floor(self.mainCollectionView.contentOffset.x + collectionBounds.size.width))
        self.moveToCell(contentOffset: contentOffset)
    }

    func moveToPreviousCell(){
        let collectionBounds = self.mainCollectionView.bounds
        let contentOffset = CGFloat(floor(self.mainCollectionView.contentOffset.x - collectionBounds.size.width))
        self.moveToCell(contentOffset: contentOffset)
    }

    func moveToCell(contentOffset: CGFloat){
        let frame: CGRect = CGRect(x : contentOffset ,y : self.mainCollectionView.contentOffset.y ,width : self.mainCollectionView.frame.width,height : self.mainCollectionView.frame.height)
        self.mainCollectionView.scrollRectToVisible(frame, animated: true)
    }

这几乎就是实现该目标所需的全部内容。