如何使用按钮从集合视图(网格视图)切换到表视图(列表视图)?

时间:2017-08-01 06:15:45

标签: swift3 uicollectionview

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

image

有人能告诉我如何在swift 3中实现这个吗?

This image

上面提到的图片已经在代码中实现,我需要更改为上图所示。

4 个答案:

答案 0 :(得分:0)

添加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

答案 1 :(得分:0)

添加此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)
 }

}

答案 2 :(得分:0)

试试这个

  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
}

https://i.stack.imgur.com/LIGyi.png

你完成了这个过程

 https://i.stack.imgur.com/V07iM.png
 https://i.stack.imgur.com/0mi9h.png
 https://i.stack.imgur.com/tTLMl.png
 https://i.stack.imgur.com/j9Y9e.png

答案 3 :(得分:0)

使用Collectionview:-将gridview更改为listview或verca的简便方法。

制作两种布局

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()