显示在UICollectionView

时间:2016-09-01 07:30:39

标签: ios swift uicollectionview uicollectionviewcell

我正在使用UICollectionView来显示图像。从该collectionView用户可以选择多个图像。现在,我可以通过覆盖UICollectionViewCell的选定变量来更改所选图像的视图。

override var selected: Bool {
didSet {
    if self.selected {
        imageView.layer.borderWidth = 5.0
    } else {
        imageView.layer.borderWidth = 0.0
    }
}
}

我将UILabel放在单元格的UIImageView顶部以显示计数。但我无法更新所选图像的数量。当用户取消选择图像时,应更新计数。我怎样才能实现这一目标?它应该类似于Facebook图像选择器。我不想重新加载collectionView。

2 个答案:

答案 0 :(得分:1)

正如您在评论中澄清的那样,您希望单元格中的数字显示所选图像的顺序。

添加 singleton 类以保存所选图像ID的数组。单例的特点是可以从应用程序的任何位置访问其实例:

class ImageSelectionManager {

    /// The singleton instance
    static let instance = ImageSelectionManager()

    /// This is the array that holds the order of selected image IDs
    var selectedImageIds: [String] = []
}

UICollectionViewController中实现以下委托功能:

class YourViewController: UICollectionViewController {

    override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

        // Get the selected cell
        let cell = collectionView.cellForItemAtIndexPath(indexPath) as! YourCell

        // Get the selected image ID
        let imageId = cell.imageId

        // Add ID
        ImageSelectionManager.instance.selectedImageIds.append(imageId)

        // Notify cells that image array has changed
        NSNotificationCenter.defaultCenter().postNotificationName(
            "ImageSelectionChangedNotification",
            object: self)
    }

    override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {

        // Get the deselected cell
        let cell = collectionView.cellForItemAtIndexPath(indexPath) as! YourCell

        // Get the deselected image ID
        let imageId = cell.imageId

        // Remove ID
        ImageSelectionManager.instance.selectedImageIds = ImageSelectionManager.instance.selectedImageIds.filter({ $0 != imageId })

        // Notify cells that image array has changed
        NSNotificationCenter.defaultCenter().postNotificationName(
            "ImageSelectionChangedNotification",
            object: self)
    }
}

UICollectionViewCell添加观察者通知和更新计数器标签的功能:

class YourCell: UICollectionViewCell {

    /// The ID of your image that the cell is showing
    var imageId: String!

    /// The counter label
    var counterLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()

        // Start listening to notifications
        registerForNotifications()
    }
    override func prepareForReuse() {
        super.prepareForReuse()

        counterLabel.text = nil
    }

    deinit {
        unregisterFromNotifications()
    }

    func registerForNotifications() {

        // Make the cell listen to changes in the selected images array
        NSNotificationCenter.defaultCenter().addObserver(
            self,
            selector: #selector(self.handleNotification(_:)),
            name: "ImageSelectionChangedNotification",
            object: nil)
    }

    func unregisterFromNotifications() {

        // Stop listening to notifications
        NSNotificationCenter.defaultCenter().removeObserver(self)
    }

    func handleNotification(notification: NSNotification) {

        // If the notification is the one we are listening for
        if notification.name == "ImageSelectionChangedNotification" {

            // Execute on main thread because you are changing a UI element
            dispatch_async(dispatch_get_main_queue()) {

                // Get the position in the selected images array
                if let position = ImageSelectionManager.instance.selectedImageIds.indexOf({ $0 == self.imageId }) {

                    // Image position was found so set the label text
                    self.counterLabel.text = String(position)

                } else {
                    // Image was not found no remove the label text
                    self.counterLabel.text = nil
                }
            }
        }
    }
}

它的工作原理如下:

  1. 选择/取消选择单元格。
  2. 在单例阵列中添加/删除单元格的图像ID。
  3. 会向单元格发送通知。
  4. 每个单元格都会收到一个通知,并检查单个数组中图像ID的位置。
  5. 如果图像ID在阵列中有位置,则标签文本将根据位置进行更新。如果未找到图像ID,则表示未选择单元格,因此将删除标签文本。

答案 1 :(得分:0)

首先,您需要一个模型类来存储选择状态和其他属性 例如,您要在collectionView中填充Image的数据。

class MyImage : NSObject {
   var name : String?
   var selectionNumber : Int? // Using for selection update on UI 
  /*other properties below*/

}

现在,在Collection View Cell中,使用hooked didSet

创建一个MyImage属性
var image : MyImage? {
didSet {
   imageView.image = UIImage(named:image.name)
   if image.selectionNumber != nil {
      imageView.layer.borderWidth = 5.0
      lblCount.text = String(selectionNumber + 1)
   }
   else {
      imageView.layer.borderWidth = 0.0
      lblCount.text = ""
   }
}

现在在视图控制器类或实现collectionView的委托方法的类中。

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell
{
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kYour_Cell_ID, forIndexPath: indexPath) as! YourCustomCell
    let myImage = self.dataSource[indexPath.row]
    myImage.selectionNumber = self.selectedIndexes.contains(indexPath)
    cell.image = myImage
    return cell
}

您的dataSource将是包含MyImage对象的数组,并创建一个用于存储所选indexPath的数组。

   func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
    {
        let idx = self.selectedIndexes.indexOf(image)
        if (idx != nil) {
            self.selectedIndexes.remove(indexPath.row)
        }
        else
        {
           self.selectedIndexes.append(indexPath.row)
        }
       self.collectionView.reloadItemsAtIndexPaths([self.selectedIndexes])
    }