Show number of items selected in UICollectionView - ios

Question

I am using UICollectionView to show the images. From that collectionView users can choose multiple images. Right now I am able to change view of selected images by overriding selected variable of UICollectionViewCell.
override var selected: Bool {
didSet {
if self.selected {
imageView.layer.borderWidth = 5.0
} else {
imageView.layer.borderWidth = 0.0
}
}
}
I put a UILabel at the top of UIImageView of cell to show the count. But I am not able to update the number of selected images. The count should be updated when user deSelect the image. How can i achieve this? It should be similar to Facebook image picker.I do not want to reload collectionView.

Answer 1

As you clarified in your comments, you want the number in the cell to show the order of the selected image.
Add a singleton class to hold an array of selected image IDs. The characteristic of a singleton is that its instance is accessible from everywhere in your app:
class ImageSelectionManager {
/// The singleton instance
static let instance = ImageSelectionManager()
/// This is the array that holds the order of selected image IDs
var selectedImageIds: [String] = []
}
In your UICollectionViewController implement the following delegate functions:
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)
}
}
In your UICollectionViewCell add an observer to notifications and a function to update the counter label:
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
}
}
}
}
}
It works like this:
A cell is selected / deselected.
The cell's image ID is added / removed from the singleton's array.
A notification is sent to the cells.
Each cell receives a notification and checks the position of its image ID in the singleton's array.
If the image ID has a position in the array, the label text is updated with the position. If the image ID is not found that means the cell is not selected so the label text is removed.

Answer 2

First you will need a model class to store the selection status and the other attributes.
For example you are populating data for an Image in your collectionView.
class MyImage : NSObject {
var name : String?
var selectionNumber : Int? // Using for selection update on UI
/*other properties below*/
}
Now in your Collection View Cell make a MyImage property with hooked didSet
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 = ""
}
}
Now In your view controller class or the class where you are implementing collectionView's delegate methods.
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
}
Where your dataSource will be the array containing MyImage objects and create an array for storing selected indexPaths.
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])
}