CollectionView Cell Moving when Selected

Question

I have a CollectionView issue, I have a video showing the problem detailed below. When I click one cell it moves in a weird manner. Here is my code:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    selectedFilter = indexPath.row

    if filters[indexPath.row] != "Todo" {
        filteredNews = news.filter { $0.category == filters[indexPath.row] }
    } else {
        filteredNews = news
    }
    tableView.reloadData()
    collectionView.reloadData()

}

My Cell is moving, (Just the last cell, don't know why).

I think it might be related to collectionView.reloadData() But I need to do that for updating the green bar you can see on this Video when I select a Cell.

How can I make it not move? Someone had had a similar problem?

Answer 1

Finally I Solve it! I removed collectionView.reloadData() and added my code to change colors inside didSelectItemAt changing current selected item and old selected item (I created a Variable to see which one was the old selected item).

If someone interested, here is my code:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let oldSelectedFilter = selectedFilter
    if selectedFilter != indexPath.row {
        let oldIndexPath = IndexPath(item: oldSelectedFilter, section: 0)
        selectedFilter = indexPath.row

        if filters[indexPath.row] != "Todo" {
            filteredNews = news.filter { $0.category == filters[indexPath.row] }
        } else {
            filteredNews = news
        }
        if let cell = collectionView.cellForItem(at: indexPath) as? FiltersCollectionViewCell {
            cell.selectedView.backgroundColor = MainColor
        }
        if let cell = collectionView.cellForItem(at: oldIndexPath) as? FiltersCollectionViewCell {
            cell.selectedView.backgroundColor = UIColor(red:0.31, green:0.33, blue:0.35, alpha:1.0)
        }

        tableView.reloadData()
    }
}

Answer 2

I noticed you reloaded a tableView during collectionView didSelectItemAt. If that tableView is a superView of your collectionView that will be the exact reason why you are having this abnormal behaviour.

If it were not, I can offer 3 solutions:

1. This library have a view controller subclass that can create the effect you want to show.
2. Manually create a UIView/UIImageView that is not inside the collectionView but update it's position during the collectionView's didSelectItemAt delegate method to but visually over the cell instead - this would require some calculation, but your collectionView will not need to reload.
3. You can attempt to only reload the two affected cells using the collectionView's reloadItem(at: IndexPath) method.

Know that when you reload a table/collection view, it will not change the current visible cell. However any content in each cell will be affected.