水平和垂直collectionViews在同一个视图Controller

Posted

技术标签:

【中文标题】水平和垂直collectionViews在同一个视图Controller【英文标题】:Horizontal and vertical collectionVIews in the same view Controller 【发布时间】:2020-03-21 11:14:25 【问题描述】:

我需要在 viewController 中显示两个 collectionView。

在顶部单行,然后在视图的其余部分是具有垂直滚动和两列的 collectionView。

这是显示两个 collectionView 的当前代码:

@IBOutlet weak var collectionViewMarcas: UICollectionView!

var marcas = [Marcas]()

@IBOutlet weak var collectionViewDispositivos: UICollectionView!

var dispositivos = [Dispositivos]()


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

    if collectionView == collectionViewMarcas 
        return marcas.count
    

        return dispositivos.count








   func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 

      // print("MARCA:"+marcas[indexPath.row].nombre)
   


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


    if collectionView == self.collectionViewMarcas 
              let cellMarcas = collectionView.dequeueReusableCell(withReuseIdentifier: "marca", for: indexPath) as! MarcasCollectionViewCell
               let foto_marca = marcas[indexPath.row].icono
                       print(foto_marca)


                       let url = URL(string: "https://.../iconos/"+foto_marca)

                       UIImage.loadFrom(url: url!)  image in
                           cellMarcas.icono_marca.image = image

                       


              return cellMarcas
          

          else 
               let cellDisp = collectionView.dequeueReusableCell(withReuseIdentifier: "dispositivo", for: indexPath) as! DispositivosCollectionViewCell

             let foto_dispos = dispositivos[indexPath.row].foto_dispositivo
             print(foto_dispos)

        let modelo = dispositivos[indexPath.row].modelo_del_dispositivo
        cellDisp.modelo_disp.text = modelo
        let precio = dispositivos[indexPath.row].precio_dispositivo + " €"
        cellDisp.precio_disp.text = precio
        let marca = dispositivos[indexPath.row].logo_marca
        let urlmarca = URL(string: "https://../iconos/"+marca)
        UIImage.loadFrom(url: urlmarca!)  image in
                       cellDisp.marca_logo.image = image

                   
        let urlfoto = URL(string: "https://.../dispositivos/"+foto_dispos)

        UIImage.loadFrom(url: urlfoto!)  image in
            cellDisp.foto_disp.image = image

        

              return cellDisp
          


   

这里有一个截图:

我已经尝试实现 UICollectionViewDelegateFlowLayout 然后

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        let padding: CGFloat =  50
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
    

此实现适用于垂直 collectionView,但它也改变了水平。

我怎样才能只改变垂直布局?

【问题讨论】:

如果collectionView是你的verticalCollectionView,我可以知道你为什么不比较?即if collectionView == collectionViewMarcas ... else ... @RevanthKausikan,我也试过这个,但我总是把两个集合视图都改变了。 【参考方案1】:

你需要同时返回Collection view Size的collectionViewLayout委托方法

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

//You only apply the changes to collectionViewMarcas
 if collectionView == self.collectionViewMarcas 
 
    let padding: CGFloat =  50
    let collectionViewSize = collectionView.frame.size.width - padding

    return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
  

  // Here Below Line You need To return collectionViewDispositivos cell size
  return CGSize(width: 60, height: 60)

【讨论】:

【参考方案2】:

在您的cellForItemAt 方法中,您正确地检查了您将单元格分配给哪个集合视图。你基本上必须在collectionView(_:layout:sizeForItemAt:) 中做同样的事情。

由于您的集合视图的委托和数据源都是同一个视图控制器,因此无需检查更改是否应用于两者。

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

    //You only apply the changes to collectionViewMarcas
    if collectionView == self.collectionViewMarcas 
        let padding: CGFloat =  50
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
    

【讨论】:

您的提案抛出异常:缺少返回 当然,else 不见了。但是@mvasco 评论说>“但我总是让两个集合视图都改变”

以上是关于水平和垂直collectionViews在同一个视图Controller的主要内容,如果未能解决你的问题,请参考以下文章

如何解决水平滚动和垂直滚动的 CollectionView contentOffSet 问题?

Swift:按下collectionView项目时推送新视图

SYRefresh 一款简洁易用的刷新控件 支持tableview,collectionview水平垂直刷新功能

如何滚动到 UICollectionView 的中心(水平和垂直)

用连续卷轴查看;水平和垂直

**防止在水平滚动视图内拖动两个 CollectionView **