UICollectionView cell selection and cell reuse

Question

Upon cell selection  I want to handle changing the cell appearance  I figured the delegate method collectionView didSelectItemAtIndexPath   amp  collectionView didDeselectItemAtIndexPath  is where I should edit the cell   - void collectionView  UICollectionView   collectionView         didSelectItemAtIndexPath  NSIndexPath   indexPath        DatasetCell  datasetCell           DatasetCell    collectionView cellForItemAtIndexPath indexPath         datasetCell replaceHeaderGradientWith  UIColor skyBlueHeaderGradient        datasetCell backgroundColor    UIColor skyBlueColor       and  - void collectionView  UICollectionView   collectionView         didDeselectItemAtIndexPath  NSIndexPath   indexPath        DatasetCell  datasetCell           DatasetCell    collectionView cellForItemAtIndexPath indexPath         datasetCell replaceHeaderGradientWith  UIColor grayGradient        datasetCell backgroundColor    UIColor myDarkGrayColor       This works fine  except when the cell gets reused  If I select cell at index  0  0   it changes the appearance but when I scroll down  there is another cell in the selected state   I believe I should use the UICollectionViewCell method - void prepareForReuse to prep the cell for resuse  ie  set the cell appearance to non selected state  but its giving me difficulties   - void prepareForReuse       if   self selected              self replaceHeaderGradientWith  UIColor skyBlueHeaderGradient            self backgroundColor    UIColor skyBlueColor         else            self replaceHeaderGradientWith  UIColor grayGradient            self backgroundColor    UIColor myDarkGrayColor             When I scroll back to the top  the cell at index  0  0  is in the deselected state   When I just used the cell backgroundView property  to prevent this from happening was to   - void prepareForReuse       self selected   FALSE      and the selection state worked as intended   Any ideas

User · Answer

Changing the cell property such as the cell s background colors shouldn t be done on the UICollectionViewController itself  it should be done inside you CollectionViewCell class  Don t use didSelect and didDeselect  just use this   class MyCollectionViewCell  UICollectionViewCell         override var isSelected  Bool                 didSet                           Your code

User · Answer

The problem you encounter comes from the lack of call to super prepareForReuse     Some other solutions above  suggesting to update the UI of the cell from the delegate s functions  are leading to a flawed design where the logic of the cell s behaviour is outside of its class  Furthermore  it s extra code that can be simply fixed by calling super prepareForReuse    For example    class myCell  UICollectionViewCell           defined in interface builder      IBOutlet weak var viewSelection   UIView       override var isSelected  Bool           didSet               self viewSelection alpha   isSelected   1   0                      override func prepareForReuse                Do whatever you want here  but don t forget this           super prepareForReuse              You don t need to do  self viewSelection alpha   0  here             because  super prepareForReuse    will update the property  isSelected               override func awakeFromNib             super awakeFromNib              Initialization code         self viewSelection alpha   0            With such design  you can even leave the delegate s functions collectionView didSelectItemAt  collectionView didDeselectItemAt  all empty  and the selection process will be totally handled  and behave properly with the cells recycling

User · Answer

you can just set the selectedBackgroundView of the cell to be backgroundColor x   Now any time you tap on cell his selected mode will change automatically and will couse to the background color to change to x

User · Answer

Anil was on the right track  his solution looks like it should work  I developed this solution independently of his   I still used the prepareForReuse  method to set the cell s selected to FALSE  then in the cellForItemAtIndexPath I check to see if the cell s index is in  collectionView indexPathsForSelectedItems   if so  highlight it   In the custom cell   - void prepareForReuse       self selected   FALSE      In cellForItemAtIndexPath  to handle highlighting and dehighlighting reuse cells   if   collectionView indexPathsForSelectedItems containsObject indexPath          collectionView selectItemAtIndexPath indexPath animated FALSE scrollPosition UICollectionViewScrollPositionNone          Select Cell   else          Set cell to non-highlight     And then handle cell highlighting and dehighlighting in the didDeselectItemAtIndexPath  and didSelectItemAtIndexPath   This works like a charm for me

User · Answer

