ios - 当在顶部添加新帖子时，UICollectionView 单元格自定义 FlowLayout 中断

Question

描述:我一直在开发一个在 CollectionView 中显示图像和标题的应用程序。我为单元格、图像和标题的宽度等于屏幕宽度的单元格制作了一个 custom Cell 和 CustomFlowLayout，高度将根据宽高比变化标题所需的图像高度和高度。显示的图像存储在 FirebaseStorage 中，我还在 firebaseDatabase 中保存了 imagewidth 和 imageheight。我使用 SD_Web 图像加载和缓存图像。当应用程序首次加载时，布局按预期完美运行。单元格根据 image height 和 caption height 排列，图像按纵横比排列。完成新帖子时会出现主要问题。我在 collectionview 的顶部插入新帖子，当收到帖子时，布局中断，图像变得困惑，标题在顶部图像上，图像或标题之间有很多空白。当我从后台终止应用程序并再次运行时，这次布局非常好，新帖子出现。在每个人发布后我必须终止应用程序以使布局正常工作。

我觉得问题在于，当我发布图片时。新帖子被添加到顶部单元格，顶部单元格上的项目被推到下方，没有旧的高度。我该如何解决这个问题。我尝试了很多搜索，但仍然没有用。附注:在 IB 中为单元格使用自动布局。

FactsFeverLayout 类

import UIKit
protocol FactsFeverLayoutDelegate: class {
    func collectionView(CollectionView: UICollectionView, heightForThePhotoAt indexPath: IndexPath, with width: CGFloat) -> CGFloat

    func collectionView(CollectionView: UICollectionView, heightForCaptionAt indexPath: IndexPath, with width: CGFloat) -> CGFloat
}



class FactsFeverLayout: UICollectionViewLayout {

    var cellPadding : CGFloat = 5.0
    var delegate: FactsFeverLayoutDelegate?

    private var contentHeight : CGFloat = 0.0
    private var contentWidth : CGFloat {
        let insets = collectionView!.contentInset
        return (collectionView!.bounds.width - insets.left + insets.right)
    }
    private var attributeCache = [FactsFeverLayoutAttributes]()
   override func prepare() {
    if attributeCache.isEmpty {
        let containerWidth = contentWidth
        var xOffset : CGFloat = 0
        var yOffset : CGFloat = 0

        for item in 0 ..< collectionView!.numberOfItems(inSection: 0) {
            let indexPath = IndexPath(item: item, section: 0)

            let width = containerWidth - cellPadding * 2
            let photoHeight:CGFloat = (delegate?.collectionView(CollectionView: collectionView!, heightForThePhotoAt: indexPath, with: width))!
            let captionHeight: CGFloat = (delegate?.collectionView(CollectionView: collectionView!, heightForCaptionAt: indexPath, with: width))!


            let height: CGFloat = cellPadding + photoHeight + captionHeight + cellPadding

            let frame = CGRect(x: xOffset, y: yOffset, width: containerWidth, height: height)
            let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)

            // Create CEll Layout Atributes
            let attributes = FactsFeverLayoutAttributes(forCellWith: indexPath)
            attributes.photoHeight = photoHeight
            attributes.frame = insetFrame
            attributeCache.append(attributes)
            // Update The Colunm any Y axis
            contentHeight = max(contentHeight, frame.maxY)
            yOffset = yOffset + height


        }


    }
    }

    override var collectionViewContentSize: CGSize{
        return CGSize(width: contentWidth, height: contentHeight)
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var layoutAttributes = [UICollectionViewLayoutAttributes]()

        for attributes in attributeCache {
            if attributes.frame.intersects(rect){
                layoutAttributes.append(attributes)
            }
        }
        return layoutAttributes
    }
}
// UICollectionView FlowLayout
// Abstract
class FactsFeverLayoutAttributes: UICollectionViewLayoutAttributes {
    var photoHeight : CGFloat = 0.0
    override func copy(with zone: NSZone? = nil) -> Any {
        let copy = super.copy(with: zone) as! FactsFeverLayoutAttributes
        copy.photoHeight = photoHeight
        return copy
    }

    override func isEqual(_ object: Any?) -> Bool {
        if let attributes = object as? FactsFeverLayoutAttributes {
            if attributes.photoHeight == photoHeight {
                super.isEqual(object)

            }
        }
        return false
    }
}

CollectionViewCell 类

class NewCellCollectionViewCell: UICollectionViewCell {

    var facts: Facts!
    var currentUser = Auth.auth().currentUser?.uid

    // IBOutlets
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var imageHeightConstraint: NSLayoutConstraint!

