UICollectionViewCell圆角在呼吸时恢复到正方形

时间:2017-03-08 12:47:18

标签: ios swift uicollectionview

我在UICollectionView中有一个UIViewController。我使用以下扩展名将UICollectionViewCell配置为具有圆角和阴影:

extension UICollectionViewCell {
    func configureCell() {
        self.contentView.layer.cornerRadius = 5.0
        self.contentView.layer.borderWidth = 1.0
        self.contentView.layer.borderColor = UIColor.clear.cgColor
        self.contentView.backgroundColor = UIColor.white
        self.contentView.layer.masksToBounds = true

        self.layer.shadowColor = UIColor.lightGray.cgColor
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath
    }
}

最初绘制UICollectionView时,会在单元格上绘制圆角和阴影。然而,当我移动细胞时,角落开始消失,但阴影仍然存在。我想我只需要更新单元格,所以我将其添加到moveItemAt

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {        
    [collectionView.cellForItem(at: sourceIndexPath), collectionView.cellForItem(at: destinationIndexPath)].forEach({$0?.configureCell()})
}

那没用,所以我试过了:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    collectionView.visibleCells.forEach({$0.configureCell()})
}

相同的结果......圆角消失,但阴影仍然存在。

我欢迎在移动UICollectionViewCells时如何保持四舍五入的建议。谢谢你的阅读。

更新

进一步修改后,我发现在初始视图加载后单击单元格的任何时候,单击单元格时圆角都会变为正方形。所以我尝试了这个:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    collectionView.cellForItem(at: indexPath)?.configureCell()
}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    collectionView.cellForItem(at: indexPath)?.configureCell()
}

2 个答案:

答案 0 :(得分:1)

我确定问题出在我的扩展中。我不是100%确定为什么它最初正确绘制并且没有更新,但我需要取出contentView引用并直接转到layer

我还从其他方法中取出了configureCell()次调用的所有引用。它按预期工作。这就是它的样子。

extension UICollectionViewCell {
    func configureCell() {
        self.layer.cornerRadius = 5.0
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.clear.cgColor
        self.backgroundColor = UIColor.white
        self.layer.masksToBounds = true

        self.layer.shadowColor = UIColor.lightGray.cgColor
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath
    }
}

答案 1 :(得分:0)

我的测试显示它正在运行,我没有任何问题。我想知道你在哪里做细胞的初始配置。我的猜测是它不在cellForItem中,但可能还有其他东西。这是我的完整代码,集合视图从故事板加载,标识符为“testCell”

import UIKit

    class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

        @IBOutlet weak var collectionView: UICollectionView!
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            collectionView.delegate = self
            collectionView.dataSource = self

            //horizontal

        }

        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
        }

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

        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return 100
        }

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            //or cast to your cell
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testCell", for: indexPath)
            //if you are dynamically sizing the cells I would call this last
            cell.configureCell()
            cell.layer.shouldRasterize = true
            cell.layer.rasterizationScale = UIScreen.main.scale
            return cell
        }

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: 100, height: 100)
        }


        func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
            let cell = collectionView.cellForItem(at: indexPath)
            if let ourCell = cell{
                let highlightTest = UIView(frame: ourCell.bounds)
                highlightTest.layer.cornerRadius = ourCell.contentView.layer.cornerRadius
                highlightTest.backgroundColor = UIColor.lightGray
                highlightTest.layer.opacity = 0.4
                highlightTest.alpha = 0
                ourCell.contentView.addSubview(highlightTest)
                UIView.animate(withDuration: 0.3, delay: 0, options: .autoreverse, animations: {
                    highlightTest.alpha = 1
                }, completion: {
                    finished in
                    highlightTest.removeFromSuperview()
                })
            }
        }

        func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
            collectionView.deselectItem(at: indexPath, animated: true)
        }
    }



    extension UICollectionViewCell {
        func configureCell() {
            self.layer.cornerRadius = 5.0
            self.layer.borderWidth = 1.0
            self.layer.borderColor = UIColor.clear.cgColor
            self.contentView.backgroundColor = UIColor.white
            self.contentView.layer.masksToBounds = true

            self.layer.shadowColor = UIColor.lightGray.cgColor
            self.layer.shadowOffset = CGSize.zero
            self.layer.shadowRadius = 2.0
            self.layer.shadowOpacity = 1.0
            self.layer.masksToBounds = false
            self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath
        }
    }