我正在尝试创建自己的Book应用,并使用UICollectionView
列出所有图书。每个单元格的数据都来自.plist
文件,我正在使用自定义flowLayout
(稍后再进行一些更改)。
所以现在我在滚动时会陷入延迟和滞后。我想我在将数据传递到单元格或单元格初始化时犯了错误。
.xib
和自定义类创建的单元格,只有一些布局和UI:
class BookCoverCell: UICollectionViewCell {
@IBOutlet weak var view1: UIView!
@IBOutlet weak var view2: UIView!
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var darkRedView: UIView!
@IBOutlet weak var lightRedView: UIView!
@IBOutlet weak var readButton: UIButton!
@IBOutlet weak var pageLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
clipsToBounds = true
self.backgroundColor = UIColor(white: 1, alpha: 0.0)
view1.layer.cornerRadius = 10
view2.layer.cornerRadius = 10
darkRedView.layer.cornerRadius = 10
lightRedView.layer.cornerRadius = 10
}
}
在ViewController的课程:
class MainVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UIScrollViewDelegate {
@IBOutlet weak var collectionContainerView: UIView!
@IBOutlet weak var collectionView: UICollectionView!
var books: Array<Book>? {
didSet {
collectionView.reloadData()
}
}
var flowLayout = UICollectionViewFlowLayout()
override func viewDidLayoutSubviews() {
flowLayout = ZoomAndSnapFlowLayout()
collectionView.collectionViewLayout = flowLayout
}
override func viewDidLoad() {
super.viewDidLoad()
collectionContainerView.backgroundColor = UIColor(white: 1, alpha: 0.0)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(UINib(nibName: "BookCoverCell", bundle: nil), forCellWithReuseIdentifier: "BookCoverCell");
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(true)
books = BookStore.sharedInstance.loadBooks(plist: "Books")
}
//MARK: UICollectionViewDelegate
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if let books = books {
return books.count
}
return 0
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "BookCoverCell", for: indexPath) as! BookCoverCell
let book = books![indexPath.row]
let cover = book.coverImage()!
let color = book.getDominantColor()
cell.view1.backgroundColor = color
cell.imageView.image = cover
cell.pageLabel.text = "Pages: 29"
cell.readButton.setTitle("Read", for: .normal)
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let book = books?[indexPath.row]
print ("open")
}
}
我的布局现在看起来像:
class ZoomAndSnapFlowLayout: UICollectionViewFlowLayout {
var cellWidth = CGFloat()
var cellHeight = CGFloat()
var minLineSpacing = CGFloat()
override init() {
super.init()
self.scrollDirection = .horizontal
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepare() {
guard let collectionView = collectionView else { fatalError() }
cellHeight = collectionView.frame.height * 0.8
minLineSpacing = 200
cellWidth = cellHeight
itemSize = CGSize(width: cellWidth, height: cellHeight)
let verticalInsets = (collectionView.frame.height - collectionView.adjustedContentInset.top - collectionView.adjustedContentInset.bottom - itemSize.height) / 2
let horizontalInsets = (collectionView.frame.width - collectionView.adjustedContentInset.right - collectionView.adjustedContentInset.left - itemSize.width) / 2
sectionInset = UIEdgeInsets(top: verticalInsets, left: horizontalInsets, bottom: verticalInsets, right: horizontalInsets)
super.prepare()
}
}
所以我很确定代码中有一些错误,但是找不到它们((任何建议对我都会有帮助!
UPDATE:首先,谢谢!我已经更改了代码,并用最小的图像替换了一个很大的图像,并且现在可以将主导颜色简单地变为白色,并且功能已经变得更好了!
BUT第一次滚动开始时,只有一个第一和第二个单元格,当它们滚动到屏幕的左边缘时,延迟或延迟很小。然后,所有单元都在两个方向(左/右)上滚动,没有滞后,甚至前两个也没有滞后。
现在我的代码如下:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "BookCoverCell", for: indexPath) as! BookCoverCell
let book = books![indexPath.row]
let cover = UIImage(named: "flag.png")
let color = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
cell.view1.backgroundColor = color
cell.imageView.image = cover
cell.pageLabel.text = "Pages: 29"
cell.readButton.setTitle("Read", for: .normal)
return cell
}
和UPDATE#2删除
flowLayout = ZoomAndSnapFlowLayout()
collectionView.collectionViewLayout = flowLayout
为了viewWillAppear()
也解决这些小延迟!!万岁!)
阅读有关时间剖析和收集视图的本文:https://voxels.github.io/eliminating-collection-view-tearing-with-xcode-time-profiler-instrument
由于您的实现非常简单,所以不会有很多错误的事情,但是您可能会遇到与本文作者相同的问题-图像本身非常大,需要阅读和调整大小。
他们通过制作适当尺寸的图像解决了这个问题。
在您的情况下,getDominantColor
在大图像上也会变慢(我假设它读取像素来获得主要颜色。您还应该考虑缓存该颜色,而不是每次都重新计算(如果您尚未这样做) )。