    @IBOutlet weak var likeLable: UILabel!
    @IBOutlet weak var likeButton: UIButton!
    @IBOutlet weak var infoButton: UIButton!
    @IBOutlet weak var buttonView: UIView!
    @IBOutlet weak var captionTextView: UITextView!

    override func awakeFromNib() {
        super.awakeFromNib()
        likeButton.setImage(UIImage(named: "noLike"), for: .normal)
        likeButton.setImage(UIImage(named: "like"), for: .selected)
        setupLayout()
    }


    func configureCell(fact: Facts){
        facts = fact

        imageView.sd_setImage(with: URL(string: fact.factsLink))
        likeLable.text = String(fact.factsLikes.count)
        captionTextView.text = fact.captionText
        let factsRef = Database.database().reference().child("Facts").child(facts.factsId).child("likes")
        factsRef.observeSingleEvent(of: .value) { (snapshot) in
            if fact.factsLikes.contains(self.currentUser!){
                self.likeButton.isSelected = true
            } else {
                self.likeButton.isSelected = false
            }


        }
    }


    override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        super.apply(layoutAttributes)
        if let attributes = layoutAttributes as? FactsFeverLayoutAttributes {
            imageHeightConstraint.constant =  attributes.photoHeight
        }
    }
}

ViewController 类

    class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        //MARK: Outlets

        @IBOutlet weak var uploadButtonOutlet: UIBarButtonItem!
        @IBOutlet weak var collectionView: UICollectionView!

        //MARK:- Properties

        var images: [UIImage] = []
        var factsArray:[Facts] = [Facts]()
        var likeUsers:[String] = []
        let currentUser = Auth.auth().currentUser?.uid



        private let refreshControl = UIRefreshControl()

        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            if #available(iOS 10.0, *) {
                collectionView.refreshControl = refreshControl
            } else {
                collectionView.addSubview(refreshControl)
            }
            refreshControl.addTarget(self, action: #selector(refreshView), for: .valueChanged)
            refreshControl.tintColor = UIColor.white

            if let layout = collectionView?.collectionViewLayout as? FactsFeverLayout {
                layout.delegate = self
            }
            collectionView.backgroundColor = UIColor.black
            observeFactsFromFirebase()      
   }


        @objc func refreshView(){
            observeFactsFromFirebase()
        }






        //MARK:- Upload Facts

        @IBAction func uploadButtonPressed(_ sender: Any) {

            self.selectPhoto()
            (deleted the function of selectPhoto but it works, UIImagePicker is used)

        }

        private func uploadImageToFirebaseStorage(image: UIImage, completion: @escaping (_ imageUrl: String) -> ()){
            let imageName = NSUUID().uuidString + ".jpg"
            let ref = Storage.storage().reference().child("message_images").child(imageName)

            if let uploadData = image.jpegData(compressionQuality: 0.2){
                ref.putData(uploadData, metadata: nil, completion: { (metadata, error) in
                    if error != nil {
                        print(" Failed to upload Image", error)
                    }
                    ref.downloadURL(completion: { (url, err) in
                        if let err = err {
                            print("Unable to upload image into storage due to \(err)")
                        }
                        let messageImageURL = url?.absoluteString
                        completion(messageImageURL!)

                    })

                })
            }
        }

        func addToDatabase(imageUrl:String, caption: String, image: UIImage){
            let Id = NSUUID().uuidString
            likeUsers.append(currentUser!)
            let timeStamp = NSNumber(value: Int(NSDate().timeIntervalSince1970))
            let factsDB = Database.database().reference().child("Facts")
            let factsDictionary = ["factsLink": imageUrl, "likes": likeUsers, "factsId": Id, "timeStamp": timeStamp, "captionText": caption, "imageWidth": image.size.width, "imageHeight": image.size.height] as [String : Any]
            factsDB.child(Id).setValue(factsDictionary){
                (error, reference) in

                if error != nil {
                    print(error)
                    ProgressHUD.showError("Image Upload Failed")
                    self.uploadButtonOutlet.isEnabled = true
                    return

                } else{
                    print("Message Saved In DB")
                    ProgressHUD.showSuccess("image Uploded Successfully")
                    self.uploadButtonOutlet.isEnabled = true

                    self.observeFactsFromFirebase()
                }
            }
        }


        var imageUrl: [String] = []
        func observeFactsFromFirebase(){

            let factsDB = Database.database().reference().child("Facts").queryOrdered(byChild: "timeStamp")
            factsDB.observe(.value){ (snapshot) in
                print("Observer Data snapshot \(snapshot.value)")

                self.factsArray = []
                self.imageUrl = []
                self.likeUsers = []

                if let snapshot = snapshot.children.allObjects as? [DataSnapshot] {
                    for snap in snapshot {

                        if let postDictionary = snap.value as? Dictionary<String, AnyObject> {
                            let id = snap.key
                            let facts = Facts(dictionary: postDictionary)
                            self.factsArray.insert(facts, at: 0)
                            self.imageUrl.insert(facts.factsLink, at: 0)

                        }
                    }
                }
                self.collectionView.reloadData()

                self.refreshControl.endRefreshing()


            }
            collectionView.reloadData()
        }
        // Download Image From Database
       //-> Here I download image from firebase and store it locally and append it to images array (Deleted the code to remove unwanted clutter)
    }

    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////

        //MARK: Data Source
    extension ViewController: UICollectionViewDataSource{

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

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let facts = factsArray[indexPath.row]
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "newCellTrial", for: indexPath) as? NewCellCollectionViewCell

            cell?.configureCell(fact: facts)
            cell?.infoButton.addTarget(self, action: #selector(reportButtonPressed), for: .touchUpInside)

            return cell!
        }    
    }
    extension ViewController: UICollectionViewDelegate {

        func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
            collectionView.deselectItem(at: indexPath, animated: true)
            let photos = IDMPhoto.photos(withURLs: imageUrl)
            let browser = IDMPhotoBrowser(photos: photos)
            browser?.setInitialPageIndex(UInt(indexPath.row))
            self.present(browser!, animated: true, completion: nil)
        } 
    }
    extension ViewController: FactsFeverLayoutDelegate {
        func collectionView(CollectionView: UICollectionView, heightForThePhotoAt indexPath: IndexPath, with width: CGFloat) -> CGFloat {
            let facts = factsArray[indexPath.item]
            let imageSize = CGSize(width: CGFloat(facts.imageWidht), height: CGFloat(facts.imageHeight))
            let boundingRect = CGRect(x: 0, y: 0, width: width, height: CGFloat(MAXFLOAT))
            let rect = AVMakeRect(aspectRatio: imageSize, insideRect: boundingRect)

            return rect.size.height

        }

        func collectionView(CollectionView: UICollectionView, heightForCaptionAt indexPath: IndexPath, with width: CGFloat) -> CGFloat {
            let fact = factsArray[indexPath.item]
            let topPadding = CGFloat(8)
            let bottomPadding = CGFloat(8)
            let captionFont = UIFont.systemFont(ofSize: 15)
            let viewHeight = CGFloat(40) //-> There is view below caption which holds like button and info button its height is constant (40)
            let captionHeight = self.height(for: fact.captionText, with: captionFont, width: width)
            let height = topPadding + captionHeight + topPadding + viewHeight + bottomPadding + topPadding + 10

            return height

        }

        func height(for text: String, with font: UIFont, width: CGFloat) -> CGFloat {
            let nsstring = NSString(string: text)
            let maxHeight = CGFloat(1000)
            let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
            let textAttributes = [NSAttributedString.Key.font: font]
            let boundingRect = nsstring.boundingRect(with: CGSize(width: width, height: maxHeight), options: options, attributes: textAttributes, context: nil)

            return ceil(boundingRect.height)
        }


    }

