UICollectionViewCell 内图像视图的边框宽度问题

Question

我有一个 UICollectionView。它只有一个部分和该部分中的多个单元格（当前为 6 个）。在单元格内，有一个图像视图（圆角半径）和一个标签。 Whenever a cell is selected, I want to add a border around that cell's imageview. Whenever a cell is selected, the "didSelectItemAt" is called. “didDeselectItemAt”也被调用。如果单元格可见，我可以通过将 borderWidth 设置为 0.0 来移除其边框。

目前，collectionview 中一次只能看到 4 个单元格。

我执行以下步骤： 1. 选择第二个单元格。 2. 选择第 5 个单元格。 期望：第二个单元格的图像视图的边框应该变为 0 实际行为：两个单元格的边界宽度都为非 0 值。 反之亦然的选择也会发生同样的情况

除此之外，我还执行以下操作。 1. 选择第一个单元格。 2. 选择第 6 个单元格。 期望：第 21 个单元格的图像视图的边框应该变为 0 实际行为：两个单元格的边界都是可见的。只有拖得太多，第一个单元格的borderWidth才变成0。 反之亦然的选择也是如此。

以下是我的视图控制器代码。

private var selectedCategory : Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()

        vibeCategoriesCollectionView.delegate = self
        vibeCategoriesCollectionView.dataSource = self
        vibeCategoriesCollectionView.register(UINib(nibName: "VibeCategoryCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "vibeCategoryCell")
        vibeCategoriesCollectionView.selectItem(at: IndexPath(row: 0, section: 0), animated: true, scrollPosition: .centeredHorizontally)
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        vibeCategoriesCollectionView.layer.cornerRadius = 10
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return VibeCategories.pickerStrings.count
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width / 6, height: vibeCategoriesCollectionView.frame.height)
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = vibeCategoriesCollectionView.dequeueReusableCell(withReuseIdentifier: "vibeCategoryCell", for: indexPath) as! VibeCategoryCollectionViewCell
        cell.layoutIfNeeded()
        cell.categoryName.text = VibeCategories.pickerStrings[indexPath.row]
        cell.categoryImage.image = UIImage(named: VibeCategories.categoryImages[indexPath.row])
        cell.categoryName.textColor = VibeCategories.vibeColors[indexPath.row]
        cell.categoryImage.layer.borderColor = VibeCategories.vibeColors[indexPath.row].cgColor
        if selectedCategory != indexPath.row {
            cell.categoryImage.layer.borderWidth = 0.0
        }

        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 50
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10, left: 10, bottom: 0, right: 10)
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let currentSelectedCell = collectionView.cellForItem(at: indexPath) as! VibeCategoryCollectionViewCell
        currentSelectedCell.categoryImage.layer.borderWidth = 4.0
        selectedCategory = indexPath.row
    }

    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
        let previousSelectedCell = collectionView.cellForItem(at: indexPath) as? VibeCategoryCollectionViewCell
        if previousSelectedCell != nil {
            previousSelectedCell!.categoryImage.layer.borderWidth = 0.0
        }
    }

以下是我的 CollectionViewCell 类代码

class VibeCategoryCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var categoryImage: UIImageView!
    @IBOutlet weak var categoryName: UILabel!
    @IBOutlet weak var notificationLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func layoutIfNeeded() {
        super.layoutIfNeeded()

        categoryImage.layer.cornerRadius = categoryImage.frame.height / 2
        categoryImage.clipsToBounds = true
        categoryImage.layer.borderWidth = 4.0
        notificationLabel.layer.cornerRadius = notificationLabel.frame.height / 2
        notificationLabel.clipsToBounds = true
    }
}

谁能告诉我我做错了什么？

Answer 1

试试这个：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//      changing the current selected to not selected
        let currentSelectedIndex = IndexPath(item: selectedCategory, section: 0)
        let currentSelectedCell = collectionView.cellForItem(at: currentSelectedIndex) as! VibeCategoryCollectionViewCell
        currentSelectedCell.categoryImage.layer.borderWidth = 0.0
        self.collectionView.reloadItems(at: [currentSelectedIndex])


//      changing the new selected to selected
        selectedCategory = indexPath.row
        let newSelectedCell = vibeCategoriesCollectionView.dequeueReusableCell(withReuseIdentifier: "vibeCategoryCell", for: indexPath) as! VibeCategoryCollectionViewCell
        newSelectedCell.categoryImage.layer.borderWidth = 0.0
        self.collectionView.reloadItems(at: [indexPath])

    }

Answer 2

将以下行添加到您的 cellForItemAt 函数中，就在 return 语句之前：

cell.categoryImage.layer.borderWidth = (collectionView.indexPathsForSelectedItems ?? []).contains(indexPath) ? 4 : 0

还将行 categoryImage.layer.borderWidth = 4.0 从单元格的 layoutIfNeeded 移动到 awakeFromNib 函数。