如何使用 Swift 4 在 UICollection 视图中进行多项选择

Question

我是 swift 新手，从头开始构建 iOS 应用程序（使用 swift 4），想要执行如下操作。 1.在UICollectionView中实现多单元格选择， 2. 将选定的单元格数据传递到服务器。 请任何人都可以帮助我，该怎么做？告诉我执行此操作的流程和支持文章。

以下是参考图片。预先感谢。

Answer 1

嗯，在 UICollectionView 中处理多个选择的最佳方式

1. 启用多项选择

myCollectionView.allowsMultipleSelection = true

2. 将此代码放入您的手机中

   awakeFromNib

override func awakeFromNib() {
  super.awakeFromNib()
        
  let view = UIView(frame: bounds)
  self.backgroundView = view
        
  let coloredView = UIView(frame: bounds)
  coloredView.backgroundColor = UIColor.red
  self.selectedBackgroundView = coloredView
}

3. 您可以获得所选的

   indexPath

   物品

let items = myCollectionView.indexPathsForSelectedItems

Answer 2

这个基本示例。您可以根据您的数据进行更改。

当您选择任何单元格时，您需要检查所选单元格之前是否已被选择。

如果没有，则在

indexPath

中添加所选单元格

indexArray

并在

valueArray

中添加所选单元格值。

如果先前选择了当前选定的单元格，则从

indexPath

中删除

indexArray

，并从

valueArray

中删除选定的单元格值

在

continue

按钮上按下

arrSelectedData

到服务器或下一个屏幕。

定义以下3个数组。

var arrData = [String]() // This is your data array
var arrSelectedIndex = [IndexPath]() // This is selected cell Index array
var arrSelectedData = [String]() // This is selected cell data array

//UICollectionView 委托和数据源

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 
{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.arrData.count
    }

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

        if arrSelectedIndex.contains(indexPath) { // You need to check wether selected index array contain current index if yes then change the color
            cell.vw.backgroundColor = UIColor.red
        }
        else {
            cell.vw.backgroundColor = UIColor.lightGray
        }

        cell.layoutSubviews()
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("You selected cell #\(indexPath.item)!")

        let strData = arrData[indexPath.item]

        if arrSelectedIndex.contains(indexPath) {
            arrSelectedIndex = arrSelectedIndex.filter { $0 != indexPath}
            arrSelectedData = arrSelectedData.filter { $0 != strData}
        }
        else {
            arrSelectedIndex.append(indexPath)
            arrSelectedData.append(strData)
        }

        collectionView.reloadData()
    }
}

Answer 3

您可以编写这样的代码来启用多重选择:-

yourCollectionViewName.allowsMultipleSelection = true   

然后你可以这样做来查看选定的单元格 -

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    var cell = collectionView.cellForItemAtIndexPath(indexPath)
    if cell?.selected == true {
        cell?.backgroundColor = UIColor.orangeColor()
    }
}

要取消选择，您可以执行以下操作 -

func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {        
   var cell = collectionView.cellForItemAtIndexPath(indexPath)
   cell?.backgroundColor = UIColor.clearColor()
}

Answer 4

• 启用多项选择

    collectionView.allowsMultipleSelection = true

• CollectionViewCell 的 Overrider isSelected 属性。

    override var isSelected: Bool {
        didSet {
            if self.isSelected {
                //You can change this method according to your need.
                setSelected()
            }
            else {
                //You can change this method according to your need.
                setUnselected()
            }
        }
    }

    func setSelected(){
        bgView.layer.borderWidth = 4
        bgView.layer.borderColor = UIColor.Palette.darkBlue.cgColor
        bgView.backgroundColor = .blue.withAlphaComponent(0.2)
    }
    
    func setUnselected(){
        bgView.layer.borderWidth = 0
        bgView.backgroundColor = .white
    }

• 您可以打印所选单元格的索引路径

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print(collectionView.indexPathsForSelectedItems)
    }

Answer 5

那么，要实现这样的目标，主要需要执行以下任务

1. 每当用户单击特定单元格时，您都需要在 didSelectItemAt

   的

   UICollectionView

   委托方法中更改该
   item
的背景颜色

2. 现在要将数据发送到 server，您需要一个

   array

   来存储所有选定的单元格，然后将该数组发送到 server 。您也可以在

   didSelectItemAt

   方法中执行相同的操作

我可以向您展示该函数的原型：

假设您有一个名为

arrayForPopulating

的数组，用于在

Collection View

内填充数据，并且我们有一个名为

finalSelections

的数组，其中包含用户所做的所有选择的名称

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

   let cell = collectionView.cellForItem(at: indexPath)

   // Change the background colour of the cell here
   cell.contentView.backgroundColor = UIColor.red

   // Add the selected cell's data to the array
   finalSelections.append(arrayForPopulating[indexPath.row])

}

现在您可以将

finalSelections

数组发送到服务器！

Answer 6

在您的集合视图单元格内，

class CollectionCell: UICollectionViewCell {
    
    @IBOutlet weak var serviceLbl: UILabel!
    
    override var isSelected: Bool {
        didSet {
            if self.isSelected {
                contentView.layer.borderColor = UIColor.yellow.cgColor
                contentView.layer.borderWidth = 1
                contentView.layer.masksToBounds = true
            }
            else {
                contentView.layer.borderColor = UIColor.clear.cgColor
                contentView.layer.borderWidth = 1
                contentView.layer.masksToBounds = true
            }
        }
    } 
}

然后在控制器中声明，

collectionView.allowsMultipleSelection = true 

最后在didSelect中打印索引

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print(collectionView.indexPathsForSelectedItems)
    }