Thanks to your answer  RDC   The following codes works with Swift 3     MARK  - UICollectionViewDataSource protocol func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell          prepare your cell here       let cell   collectionView dequeueReusableCell withReuseIdentifier  reuseIdentifier  for  indexPath as IndexPath  as  MyCell     cell myLabel text     my text         Add background view for normal cell     let backgroundView  UIView   UIView frame  cell bounds      backgroundView backgroundColor   UIColor lightGray     cell backgroundView   backgroundView        Add background view for selected cell     let selectedBGView  UIView   UIView frame  cell bounds      selectedBGView backgroundColor   UIColor green     cell selectedBackgroundView   selectedBGView      return cell       MARK  - UICollectionViewDelegate protocol func collectionView   collectionView  UICollectionView  shouldHighlightItemAt indexPath  IndexPath  - gt  Bool       return true    func collectionView   collectionView  UICollectionView  shouldSelectItemAt indexPath  IndexPath  - gt  Bool       return true

User · Answer

Your observation is correct  This behavior is happening due to the reuse of cells  But you dont have to do any thing with the  prepareForReuse  Instead do your check in cellForItem and set the properties accordingly  Some thing like       -  UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath   UICollectionViewCell  cell    collectionView dequeueReusableCellWithReuseIdentifier   cvCell  forIndexPath indexPath     if  cell selected         cell backgroundColor    UIColor blueColor      highlight selection    else        cell backgroundColor    UIColor redColor      Default color   return cell     - void collectionView  UICollectionView   collectionView didSelectItemAtIndexPath  NSIndexPath   indexPath         UICollectionViewCell  datasetCell   collectionView cellForItemAtIndexPath indexPath       datasetCell backgroundColor    UIColor blueColor      highlight selection        - void collectionView  UICollectionView   collectionView didDeselectItemAtIndexPath  NSIndexPath   indexPath    UICollectionViewCell  datasetCell   collectionView cellForItemAtIndexPath indexPath    datasetCell backgroundColor    UIColor redColor      Default color

User · Answer

Framework will handle switching the views for you once you setup your cell s backgroundView and selectedBackgroundView  see example from Managing the Visual State for Selections and Highlights   UIView  backgroundView     UIView alloc  initWithFrame self bounds   backgroundView backgroundColor    UIColor redColor   self backgroundView   backgroundView   UIView  selectedBGView     UIView alloc  initWithFrame self bounds   selectedBGView backgroundColor    UIColor whiteColor   self selectedBackgroundView   selectedBGView    you only need in your class that implements UICollectionViewDelegate enable cells to be highlighted and selected like this   -  BOOL collectionView  UICollectionView   collectionView         shouldHighlightItemAtIndexPath  NSIndexPath   indexPath       return YES     -  BOOL collectionView  UICollectionView   collectionView         shouldSelectItemAtIndexPath  NSIndexPath   indexPath        return YES      This works me

User · Answer

Only  stefanB solution worked for me on iOS 9 3  Here what I have to change for Swift 2  func collectionView collectionView  UICollectionView  cellForItemAtIndexPath indexPath  NSIndexPath  - gt  UICollectionViewCell              prepare your cell here              Add background view for normal cell         let backgroundView  UIView   UIView frame  cell  bounds          backgroundView backgroundColor   UIColor lightGrayColor           cell  backgroundView   backgroundView            Add background view for selected cell         let selectedBGView  UIView   UIView frame  cell  bounds          selectedBGView backgroundColor   UIColor redColor           cell  selectedBackgroundView   selectedBGView          return cell       func collectionView collectionView  UICollectionView  shouldHighlightItemAtIndexPath indexPath  NSIndexPath  - gt  Bool           return true      func collectionView collectionView  UICollectionView  shouldSelectItemAtIndexPath indexPath  NSIndexPath  - gt  Bool           return true

User · Answer

I had a horizontal scrolling collection view  I use collection view in Tableview  and I too faced problems withcell reuse  whenever I select one item and scroll towards right  some other cells in the next visible set gets select automatically  Trying to solve this using any custom cell properties like  selected   highlighted etc didnt help me so I came up with the below solution and this worked for me   Step1   Create a variable in the collectionView to store the selected index  here I have used a class level variable called selectedIndex   -  UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath         MyCVCell  cell    MyCVCell   collectionView dequeueReusableCellWithReuseIdentifier   MyCVCell  forIndexPath indexPath           When scrolling happens  set the selection status only if the index matches the selected Index  if  selectedIndex    indexPath row             cell layer borderWidth   1 0           cell layer borderColor     UIColor redColor  CGColor              else                  Turn off the selection         cell layer borderWidth   0 0             return cell     -  void collectionView  UICollectionView   collectionView didSelectItemAtIndexPath  NSIndexPath   indexPath        MyCVCell  cell    MyCVCell    collectionView cellForItemAtIndexPath indexPath          Set the index once user taps on a cell     selectedIndex   indexPath row         Set the selection here so that selection of cell is shown to ur user immediately     cell layer borderWidth   1 0      cell layer borderColor     UIColor redColor  CGColor        cell setNeedsDisplay      -  void collectionView  UICollectionView   collectionView didDeselectItemAtIndexPath  NSIndexPath   indexPath         MyCVCell  cell    MyCVCell    collectionView cellForItemAtIndexPath indexPath           Set the index to an invalid value so that the cells get deselected     selectedIndex   -1      cell layer borderWidth   0 0       cell setNeedsDisplay        -anoop

