I'm easily able to change the background color of a cell in the CellForItemAtIndexPath method
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
cell.backgroundColor = UIColor.blackColor()
}
However, when I attempt to change the color in the DidSelectItemAtIndexPath it does not work.
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell: ButtonCollectionCell = collectionView.dequeueReusableCellWithReuseIdentifier("ButtonCell", forIndexPath: indexPath) as! ButtonCollectionCell {
cell.backgroundColor = UIColor.blackColor()
}
Also I read somewhere that using didSelectItemAtIndexPath won't work because once the collection view begins scrolling the color will change back
What is the fix in Swift?
Thank you so much for your help
You can use this method for that:
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath){
var cell : UICollectionViewCell = collectionView.cellForItemAtIndexPath(indexPath)!
cell.backgroundColor = UIColor.magentaColor()
}
Old question, but it can help someone:
You can't simply modify the cell, since your changes will be lost when you scroll your UICollectionView, or even worst, other cells could appear with a wrong background, because they'll be reused.
So, the best way to do that is create an array of NSIndexPath and append your selected indexPaths:
var selectedIndexes = [NSIndexPath]() {
didSet {
collectionView.reloadData()
}
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath){
// ...
if let indexSelecionado = selectedIndexes.indexOf(indexPath) {
selectedIndexes.removeAtIndex(indexSelecionado)
} else {
selectedIndexes.append(indexPath)
}
}
// ...
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
// ...
if self.selectedIndexes.indexOf(indexPath) == nil {
cell.backgroundColor = UIColor.whiteColor() // Unselected
} else {
cell.backgroundColor = UIColor.redColor() // Selected
}
return cell
}
You can override UICollectionViewCell isSelected . It will apply changes in selected method.
class ButtonCollectionCell: UICollectionViewCell {
override var isSelected: Bool{
didSet{
if self.isSelected
{
self.layer.backgroundColor = colorLiteral(red: 0.8058760762, green: 0.2736578584, blue: 0.1300437152, alpha: 1)
} else
{
self.layer.backgroundColor = colorLiteral(red: 0, green: 0, blue: 0, alpha: 0)
}
}
}
}
cell.backgroundColor = UIColor.redColor()
let startTime = DateUtils.getDispatchTimeByDate(NSDate(timeIntervalSinceNow: 0.1))
dispatch_after(startTime, dispatch_get_main_queue()) {[weak self] in
//there is the code redirect to other viewcontroller
openOtherVC()
}
Related
I have UICollectionView 2 rows 10+ cells.
deselected by default. when I click it becomes selected but when I click again not deselect.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(indexPath)
let cell = collectionView.cellForItem(at: indexPath)
let collectionActive: UIImageView = {
let image=UIImageView(image: #imageLiteral(resourceName: "collectionActive"))
image.contentMode = .scaleAspectFill
return image
}()
let collectionInactive: UIImageView = {
let image=UIImageView(image: #imageLiteral(resourceName: "collectionInactive"))
image.contentMode = .scaleAspectFill
return image
}()
if cell?.isSelected == true {
cell?.backgroundView = collectionActive
}else{
cell?.backgroundView = collectionInactive
}
}
how fix that problem?
in viewDidLoad()
collectionView.allowsMultipleSelection = true;
afterword I implemented these methods
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = collectionView.cellForItemAtIndexPath(indexPath) as! MyCell
cell.toggleSelected()
}
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
let cell = collectionView.cellForItemAtIndexPath(indexPath) as! MyCell
cell.toggleSelected()
}
finally in my class
class MyCell : UICollectionViewCell {
func toggleSelected ()
{
if (selected){
backgroundColor = UIColor.redColor()
}else {
backgroundColor = UIColor.whiteColor()
}
}
}
For Swift 5 +
in viewDidLoad()
collectionView.allowsMultipleSelection = true
afterword I implemented these methods
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! MovieDetailsDateCollectionViewCell
cell.toggleSelected()
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! MovieDetailsDateCollectionViewCell
cell.toggleSelected()
}
In TableView Cell class
class MyCell : UICollectionViewCell {
func toggleSelected ()
{
if (isSelected){
backgroundColor = .red
}else {
backgroundColor = .white
}
}
}
If you don't want to enable multiple selection and only want one cell to be selected at a time, you can use the following delegate instead:
If the cell is selected then this deselects all cells, otherwise if the cell is not selected, it selects it as normal.
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
let cell = collectionView.cellForItem(at: indexPath) as! CustomCell
if cell.isSelected {
collectionView.selectItem(at: nil, animated: true, scrollPosition: [])
return false
}
return true
}
According to UICollectionView class doc, you can use:
var selectedBackgroundView: UIView? { get set }
You can use this view to give the cell a custom appearance when it is selected. When the cell is selected, this view is layered above the backgroundView and behind the contentView.
In your example in the cellForItem(at indexPath: IndexPath) -> UICollectionViewCell? function you can set:
cell.backgroundView = collectionInactive
cell.selectedBackgroundView = collectionActive
If the cell is selected, just set cell.isSelected = false in shouldSelectItemAt delegate and in a DispatchQueue.main.async { } block. So the state is actually changed to false (very) soon after the shouldSelectItemAt has been executed.
It may look like a hack but it actually works.
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
if let cell = collectionView.cellForItem(at: indexPath), cell.isSelected {
DispatchQueue.main.async { // change the isSelected state on next tick of the ui thread clock
cell.isSelected = false
self.collectionView(collectionView, didDeselectItemAt: indexPath)
}
return false
}
return true
}
Please let me know if you find/know any cons to do this. Thanks 🙏
In iOS 14 and newer, you can set the backgroundConfiguration property of a cell. Once set, all necessary visual effects for selecting and deselecting works automatically. You can use one of the preconfigured configurations, like this:
cell.backgroundConfiguration = .listSidebarCell()
…or create a UIBackgroundConfiguration object from scratch. You can also change a preconfigured configuration before applying.
More info here: https://developer.apple.com/documentation/uikit/uibackgroundconfiguration
I have created a UICollectionView with 12 cells in it. I would like to have their color changed (to the same color) on tap.
Here is my code :
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = collectionView.cellForItemAtIndexPath(indexPath)as! InterestCollectionViewCell
print("2 \(cell.interest) \(indexPath.row)")
if cell.selected == true {
cell.backgroundColor = UIColor.redColor()
}
else {
cell.backgroundColor = UIColor.clearColor()
}
}
Issues
Color doesn't change back when tapped again
When I tap on the [0] cell, the [5] and [10] cells changes color as well. Same after I tap on the [1] cell, [6]and [11] cells get called too...etc.m
Instead of setting color in didSelectItemAtIndexPath set the color in cellForItemAtIndexPath for that you need to declare instance of Int and store the row of collectionView inside that instance like this.
var selectedRow: Int = -1
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath:NSIndexPath)->UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CELL", forIndexPath: indexPath) as! InterestCollectionViewCell
// Set others detail of cell
if self.selectedRow == indexPath.item {
cell.backgroundColor = UIColor.redColor()
}
else {
cell.backgroundColor = UIColor.clearColor()
}
return cell
}
Now in didSelectItemAtIndexPath set the selectedRow reload the collectionView.
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
if self.selectedRow == indexPath.item {
self.selectedRow = -1
}
else {
self.selectedRow = indexPath.item
}
self.collectionView.reloadData()
}
Edit: For multiple cell selection create one array of indexPath and store the object of indexPath like this.
var selectedIndexPaths = [NSIndexPath]()
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath:NSIndexPath)->UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CELL", forIndexPath: indexPath) as! InterestCollectionViewCell
// Set others detail of cell
if self.selectedIndexPaths.contains(indexPath) {
cell.backgroundColor = UIColor.redColor()
}
else {
cell.backgroundColor = UIColor.clearColor()
}
return cell
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
if self.selectedIndexPaths.contains(indexPath) {
let index = self.selectedIndexPaths.indexOf(indexPath)
self.selectedIndexPaths.removeAtIndex(index)
}
else {
self.selectedIndexPaths.append(indexPath)
}
self.collectionView.reloadData()
}
I UICollectionView with 10 cells, for example. I want to add border to the selected cell, later, on select another cell, want to remove previous border and add a border to the new selected cell.
How can I achieve this?
I've tried this:
var selected = [NSIndexPath]()
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
self.imageView.image = applyFilter(self.colorCubeFilterFromLUT("\(self.LUTs[indexPath.row])")!, image: self.image!)
self.selected.append(indexPath)
}
func collectionView(collectionView: UICollectionView, didHighlightItemAtIndexPath indexPath: NSIndexPath) {
let cell = self.filtersCollectionView.cellForItemAtIndexPath(indexPath) as! FiltersCollectionViewCell
cell.imageView.layer.borderWidth = 3.0
cell.imageView.layer.borderColor = UIColor.brownColor().CGColor
}
func collectionView(collectionView: UICollectionView, didUnhighlightItemAtIndexPath indexPath: NSIndexPath) {
if self.selected.count > 1 && indexPath == self.selected[self.selected.count - 1] {
let cell = self.filtersCollectionView.cellForItemAtIndexPath(indexPath) as! FiltersCollectionViewCell
cell.imageView.layer.borderWidth = 0.0
cell.imageView.layer.borderColor = UIColor.clearColor().CGColor
}
}
but it does not work. What I do wrong?
There is a more simple solution, you can already use the functionality that the UICollectionView provides itself. In addition, it is better in performance as you don't have to reload the collectionView every time a single cell is selected. Apple suggest that you must only use reloadData() when your model actually changes.
You can override the property isSelected of UICollectionViewCell, then you only have to customize its appearance with a property observer:
override var isSelected: Bool {
didSet {
if isSelected {
layer.borderWidth = 2
} else {
layer.borderWidth = 0
}
}
}
Just remind that you have to set layer.borderColor either within the cell initializer or where you consider convenient
PS: If later you want to do multiple selection, you will just have to enable the property allowsMultipleSelection in the collectionView
You could save the selected indexPath into a variable and within cellForItemAtIndexPath check if the current indexPath is equal to the selected index path (You would need to reload your collectionView each time its selected)
var selectedIndexPath: NSIndexPath{
didSet{
collectionView.reloadData()
}
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
selectedIndexPath = indexPath
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var borderColor: CGColor! = UIColor.clearColor().CGColor
var borderWidth: CGFloat = 0
if indexPath == selectedIndexPath{
borderColor = UIColor.brownColor().CGColor
borderWidth = 1 //or whatever you please
}else{
borderColor = UIColor.clearColor().CGColor
borderWidth = 0
}
cell.imageView.layer.borderWidth = borderWidth
cell.imageView.layer.borderColor = borderColor
}
Swift 3 version :
func collectionView(_ collectionView: UICollectionView,
cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var borderColor: CGColor! = UIColor.clear.cgColor
var borderWidth: CGFloat = 0
if indexPath == selectedIndexPath{
borderColor = UIColor.brown.cgColor
borderWidth = 1 //or whatever you please
}else{
borderColor = UIColor.clear.cgColor
borderWidth = 0
}
cell.imageView.layer.borderWidth = borderWidth
cell.imageView.layer.borderColor = borderColor
}
SWIFT 5
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
cell.imageView.layer.borderWidth = 2
cell.imageView.layer.borderColor = UIColor.blue.cgColor
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
cell.imageView.layer.borderWidth = 2
cell.imageView.layer.borderColor = UIColor.clear.cgColor
}
I would like to add a UIImageView animated inside an UICollectionViewCell so I came up with this code:
import UIKit
class MainViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
var items:[String] = ["one", "two", "three", "four"]
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor(red: 220/255, green: 220/255, blue: 220/255, alpha: 1.0)
self.view.addSubview(self.collectionView)
}
lazy var collectionView:UICollectionView = {
var cv = UICollectionView(frame: self.view.bounds, collectionViewLayout: self.flowLayout)
cv.delegate = self
cv.dataSource = self
cv.bounces = true
cv.alwaysBounceVertical = true
cv.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
cv.registerClass(CustomCell.self, forCellWithReuseIdentifier: "cell")
cv.backgroundColor = UIColor(red: 220/255, green: 220/255, blue: 220/255, alpha: 1.0)
return cv
}()
lazy var flowLayout:UICollectionViewFlowLayout = {
var flow = UICollectionViewFlowLayout()
flow.sectionInset = UIEdgeInsetsMake(2.0, 2.0, 2.0, 2.0)
return flow
}()
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{
let width:CGFloat = self.view.bounds.size.width*0.98;
let height:CGFloat = 150.0;
return CGSizeMake(width, height)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
return self.items.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! CustomCell
cell.layer.cornerRadius = 4
cell.backgroundColor = UIColor.whiteColor()
cell.imgView.animationImages = ["1","2","3","4","5", "6","7","8"].map{UIImage(named: $0)!}
cell.imgView.animationDuration = NSTimeInterval(0.8)
cell.imgView.startAnimating()
return cell
}
func collectionView(collectionView: UICollectionView, shouldHighlightItemAtIndexPath indexPath: NSIndexPath) -> Bool {
return true
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
var alert = UIAlertController(title: "Alert!", message: "Cell tapped", preferredStyle: UIAlertControllerStyle.Alert)
var action = UIAlertAction(title: "ok", style: UIAlertActionStyle.Cancel) { (dd) -> Void in }
alert.addAction(action)
self.presentViewController(alert, animated: true, completion: nil)
}
}
This is my MainViewController with a CollectionView added programmatically.
import UIKit
class CustomCell: UICollectionViewCell {
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(self.imgView)
}
lazy var imgView:UIImageView = {
var iv = UIImageView()
iv.contentMode = UIViewContentMode.ScaleAspectFill
return iv
}()
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
self.imgView.frame = CGRectMake(6,15,self.frame.width*0.2, self.frame.height*0.8)
}
}
And this is my custom UICollectionViewCell with an UIImageView
My problem is when you tap a cell the UIImageView disappears. Trying to solve the problem I started to look another UICoolectionView delegate methods. Then I tried to use shouldHighlightItemAtIndexPath, But If I use this method returning false the animation works fine but the collection view stops responding to didSelectItemAtIndexPath.
This is a github repository with a code that shows the issue: https://github.com/gazolla/ImageAnimation (updated with solution)
SOLUTION:
With matt's help, I made the following changes in my code:
1) add images array to highlightedAnimationImages property
let animationArray = ["1","2","3","4","5", "6","7","8"].map{UIImage(named: $0)!}
cell.imgView.highlightedAnimationImages = animationArray
2) Restart animation when cells are deselected
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
if let cell = collectionView.cellForItemAtIndexPath(indexPath) as? CustomCell{
cell.imgView.startAnimating()
}
}
3) Restart animation when cells are selected
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = collectionView.cellForItemAtIndexPath(indexPath) as! CustomCell
cell.imgView.startAnimating()
//...
}
SOLUTION 2:
After some tests, I found out that when you tap and hold a cell UIImageView disappears again, So we have to restart animation in another two methods:
1) didHighlightItemAtIndexPath
func collectionView(collectionView: UICollectionView, didHighlightItemAtIndexPath indexPath: NSIndexPath) {
if let cell = collectionView.cellForItemAtIndexPath(indexPath) as? CustomCell{
cell.imgView.startAnimating()
}
}
2) didUnhighlightItemAtIndexPath
func collectionView(collectionView: UICollectionView, didUnhighlightItemAtIndexPath indexPath: NSIndexPath) {
if let cell = collectionView.cellForItemAtIndexPath(indexPath) as? CustomCell{
cell.imgView.startAnimating()
}
}
When you select the cell, the image view looks to its highlightedAnimationImages, not its animationImages. You didn't set the highlightedAnimationImages so you see nothing.
Here's a screencast showing that this can work. The cell is selected when the background is gray (that is its selectedBackgroundView) but the animation continues:
In case anyone else encounters this nasty bug and the above solutions don't help – try calling imageView.stopAnimating() in your cell's prepareForReuse() function.
Swift 4 version of Solution 2 from #Sebastian.
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) as? CustomCell {
cell.imgView.startAnimating()
}
}
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) as? CustomCell {
cell.imgView.startAnimating()
}
}
I had the same problem, but i did not get the "didDeselectItemAtIndexPath" to work, so my solution to the problem was just to add a button with no function over the picture.
So when you touch the picture, you will touch the button instead.
The solution 1 and 2 based on Sebastian gives me an inspiration. When UITableViewCell isSelected or isHighlighted status changes, it will call setSelected:animated: or setHighlighted:animated method. So, I override the methods of custom UITableViewCell.
class DCFWFailReasonCell: UITableViewCell {
// Local flag for UIImageView animation.
fileprivate var isAnimation: Bool = false
// Setup animation images
func configure(animateImage: [UIImage], duration: TimeInterval) {
imgView.animationImages = animateImage
imgView.highlightedAnimationImages = animateImage
imgView.animationDuration = duration
imgView.animationRepeatCount = 0 //< 0 infinite
imgView.startAnimating()
// imgView has animation.
isAnimation = true
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
//
if (self.isAnimation) {
imgView.startAnimating()
}
}
override func setHighlighted(_ highlighted: Bool, animated: Bool) {
super.setHighlighted(highlighted, animated: animated)
if (self.isAnimation) {
imgView.startAnimating()
}
}
}
Here is my solution, works well
class MyImageView: UIImageView {
override func stopAnimating() {
super.stopAnimating()
startAnimating()
}
}
I'm trying to do a simple UICollectionView with a custom cell composed of an UIImageView and an UIView above.
When a cell is not selected, the UIView on the top of the cell have is backgroundColor property set to UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).
I have issues with the selection. The collectionView:didSelectItemAtIndexPath: method is called but when I change the UIView described previously, nothing happen.
Here is the code of my collectionView :
class TestCollectionViewController: UICollectionViewController
{
var items = [1, 2, 3]
let cellId = "Cell"
override func viewDidLoad()
{
self.collectionView.allowsMultipleSelection = true
self.collectionView.delaysContentTouches = false
}
override func collectionView(collectionView: UICollectionView!, numberOfItemsInSection section: Int) -> Int
{
return items.count
}
override func collectionView(collectionView: UICollectionView!, cellForItemAtIndexPath indexPath: NSIndexPath!) -> UICollectionViewCell!
{
var cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId,
forIndexPath: indexPath) as TestingCollectionViewCell
let item = items[indexPath.row]
cell.imageView.image = UIImage(named: "img")
cell.overlayView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
return cell
}
override func collectionView(collectionView: UICollectionView!, didSelectItemAtIndexPath indexPath: NSIndexPath!)
{
var cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId,
forIndexPath: indexPath) as TestingCollectionViewCell
cell.overlayView.backgroundColor = UIColor.clearColor()
}
override func collectionView(collectionView: UICollectionView!, didDeselectItemAtIndexPath indexPath: NSIndexPath!)
{
var cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId,
forIndexPath: indexPath) as TestingCollectionViewCell
cell.overlayView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
}
}
If this snippet is not enough, here is my project
You should not be dequeuing a new cell in didSelectItemAtIndexPath (or in didDeselect either) -- this is creating (or reusing) a new cell, not getting the one you selected. Use this instead,
var cell = collectionView.cellForItemAtIndexPath(indexPath)
To me the following code worked better (the code of rdelmar crashed sometimes, which might be a bug? in Swift):
(collectionView.cellForItemAtIndexPath(indexPath) as myCollectionViewCellType).uiBackground?.backgroundColor = UIColor.blackColor()
Edit: I forgot to mention: My collectionView-Items are based on their own class to which I cast. uiBackground is an element of that class
Swift 3.0
let cell = collectionView.cellForItem(at: indexPath)
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
{
//saving index path of the image loaded from imageproperty_array
selected_imagepath = imageproperty_array[indexPath.row] as String
//saving index of the selected cell item as Int
selected_imageindex = indexPath.row
}