I have a collectionview with various cells. One can be selected at once and the selection state is stored inside my business logic. If a cell is selected the whole section get's reloaded to update the UI to highlight the currently selected cell.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
...
cell.setItemSelected(selected: selected)
return cell
}
My problem is that a random cell get's highlighted to for a short time.
I also implemented prepareForReuse() but without any effect.
What can cause this?
Thanks!
Here the requested additional code:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let pendencyDeficiencyType = deficiencyTypes[indexPath.row]
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: PendencyDetailCell.reuseIdentifier, for: indexPath) as? PendencyDetailCell{
cell.titleLabel.attributedText = StringUtils.hyphenedText(pendencyDeficiencyType.rawValue)
cell.indexPath = indexPath
cell.delegate = self
let selected = pendencyDeficiencyType == pendencyItem?.pendencyDeficiencyType
cell.setItemSelected(selected: selected)
return cell
}
return collectionView.dequeueReusableCell(withReuseIdentifier: PendencyDetailCell.reuseIdentifier, for: indexPath)
}
override func prepareForReuse() {
super.prepareForReuse()
backgroundColor = Styling.cellDefaultColor
titleLabel.textColor = .black
}
func setItemSelected(selected: Bool){
layer.borderColor = selected ? Styling.heagPrimary.cgColor : UIColor.darkGray.cgColor
backgroundColor = selected ? Styling.cellSelectedColor : Styling.cellDefaultColor
titleLabel.textColor = selected ? .white : .black
}
As an option you can implement two separate cells.. one for each state and use it depending on the flag.
OR
Try to use different ReuseIdentifiers depending on the flag.
Related
I have a collection view with a reusable cell. That cell has a background, label and button. I can reference which background is in each cell. I would like to update the text in the label when the button is pressed based on which background that cell has. I am having trouble referencing the cell. let cell = collectionView.cellForItem(at: indexPath) gives me an error. How do I reference this cell?
I am ok if the label gets reset when the user scrolls the collection view.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyColectionCell
cell.CellBG.image = UIImage(named: ButtonBGs[indexPath.row])
cell.CellBG.layer.cornerRadius=10
cell.layer.shadowColor = UIColor.black.cgColor
cell.layer.shadowOffset = CGSize(width: 1, height: 10)
cell.layer.shadowOpacity = 0.3
cell.layer.shadowRadius = 10
cell.layer.masksToBounds = false
cell.Info.tag = indexPath.row
cell.Info.addTarget(self, action: #selector(Info), for: .touchUpInside)
cell.CellText.text = " "
cell.CellText.tag = indexPath.row
return cell
}
#objc func Info(sender: UIButton){
let indexPath = IndexPath(row: sender.tag, section: 0)
let cell = collectionView.cellForItem(at: indexPath) //gives me error "Reference to member 'cellForItem' cannot be resolved without a contextual type"
if((ButtonBGs[indexPath.row])=="bt-tower"){
cell.CellText.text = "New Text"
}
}
I would recommend a different approach to this. The code you provided indicates all of this could be performed in the cell itself.
Give it a property of type String that holds the imagename, assign it inside of func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: and perform the button action/comparison inside the Button #IBAction.
Also, that code manipulating the layer should also be in the cell itself. The cellForItemAt indexpath: function should only provide the data the cell presents.
I am using an array for the label text and keeping the labels alpha at 0. When I need to display it I change the alpha and reload the data self.myCollection.reloadItems(at: [indexPath]) This way only the text for the indexed cell is shown.
I have a Horizontal UICollectionView like the horizontal Calender in iOS.
Paging is enabled but not allowsMultipleSelection.
self.allowsMultipleSelection = false
self.isPagingEnabled = true
There are only 5 cells per page.
let cellSize = CGSize(width: self.view.frame.width / 5 , height: 60)
CollectionView's height is also 60.
didSelectItemAt change background color to .red and didDeselectItem resets it to .white.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
if let cell = cell {
cell.backgroundColor = .red
}
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
if let cell = cell {
cell.backgroundColor = .white
}
}
The collection view has multiple sections and rows. If I select a cell in the first visible page and scroll, random cells are selected in the next visible pages. That is to say random cells are red in the next pages. I do not want this to be so. I want to select/change color of cells manually.
How can I fix this?
Don't forget that UICollectionView has embedded reusing mechanism, so you should deselect your cells in the method "prepareToReuse" directly inside the cell class.
Take a class-level variable, say index
var index = -1
As you have said that multiple selections are not allowed so the following will do the job for you
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
index = indexPath.item
collectionView.reloadData()
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
if let cell = cell {
cell.backgroundColor = indexPath.item == index ? .red : .white
}
}
Whenever user tap on any cell we save the position in index variable and then call the reloadData() to notify collectionView about the change
In cellForRowAt we check if the current cell us selected we set the color to red otherwise white
First, if you want to preserve multiple selection, you have to remember your selected ones in an array since it would get lost if a cell gets recycled and reused. For that use something like a [IndexPath] type). If one selected cell is enough, you could use a non-array version of below code.
var selectedItems: [IndexPath] = []
Then, do your recoloring in your cell's cellForItemAt(:):
cell.backgroundColor = selectedItems.contains(indexPath) ? .red : .white
Your didSelectItemAt delegate function should look like:
if !selectedItems.contains(indexPath) { selectedItems.append(indexPath)}
collectionView.cellForItem(at: indexPath)?.backgroundColor = .red
and your didDeselectItemAt delegate function:
if let index = selectedItems.firstIndex(of: indexPath) { selectedItems.remove(at: index) }
collectionView.cellForItem(at: indexPath)?.backgroundColor = .white
This should actually work. Let me know if we have to do adjustments.
I have a collection view, and you can select the items in it and toggle them on and off by changing the background colour. The cells are toggled on/off thanks to a boolean I have in an arrow I made for all of the cells. I have saved the bool value but when I try to write them back into the array and use collectionView.reloadData()the app crashes. My collectionViewcode is:
extension OLLViewController: UICollectionViewDataSource, UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { //set the amount of items in the CollectionView to the amount of items in the OLLData dictionary
return OLLData.OLLCasesList.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { //set each cell to a different mamber of the dict.
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "OLLCell", for: indexPath) as! OLLCell
cell.imageView.backgroundColor = OLLData.OLLCasesList[indexPath.item]._isSelected ? UIColor.orange : UIColor.clear //change colour if selected
let image = OLLData.OLLCasesList[indexPath.item]._imageName
cell.label.text = image
cell.imageView.image = UIImage(named: image)
let savedIsSelected = defaults.bool(forKey: Key.isSelected)
OLLData.OLLCasesList[indexPath.item]._isSelected = savedIsSelected
//collectionView.reloadData() //when uncommented it crashes the app
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { //detect if case selected and reload CollectionView
let caseName = OLLData.OLLCasesList[indexPath.item]._imageName
print(caseName, OLLData.OLLCasesList[indexPath.item]._isSelected)
OLLData.OLLCasesList[indexPath.item]._isSelected = !OLLData.OLLCasesList[indexPath.item]._isSelected
defaults.set(OLLData.OLLCasesList[indexPath.item]._isSelected, forKey: Key.isSelected)
collectionView.reloadItems(at:[indexPath])
collectionView.reloadData()
if OLLData.OLLCasesList[indexPath.item]._isSelected == true { //if the item is selected, add to selectedCases array
selectedCases.append(OLLData.OLLCasesList[indexPath.item]._id)
selectedCaseNames.append(OLLData.OLLCasesList[indexPath.item]._imageName)
print(selectedCases, selectedCaseNames) //debugging
numberOfSelectedCases.text = String(selectedCases.count)
}
else if OLLData.OLLCasesList[indexPath.item]._isSelected == false { //remove from selectedCases array
selectedCases.removeAll(where: { $0 == OLLData.OLLCasesList[indexPath.item]._id })
selectedCaseNames.removeAll(where: { $0 == OLLData.OLLCasesList[indexPath.item]._imageName })
print(selectedCases, selectedCaseNames) //debugging
numberOfSelectedCases.text = String(selectedCases.count)
}
}
._isSelectedis the boolean that says whether the cell is 'toggled'.
Any ideas would be greatly appreciated.
First of all, uncommenting that line will produce an infinite loop. cellForRowAt happens because the collection view is reloading, so calling a refresh while the collection view is refreshing is no good.
So your issue is that you don't know how to display selected cells in your collection view, right?
Here's a function that fires right before the collection view is about to display a cell:
func collectionView(_ collectionView: UICollectionView,
willDisplay cell: UICollectionViewCell,
forItemAt indexPath: IndexPath)
{
<#code#>
}
Inside this function, you should:
Cast cell into your OLLCell (safely if you want to be thorough)
Look at your data and see if the cell should be selected OLLData.OLLCasesList[indexPath.item]._isSelected
Ask your casted cell to change its colors/UI/appearance according to your ._isSelected boolean
Step 3 has a VERY important caveat. You should be changing the UI when ._isSelected is false AND when it's true. Because the collection view reuses cells, old UI state will randomly recur. So setting it every time is a good way to ensure the behavior you want.
Here's an example:
func collectionView(_ collectionView: UICollectionView,
willDisplay cell: UICollectionViewCell,
forItemAt indexPath: IndexPath)
{
//Cast the vanilla cell into your custom cell so you have access
//to OLLCell's specific functions and properties.
//Also make sure the indexPath falls in the indices of your data
if let myCastedCell = cell as? OLLCell,
0 ..< OLLData.OLLCasesList.count ~= indexPath.item
{
myCastedCell.imageView.backgroundColor = OLLData
.OLLCasesList[indexPath.item]._isSelected
? UIColor.orange
: UIColor.clear
}
}
I'm new to swift and building iOS Application from the scratch (using swift 4) and want to do something like below.
1. Implement Multiple cell selections in UICollectionView,
2. Pass selected cells data to Server.
Please anyone can help me, how to do that? Tell me the process and supporting articles to do that.
Below is reference Image. Thanks in Advance.
Well, the best way to handle multiple selections in UICollectionView
Enable Multiple Selection
myCollectionView.allowsMultipleSelection = true
put this code in your cell 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
}
you can get the selected indexPath items
let items = myCollectionView.indexPathsForSelectedItems
This basic example. You can change as per your data.
When you select any cell then you need to check that selected cell is already selected before or not.
If not then add selected cell indexPath in indexArray and selected cell value in valueArray.
If current selected cell is previously selected then remove indexPath from indexArray and also remove selected cell value from valueArray
on continue button press pass arrSelectedData to server or next screen.
Define below 3 array.
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 Delegate & DataSource
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()
}
}
You can write the code like this to Enable Multiple Selection :-
yourCollectionViewName.allowsMultipleSelection = true
then you can Do it like this to see the cell Selected -
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
var cell = collectionView.cellForItemAtIndexPath(indexPath)
if cell?.selected == true {
cell?.backgroundColor = UIColor.orangeColor()
}
}
To Deselect You can do something Like this -
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
var cell = collectionView.cellForItemAtIndexPath(indexPath)
cell?.backgroundColor = UIColor.clearColor()
}
Enable Multiple Selection
collectionView.allowsMultipleSelection = true
Overrider isSelected property of collectionViewCell.
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
}
You can print selected cell's indexPath
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(collectionView.indexPathsForSelectedItems)
}
Well, to achieve a thing like that, you need to mainly perform the following tasks
Whenever user clicks on a particular cell, you need to change the background colour for that item in the didSelectItemAt delegate method of UICollectionView
Now to send that data to server, you need an array to store all the selected cells and then send that array to server . You can perform the same in didSelectItemAt method as well
I can show you a prototype of what the function will look like:
Let's assume you have an array named arrayForPopulating for populating data inside Collection View and we have array named finalSelections which consist of names of all the selections that user made
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])
}
Now you can send you finalSelections array to the server !
I am using didSelectItemAt and didDeselectItemAt for multiple selection of collectionViewCell. I want to select the cell and make the border blue color if it is selected and also unselect the 'selected' cell and make the border default. But my problem is that didDeselectItemAt is getting called alternately. when once i tap on any cell then didSelectItemAt is called and if i tap on any other cell then didDeselectItemAt is called. This should not happen i guess. didDeselectItemAt should be called only if i am tapping on already selected cell. Please correct me if i am going wrong. I have refered this UICollectionView - didDeselectItemAtIndexPath not called if cell is selected1 but dint work for me :(
public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
{
let cell = collectionView.cellForItem(at: indexPath) as! MomentDetailCell
let moment = self.arrOfMoments[indexPath.row] as! MomentModel
cell.toggleSelection(moment: moment)
self.arrOfDeletingImgs.append(moment)
}
public func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath)
{
let cell : MomentDetailCell = self.collectionViewImages.cellForItem(at: indexPath) as! MomentDetailCell
let moment = self.arrOfMoments[indexPath.row] as! MomentModel
cell.toggleSelection(moment: moment)
self.arrOfDeletingImgs.remove(at: (find(objecToFind: moment))!)
}
// Also this is the code i am using in the class. I have also made allowsMultipleSelection true in viewdidload
extension MomentDetailViewController : UICollectionViewDelegateFlowLayout
{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
return CGSize(width: 75, height: 75)
}
}
// This is my customCell code
func toggleSelection( moment : MomentModel)
{
if (isSelected)
{
moment.isSelected = true
self.layer.borderWidth = 3
self.layer.borderColor = Constant.APP_BLUE_COLOR.cgColor
}
else
{
moment.isSelected = false
self.layer.borderWidth = 1
self.layer.borderColor = UIColor.red.cgColor
}
}
Try this :
This solution for multiple selection
1- make deSelect as below
public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
{
let cell = collectionView.cellForItem(at: indexPath) as! MomentDetailCell
let moment = self.arrOfMoments[indexPath.row] as! MomentModel
cell.toggleSelection(moment: moment)
self.arrOfDeletingImgs.append(moment)
}
2 - Comment/Remove Deselect method
3 change in this method
func toggleSelection( moment : MomentModel)
{
moment.isSelected = !moment.isSelected
self.layer.borderWidth = moment.isSelected ? 3 : 1
self.layer.borderColor = moment.isSelected ? Constant.APP_BLUE_COLOR.cgColor : UIColor.red.cgColor
}
After long time i troubleshooted the problem and this is what worked for me...
I was doing following thing in cellForItemAtIndexPath: which is WRONG
cell.isSelected = false
collectionView.selectItem(at: indexPath, animated: false, scrollPosition: .left)
I was doing this as didDeselect was getting called alternately without considering the selection of cell. I just uncommeted this code and it worked for me. Now didSelect is calling on first click and if i click on same cell again then only didDeselect is called as per expected flow.
Also make sure allowsMultipleSelection is true and also allowsSelection is true
I guess didselect method is called when you tap on second cell. Might be you forgot:
_collectionView.allowsMultipleSelection = YES
In my case i had a separate delegate class, and if i set collectionView.delegate = MyDelegate(), it didnt work, if i stored a var myDelegate = MyDelegate()in my viewcontroller and then set collectionView.delegate = myDelegate it somehow worked.