【问题标题】:Adding 'n' number of collection view to UIStackView in swift快速将“n”个集合视图添加到 UIStackView
【发布时间】:2018-05-15 10:22:36
【问题描述】:

我有一个ViewController 类,我将scrollView 放入其中,并将stackView 添加为子视图。现在我想在stackView 中添加“n”个collectionView。我正在从服务器获取数据,会有不同的类别。如果 A 类有数据,那么我需要为此创建一个 collectionView。我需要在他们的班级中处理相应的collectionView 的数据。

class ViewController: UIViewController {

var scrollView : UIScrollView!
var stackView : UIStackView!
var responseFullData : JsonFullDataResponse!
var responseData : JsonResponse!

override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
    print("View Controller init")
    super.init(nibName: nil, bundle: nil)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

override func viewDidAppear(_ animated: Bool) {
    print("View did appear")
    scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)
}

override func viewDidLoad() {
    super.viewDidLoad()

    //loading all the data
    loadAllJsonData()

    //setting up scroll and stack views
    setUpScrollAndStackView()
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    print("inside layout")
    scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)
}

func setUpScrollAndStackView() {
    scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(scrollView)

    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[scrollView]|", options: .alignAllCenterX, metrics: nil, views: ["scrollView": scrollView]))
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[scrollView]|", options: .alignAllCenterX, metrics: nil, views: ["scrollView": scrollView]))

    stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.spacing = 20.0
    stackView.axis = .vertical
    scrollView.addSubview(stackView)


  scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[stackView]|", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["stackView": stackView]))
  scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[stackView]", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["stackView": stackView]))

    setUpOtherViewsInStack()
}

func setUpOtherViewsInStack() {
    if responseFullData.banner?.count != 0 {
        print("banner has data")

        var bannerCollection : BannerCollectionView = BannerCollectionView() as! BannerCollectionView
        bannerCollection.register(UINib.init(nibName: "BannerCell", bundle: nil), forCellWithReuseIdentifier: "BannerCell")
        stackView.addArrangedSubview(bannerCollection)
   }
}

BannerCollectionView 代码

class BannerCollectionView: UICollectionView , UICollectionViewDataSource{

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

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
        print("control is in datasource")
        return 5
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "BannerCell", for: indexPath) as! BannerCell
        cell.backgroundColor = UIColor.blue
        return cell
    }
}

我该如何进行这项工作。我应该在哪个类以及在哪里设置BannerCollectionViewdelegatedatasource 属性?我该如何初始化它?