Answer 1

因为您使用了 attributeCache，第一个单元格的布局属性已经存储在缓存中。当您首先添加图像并重新加载您的 collectionView 时，第一个单元格的旧属性将从缓存中退出并应用于您的 collectionView 布局。

所以你必须在重新加载之前从缓存中删除元素

override func prepare() {

     attributeCache.RemoveAll()
    if attributeCache.isEmpty {
        let containerWidth = contentWidth
        var xOffset : CGFloat = 0
        var yOffset : CGFloat = 0

        for item in 0 ..< collectionView!.numberOfItems(inSection: 0) {
            let indexPath = IndexPath(item: item, section: 0)

            let width = containerWidth - cellPadding * 2
            let photoHeight:CGFloat = (delegate?.collectionView(CollectionView: collectionView!, heightForThePhotoAt: indexPath, with: width))!
            let captionHeight: CGFloat = (delegate?.collectionView(CollectionView: collectionView!, heightForCaptionAt: indexPath, with: width))!


            let height: CGFloat = cellPadding + photoHeight + captionHeight + cellPadding

            let frame = CGRect(x: xOffset, y: yOffset, width: containerWidth, height: height)
            let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)

            // Create CEll Layout Atributes
            let attributes = FactsFeverLayoutAttributes(forCellWith: indexPath)
            attributes.photoHeight = photoHeight
            attributes.frame = insetFrame
            attributeCache.append(attributes)
            // Update The Colunm any Y axis
            contentHeight = max(contentHeight, frame.maxY)
            yOffset = yOffset + height


        }


    }
    }