在 collectionView 的两个不同单元格中显示 highchart 和 swiftDataTable

Posted 2023-02-23

【中文标题】在 collectionView 的两个不同单元格中显示 highchart 和 swiftDataTable

【英文标题】：Display highchart and swiftDataTable in two different cells of a collectionView

【发布时间】：2018-11-28 08:19:56

【问题描述】：

我正在尝试在第一个 collectionViewCell 中为每个报告显示关联的图表（使用 HighChart），当您向右滑动时，您会在第二个 collectionViewCell 中获得关联的数据表（我使用 SwiftDataTables）。我遇到的问题最近三天一直面临的是，我无法使用

在 collectionviewCell 中显示它们中的任何一个

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell

这是我的代码：

1- collectionView 和 customCell 实例：

lazy var collectionView: UICollectionView = 
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .white
        cv.dataSource = self
        cv.delegate = self
        cv.isPagingEnabled = true

        return cv
    ()

var pages: [Page] = []

2-自定义 CollectionViewCell : PageCell

import UIKit
import Highcharts
import SwiftDataTables
import ChameleonFramework

class PageCell: UICollectionViewCell 

    var imageView: UIImageView = 
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFill
        iv.backgroundColor = .yellow
        iv.image = UIImage(named: "background_2")
        iv.clipsToBounds = true
        return iv
    ()

    var pageView: UIView= 
        let pv = UIView()
        pv.contentMode = .scaleAspectFill
        pv.clipsToBounds = true

        return pv
    ()


    var page: Page? 
        didSet 
           // print(page?.mainView)

            guard let unwrappedPage = page else 
                return
            
            //imageView.image = UIImage(named: unwrappedPage.image)//unwrappedPage.image

            pageView = unwrappedPage.mainView
            imageView.image = UIImage(named: unwrappedPage.image)

            print("imageView.image: ", imageView.image)
            print("PageViewContent: ", pageView)
            print("unwrappedPage.mainView: ", unwrappedPage.mainView)
        
    


    override init(frame: CGRect) 
        super.init(frame: frame)

        setupViews()
    

    func setupViews() 

         addSubview(imageView)
         imageView.anchorWithConstantsToTop(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, topConstant: 70, leftConstant: 0, bottomConstant: 100, rightConstant: 0)



        addSubview(pageView)
        pageView.anchorWithConstantsToTop(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, topConstant: 70, leftConstant: 0, bottomConstant: 100, rightConstant: 0)


        //imageView.frame = CGRect(x: UIScreen.main.bounds.origin.x, y: UIScreen.main.bounds.origin.y+70, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height-100)



    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

3- 自定义单元格的结构：页面

import Foundation

struct Page 
    let mainView: UIView
    let image: String

2 - 将 collectionView 添加到 View + 设置约束

 //TODO: collectionView Config
  self.view.addSubview(self.collectionView)
  self.collectionView.anchorToTop(top: self.view.topAnchor, left: 
  self.view.leftAnchor, bottom: self.view.bottomAnchor, right: 
  self.view.rightAnchor)
  self.collectionView.register(PageCell.self, forCellWithReuseIdentifier: "cellId")
 self.pages = 
          let firstPage = Page(mainView: self.chartView, image: "background_2")
          let secondPage = Page(mainView: self.chartView, image: "background_2")
           return [firstPage, secondPage]
                    ()

3-CollectionView 方法：

    //MARK: - UICollectionViewController Extension
extension SecondViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout 



    //TODO: numberOfItemsInSection method
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return pages.count
    


    //TODO: cellForItemAt method
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! PageCell

        let page = pages[indexPath.item]

        cell.page = page

        return cell
    

    //TODO: collectionViewLayout method

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        return CGSize(width: view.frame.width, height: view.frame.height)
    


    //TODO: scrollViewWillEndDragging method
    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) 

        let x = targetContentOffset.pointee.x

        pageControl.currentPage = Int(x / view.frame.width)


    

知道对于 imageView 的情况，它工作得很好，我在关联的单元格中获取每个图像，但对于视图（chatyView 和数据表），它是一个空白区域，除非我在集合视图之后添加它们：

self.collectionView.addSubview(self.chartView)

self.chartView.anchorWithConstantsToTop(top: self.view.topAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 50, leftConstant: 0, bottomConstant: 20, rightConstant: 0)  


self.collectionView.addSubview(self.dataTable) 

self.dataTable.anchorWithConstantsToTop(top: self.view.topAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 70, leftConstant: 0, bottomConstant: 20, rightConstant: 0)

这是唯一有效的情况，但它不能满足我的需要，因为它们在每个单元格中显示在另一个的顶部：/。

到目前为止我已经尝试过但对我不起作用：

我没有使用 PageCell 作为自定义单元格，而是使用 UICollectionViewCell，并且我通过使用 append 创建了一个 UIView 数组，我添加了视图并尝试使用 itemForCellAtIndexpath 方法将它们分配给适当的单元格。没有工作。

我使用的是 cell.contanView.addSubView() 而不是 cell = page[indexPath.item]。也没有幸运。

还尝试使用 UIView 的 Array 的位置来使用特定类型，例如 HiChartView/SwiftDatable。但没用。

我发现奇怪的是它与 UIImageView 完美配合，但不适用于图表或 dataTable，除非我在 collectionView 配置之后添加它们。

提前致谢（y）

【参考方案1】：

我通过删除：

self.dataTable.anchorWithConstantsToTop(top: self.view.topAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 70, leftConstant: 0, bottomConstant: 20, rightConstant: 0)

而是添加：

self.dataTable.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.frame.size.height)

chartView 也一样。