Question

我有一个UICollectionView。它只有一个部分，并且该部分中有多个单元格（当前为6个）。单元内部有一个imageview（带有圆角半径）和一个标签。每当选择一个单元格时，我都想在该单元格的图像视图周围添加边框。每当选择一个单元格时，就会调用“ didSelectItemAt”。也称为“ didDeselectItemAt”。如果该单元格可见，则可以通过将borderWidth设置为0.0来删除其边框。

当前，在集合视图中一次只能看到4个单元格。

我执行以下步骤： 1.选择第二个单元格。 2.选择第5个单元格。期望值：第二个单元格图像视图的边框应变为0 实际行为：两个单元格的borderWitdth均为非0值。反之亦然

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

以下是我的View Controller代码。

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

尝试一下：

 <template>
     <div>
     <svgicon name="bin" height="3em"></svgicon>
   </template>

 <script>

 export default {

}
</script>

<style lang="scss">
@import "../styles/home.scss"; 

</style>

Answer 2

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

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

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

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

2 个答案: