如何使用按钮从集合视图（网格视图）切换到表格视图（列表视图）？

Posted 2023-03-14

【中文标题】如何使用按钮从集合视图（网格视图）切换到表格视图（列表视图）？

【英文标题】：how to switch from collection view(grid view) to table view(list view) using a button?

【发布时间】：2017-08-01 06:15:44

【问题描述】：

在这我已经实现了集合视图需要使布局无效并且需要在我选择一个按钮时实现表格视图（列表视图）图像如下所示

谁能告诉我如何在 swift 3 中实现这一点？

上面提到的这张图片已经在代码中实现了，现在我需要更改为上面图片中提到的那样。

【问题讨论】：

你想实现像底部图像一样的视图吗？

没有顶部图像底部图像已经实现@AbhishekJain

我在顶部有一个按钮，我点击它然后它需要更改为表格视图（列表视图）@AbhishekJain

【参考方案1】：

试试这个

import UIKit 
      class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource ,UICollectionViewDelegate,UICollectionViewDataSource


@IBOutlet weak var tableView: UITableView!
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() 
    super.viewDidLoad()
    
    tableView.alpha = 0
    collectionView.alpha = 1
       

@IBAction func Button1(_ sender: Any) 
    
    tableView.alpha = 0
    collectionView.alpha = 1


@IBAction func Button2(_ sender: Any) 
    
    tableView.alpha = 1
    collectionView.alpha = 0


// Table View
func numberOfSections(in tableView: UITableView) -> Int 
    return 1
    

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
    
    
    return 4


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
    cell.lblName.text = "dd "
    cell.lblreview.text = " fff"
    return cell

//Collection View

func numberOfSections(in collectionView: UICollectionView) -> Int 
    return 1


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


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

【讨论】：

我试过你说的但是当我点击一个按钮时我得到了这个错误，错误是这个 2017-08-01 16:30:57.639 Ecommerce[6043:141264] *** Terminating应用程序由于未捕获的异常“NSInternalInconsistencyException”，原因：“无法将具有标识符 productsCell 的单元格出列 - 必须为标识符注册一个 nib 或类或连接故事板中的原型单元格”@Subojit Mandal

【参考方案2】：

添加tableViewDelegate

     class ViewController:UIViewController,UITableViewDelegate,UITableViewDataSource 

现在添加三个协议

     func numberOfSections(in tableView: UITableView) -> Int 
    return 1



func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
    return item_name.count




    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
      let cell = tableView.dequeueReusableCell(withIdentifier: "MedicineTableViewCell", for: indexPath) as! MedicineTableViewCell


        cell.btnAdd.addTarget(self, action: #selector(BtnHide), for: .touchUpInside)

    cell.btnAdd.tag = indexPath.row




    return cell

这是当你的单元格被点击时

  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) 

这是当你的按钮被点击时

    func BtnHide(sender: UIButton) 

          print(sender.tag)

       

不要忘记连接数据源并从表格视图委托到情节提要中的 ViewController

【讨论】：

不，不像这样，如果我点击它，我的收藏视图布局需要更改并更改为第一个提到的图像@Subhojit Mandal

那么当我在其上放置表格视图时，集合视图没有问题？@Subhojit Mandal

zappdesigntemplates.com/… 这样我需要你的代码能得到吗？

不了解您的确切问题，您能否提供更多信息

我已经实现了集合视图，如第二张图片所示，现在当我单击同一屏幕中的按钮然后在同一屏幕中我需要显示第一张图片所示的表格视图设计而不更改任何数据@Subhojit Mandal

【参考方案3】：

添加这个 UICollectionViewDelegateFlowLayout

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


    if self.varname == "Collection"  
    return CGSize(width: self.view.frame.width*0.47, height: self.view.frame.height*0.21)
  else

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

【讨论】：

但是如果我使用此代码，我可以在另一边获得产品名称和价格

这意味着图像应该在左边，名称价格和按钮应该放在右边，这可能吗？ @Subhojit Mandal

【参考方案4】：

使用 Collectionview :- 将 gridview 更改为 listview 或反之亦然的简单方法。

制作两个布局

private lazy var listCVLayout: UICollectionViewFlowLayout = 
let collectionFlowLayout = UICollectionViewFlowLayout()
collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
collectionFlowLayout.itemSize = CGSize(width: SCREEN_WIDTH, height: 80)
collectionFlowLayout.minimumInteritemSpacing = 0
collectionFlowLayout.minimumLineSpacing = 0
collectionFlowLayout.scrollDirection = .vertical
    return collectionFlowLayout
()

private lazy var gridCVLayout: UICollectionViewFlowLayout = 


let collectionFlowLayout = UICollectionViewFlowLayout()
collectionFlowLayout.scrollDirection = .vertical
collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
collectionFlowLayout.itemSize = CGSize(width: (SCREEN_WIDTH - 80) / 2 , height: SCREEN_HEIGHT*0.16)
collectionFlowLayout.minimumInteritemSpacing = 20
collectionFlowLayout.minimumLineSpacing = 20
    return collectionFlowLayout
()

最后在切换视图时使用这个

  self.listCV.startInteractiveTransition(to: isListView ? self.listCVLayout : self.gridCVLayout, completion: nil)
  self.listCV.finishInteractiveTransition()