User · Answer

In your custom cell create public method   -  void showSelection  BOOL selection       self contentView backgroundColor   selection    UIColor blueColor     UIColor white       Also write redefenition of -prepareForReuse cell method   -  void prepareForReuse        self showSelection NO        super prepareForReuse       And in your ViewController you should have  selectedIndexPath variable  which defined in -didSelectItemAtIndexPath and nullified in -didDeselectItemAtIndexPath  NSIndexPath   selectedIndexPath   -  UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath       static NSString  cellIdentifier     Cell       UICollectionViewCell  cell    collectionView dequeueReusableCellWithReuseIdentifier cellIdentifier forIndexPath indexPath        if   selectedIndexPath             cell showSelection  indexPath isEqual  selectedIndexPath             -  void collectionView  UICollectionView   collectionView didSelectItemAtIndexPath  NSIndexPath   indexPath       UICollectionViewCell  cell    collectionView cellForItemAtIndexPath indexPath        cell showSelection   indexPath isEqual  selectedIndexPath      on off selection      selectedIndexPath    indexPath isEqual  selectedIndexPath    nil   indexPath     -  void collectionView  UICollectionView   collectionView didDeselectItemAtIndexPath  NSIndexPath   indexPath       UICollectionViewCell  cell    collectionView cellForItemAtIndexPath indexPath        cell showSelection NO        selectedIndexPath   nil

User · Answer

UICollectionView has changed in iOS 10 introducing some problems to solutions above   Here is a good guide  https   littlebitesofcocoa com 241-uicollectionview-cell-pre-fetching  Cells now stay around for a bit after going off-screen  Which means that sometimes we might not be able to get hold of a cell in didDeselectItemAt indexPath in order to adjust it  It can then show up on screen un-updated and un-recycled  prepareForReuse does not help this corner case   The easiest solution is disabling the new scrolling by setting isPrefetchingEnabled to false  With this  managing the cell s display with     cellForItemAt didSelect didDeselect works as it used to   However  if you d rather keep the new smooth scrolling behaviour it s better to use willDisplay    func collectionView   collectionView  UICollectionView  willDisplay cell  UICollectionViewCell  forItemAt indexPath  IndexPath        let customCell   cell as  CustomCell     if customCell isSelected           customCell select         else           customCell unselect            func collectionView   collectionView  UICollectionView  cellForItemAt indexPath  IndexPath  - gt  UICollectionViewCell       let cell   collectionView dequeueReusableCell withReuseIdentifier   CustomCell   for  indexPath  as  CustomCell       Don t even need to set selection-specific things here as recycled cells will also go through willDisplay     return cell    func collectionView   collectionView  UICollectionView  didSelectItemAt indexPath  IndexPath        let cell   collectionView cellForItem at  indexPath  as  CustomCell     cell  select      func collectionView   collectionView  UICollectionView  didDeselectItemAt indexPath  IndexPath        let cell   collectionView cellForItem at  indexPath  as  CustomCell     cell  unselect       lt ----- this can be null here  and the cell can still come back on screen      With the above you control the cell when it s selected  unselected on-screen  recycled  and just re-displayed

User · Answer

What I did to solve this was to make the changes in the customized cell  You have a custom cell called DataSetCell in its class you could do the following  the code is in swift   override var isSelected  Bool       didSet           if isSelected               changeStuff           else               changeOtherStuff                     What this does is that every time the cell is selected  deselected   initialized or get called from the reusable queue  that code will run and the changes will be made  Hope this helps you

[ios] UICollectionView cell selection and cell reuse

Examples related to ios

Examples related to objective-c

Examples related to uicollectionview