【问题讨论】:

  • 在添加 StackView 之前尝试添加 bannerCollection.translatesAutoresizingMaskIntoConstraints = false
  • 一个问题,你需要在你的 UIStackView = responseFullData.banner?.count 中添加一些collectionViews ??
  • 没有。 ResponseFullData 有 5 个数组,如横幅、菜单、项目等。我正在检查每个数组的计数是否不为 0,然后为每个数组添加集合视图以显示那里的项目。你明白我的意思了吗?
  • ResponseFullData 是字典吗?其他数组的键是什么?
  • class JsonFullDataResponse : HandyJSON { var banner : [Banner]? var menuData:[菜单数据]? var selectedGoods : [SelectedGoods]? var 商人:[商人]? var bestSelling : [BestSelling]? var 营销:[营销]?

标签: ios swift uicollectionview uicollectionviewlayout uistackview


【解决方案1】:

据我了解,您需要从 0 开始 for 以计数 responseFullData.banner.count 每次添加一个 collectionView

if let count = responseFullData.banner?.count {
    for i in 0..<count {
        var bannerCollection : BannerCollectionView = BannerCollectionView() as! BannerCollectionView
        bannerCollection.register(UINib.init(nibName: "BannerCell", bundle: nil), forCellWithReuseIdentifier: "BannerCell")
        stackView.addArrangedSubview(bannerCollection)
    }
}

【讨论】:

    【解决方案2】:

    我在 UIStackView(垂直堆栈)中添加了 3 个 collectionView。整个视图可以垂直滚动,集合项可以水平或垂直滚动​​。

    class HomePageViewController: UIViewController,HeaderViewDelegate {
    
    var scrollView : UIScrollView!
    var stackView : UIStackView!
    var responseFullData : JsonFullDataResponse!
    
    if responseFullData?.menu?.count != nil{
            print("menu has data")
    
            var menuCollection : MenuCollectionView = MenuCollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout.init())
            menuCollection.backgroundColor = .white
            menuCollection.menuData = (self.responseFullData.menu)!
            menuCollection.dataSource = menuCollection.self
            menuCollection.delegate = menuCollection.self
            createCollectionViews(collectionViewClass: menuCollection, identifier: "MenuCell",height : 175)
        }
        if responseFullData?.hongbei?.count != nil {
            print("hongbei has data")
            var hongbeiCollection : HongbeiCollectionView = HongbeiCollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout.init())
    
            hongbeiCollection.dataSource = hongbeiCollection
            hongbeiCollection.delegate = hongbeiCollection
            hongbeiCollection.allowsSelection = true
            hongbeiCollection.backgroundColor = .white
            hongbeiCollection.hongbeiData = (self.responseFullData.hongbei)!
    
    
            addHeaderView(headerTitle : "Hongbei")
            createCollectionViews(collectionViewClass: hongbeiCollection, identifier: "HongbeiCell",height : 150)
    
        }
        if responseFullData?.freeZone?.count != nil {
            print("freezone has data")
            var freezoneCollection : FreeZoneCollectionView = FreeZoneCollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout.init())
            freezoneCollection.dataSource = freezoneCollection.self
            freezoneCollection.delegate = freezoneCollection.self
            freezoneCollection.backgroundColor = .white
            freezoneCollection.freeZoneData = (self.responseFullData.freeZone)!
            addHeaderView(headerTitle : "FreeZone")
            createCollectionViews(collectionViewClass: freezoneCollection, identifier: "FreeZoneCell",height : 150)
        }
    
    func createCollectionViews(collectionViewClass : UICollectionView, identifier : String,height : CGFloat ){
    
        collectionViewClass.widthAnchor.constraint(equalToConstant: self.view.frame.width).isActive = true
        collectionViewClass.heightAnchor.constraint(equalToConstant: height).isActive = true
        collectionViewClass.register(UINib.init(nibName: identifier, bundle: nil), forCellWithReuseIdentifier: identifier)
        collectionViewClass.showsHorizontalScrollIndicator = false
        collectionViewClass.showsVerticalScrollIndicator = false
    
        stackView.addArrangedSubview(collectionViewClass)
    
    }
    
     func addHeaderView(headerTitle : String){
        let headerView = HeaderView.instanceFromNib() as! HeaderView
        headerView.widthAnchor.constraint(equalToConstant: self.view.frame.width).isActive = true
        headerView.heightAnchor.constraint(equalToConstant: 20).isActive = true
        headerView.headerLabel.text = headerTitle
        headerView.frame = headerView.frame.offsetBy(dx: 20, dy: 0)
        headerView.delegate = self
        stackView.addArrangedSubview(headerView)
    
    }
    

    }

    class MenuCollectionView: UICollectionView,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
    
    var menuData : [MenuData]!
    
    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        super.init(frame: frame, collectionViewLayout: layout)
    
    }
    
       func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
        print("Menu")
        return menuData.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MenuCell", for: indexPath) as! MenuCell
    
        cell.menuLabel.text = menuData[indexPath.item].title!
    
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
        return CGSize(width: (collectionView.frame.width * 0.175), height: 75)
    }
    

    堆栈中的每个 collectionView 都有一个单独的类,我在其中处理数据源和委托方法。所以我可以在每个 collectionView 中为我想要的任何数量的集合项目。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-06-05
      • 2017-05-19
      • 2020-10-06
      • 1970-01-01
      • 1970-01-01
      • 2017-10-09
      • 2017-07-01
      • 2019-04-18
      相关资源
      最近更新 更多