当在顶部添加新帖子时，UICollectionView 单元格自定义 FlowLayout 中断
Posted
技术标签:
【中文标题】当在顶部添加新帖子时，UICollectionView 单元格自定义 FlowLayout 中断【英文标题】：UICollectionView Cell Custom FlowLayout Breaks When New Post is Added on Top 【发布时间】：2018-11-25 12:14:08 【问题描述】：说明：
我一直在开发一个在CollectionView 中显示图像和标题的应用程序。我为单元格创建了custom Cell 和CustomFlowLayout，其中单元格、图像和标题的宽度等于屏幕宽度，并且高度将根据图像高度的纵横比和标题所需的高度而变化。显示的图像存储在FirebaseStorage 上，我还将imagewidth 和imageheight 保存在firebaseDatabase 中。 I 使用 SD_Web 图像加载和缓存图像。当应用程序第一次加载时，布局按预期工作得非常好。单元格根据图像高度和标题高度排列，图像按纵横比排列。
完成新帖子时会出现主要问题。我在collectionview的顶部插入新帖子，当收到帖子时布局中断，图像变得混乱，标题在顶部图像上，图像或标题之间有很多空白。当我从后台终止应用程序并再次运行它时，这次布局非常好，新帖子出现了。我必须在每个人发布后终止应用程序才能使布局正常工作。
我觉得问题在于，当我发布图片时。新帖子被添加到顶部单元格上，顶部单元格上的项目被推到下面而没有旧的高度。我该如何解决这个问题。我尝试了很多搜索，但仍然没有用。 PS： 在 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)
【问题讨论】：
这里CollectionViewCell的宽度是固定的，等于屏幕的宽度？那么我认为你不需要自定义 UICollectionViewLayout。尝试使用默认的 FlowLayout。 我认为这是由于属性缓存。因为第一个单元格属性已经存储在缓存中。当您在顶部附加新帖子时，它会从缓存中访问旧属性以获取 indexpath(0,0)。您应该尝试Cache.removeAll() 比 CollectionView.invalidLayout. 感谢您为我指明方向。我通过在 prepare 中添加 attributeCache.removeAll 解决了这个问题。 【参考方案1】：由于您使用了attributeCache，因此第一个单元格的layoutAttribute已经存储在缓存中。当您首先添加图像并重新加载您的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
【讨论】：
你能说出在准备中使用属性缓存和在上述方法中有什么区别吗，因为当我在准备中使用属性缓存时，我得到了我想要的结果。但是当我按照你描述的方式使用它时，布局仍然会中断 对不起，这只是对准备方法的误解，是的，您可以在准备时清除缓存。我已更新答案以上是关于当在顶部添加新帖子时，UICollectionView 单元格自定义 FlowLayout 中断的主要内容，如果未能解决你的问题，请参考以下文章
在动态 UITableViewCell 的顶部添加一个单元格