swift - CollectionView + 页面控件
问题描述
我有collectionView,其中每个单元格都是一个页面(单元格在纵向模式下占据整个屏幕,在横向模式下占据2个单元格)。我正在尝试添加当前页码/总页数(即 1/30)到目前为止我得到的 1/0 --> 1 是当前页码,0 是总页数。
有两个问题:
- 只有当我开始滚动时才会显示总页数
- 当我滚动当前页码不会改变。
我使用的代码:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if pageControl.currentPage < pages.count {
pageControl.currentPage += 1
numberOfPagesLabel.text = "\(pageControl.currentPage + 1)/\(pages.count)"
} else if pageControl.currentPage != 0 {
pageControl.currentPage -= 1
numberOfPagesLabel.text = "\(pageControl.currentPage - 1)/\(pages.count)"
}
}
class DetailsViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UIScrollViewDelegate {
private var collectionView: UICollectionView!
let pageControl = UIPageControl (frame: CGRect(x: 20, y: 120, width: 44, height: 44))
let numberOfPagesLabel = UILabel (frame: CGRect(x: 20, y: 0, width: 44, height: 44))
private var pages = [Pages]() {
didSet {
DispatchQueue.main.async {
self.collectionView.reloadData()
}
}
}
override func viewDidLoad() {
super.viewDidLoad()
numberOfPagesLabel.layer.cornerRadius = 15.0
numberOfPagesLabel.clipsToBounds = true
numberOfPagesLabel.center.x = self.view.center.x
numberOfPagesLabel.center.y = self.view.center.y+350
self.view.addSubview(collectionView)
self.view.addSubview(pageControl)
self.view.addSubview(numberOfPagesLabel)
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(true)
collectionViewLayout()
collectionView.delegate = self
collectionView.dataSource = self
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if pageControl.currentPage < pages.count {
pageControl.currentPage += 1
numberOfPagesLabel.text = "\(pageControl.currentPage + 1)/\(pages.count)"
} else if pageControl.currentPage != 0 {
pageControl.currentPage -= 1
numberOfPagesLabel.text = "\(pageControl.currentPage - 1)/\(pages.count)"
}
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return pages.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "colCell7", for: indexPath) as! colCell7
let book = pages[indexPath.row]
cell.setupCell(for: book)
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if UIWindow.isLandscape {
return CGSize(width: (collectionView.frame.size.width)/2, height: (collectionView.frame.size.height))
}
else { return CGSize(width: (collectionView.frame.size.width), height: (collectionView.frame.size.height))
}
}
func collectionViewLayout() {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: layout)
collectionView.backgroundColor = .white
collectionView.showsHorizontalScrollIndicator = false
collectionView.showsVerticalScrollIndicator = false
collectionView.isPagingEnabled = true
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(colCell7.self, forCellWithReuseIdentifier: "colCell7")
collectionView.isScrollEnabled = true
collectionView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
layout.itemSize = CGSize(width: view.frame.width, height: view.frame.height)
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.itemSize = CGSize(width: view.frame.width/2, height:view.frame.height )
}
}
解决方案
尝试使用此代码在 CollectionView 中获取 currentPage:
public func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// for horizontal scroll
let currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
// for vertical scroll
// let currentPage = Int(scrollView.contentOffset.y) / Int(scrollView.frame.height)
pageControl.currentPage = currentPage
numberOfPagesLabel.text = "\(self.pages.count)/\(self.pageControl.currentPage - 1)"
}
当滚动结束减速时,最好在 scrollViewDidEndDecelerating 函数中添加用于检测当前页面的计算器代码。
完整代码:
public struct Pages {
public var title: String
}
class DetailsViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
private var collectionView: UICollectionView!
let pageControl = UIPageControl (frame: CGRect(x: 20, y: 120, width: 44, height: 44))
let numberOfPagesLabel = UILabel (frame: CGRect(x: 20, y: 0, width: 44, height: 44))
private var pages = [Pages]() {
didSet {
DispatchQueue.main.async {
self.collectionView.reloadData()
}
}
}
override func viewDidLoad() {
super.viewDidLoad()
self.numberOfPagesLabel.textColor = .red
self.numberOfPagesLabel.backgroundColor = .blue
collectionViewLayout()
collectionView.delegate = self
collectionView.dataSource = self
self.view.addSubview(collectionView)
self.view.addSubview(pageControl)
self.view.addSubview(numberOfPagesLabel)
numberOfPagesLabel.translatesAutoresizingMaskIntoConstraints = false
numberOfPagesLabel.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20).isActive = true
numberOfPagesLabel.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
self.collectionView.register(UINib.init(nibName: "colCell7", bundle: nil), forCellWithReuseIdentifier: "colCell7")
numberOfPagesLabel.layer.cornerRadius = 15.0
numberOfPagesLabel.clipsToBounds = true
numberOfPagesLabel.center.x = self.view.center.x
numberOfPagesLabel.center.y = self.view.center.y+350
collectionView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
collectionView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
collectionView.heightAnchor.constraint(equalTo: self.view.heightAnchor).isActive = true
collectionView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
pages = [.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1"),
.init(title: "1")]
pageControl.numberOfPages = pages.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return pages.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "colCell7", for: indexPath) as! colCell7
let book = pages[indexPath.row]
cell.setupCell(pages: book)
return cell
}
public func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// for horizontal scroll
let currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
// for vertical scroll
// let currentPage = Int(scrollView.contentOffset.y) / Int(scrollView.frame.height)
pageControl.currentPage = currentPage
numberOfPagesLabel.text = "\(self.pages.count)/\(currentPage)"
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: (collectionView.frame.size.width), height: (collectionView.frame.size.height))
}
func collectionViewLayout() {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: layout)
collectionView.backgroundColor = .white
collectionView.delegate = self
collectionView.dataSource = self
collectionView.showsHorizontalScrollIndicator = false
collectionView.showsVerticalScrollIndicator = false
collectionView.isPagingEnabled = true
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.isScrollEnabled = true
layout.itemSize = CGSize(width: view.frame.width, height: view.frame.height)
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.itemSize = CGSize(width: view.frame.width/2, height:view.frame.height )
}
}
输出:
推荐阅读
- mongodb - MongoDB上基于子文档中的多个条件的聚合查询
- sql - SQL Server 中是否有任何方法可以有条件地返回列?
- screen - 使用 PIC16F877A 微控制器从 TFT 屏幕读取 UART 问题
- python - 即使使用 __init__ 导入的函数也不起作用
- node.js - node.js nodemailer 和 nodemailer-sendinblue-transport 无法发送电子邮件
- reactjs - 在 Gatsby 网站的 Netlify 仪表板中看不到表单
- python - IndexError:索引超出范围 Python 错误
- distributed-computing - 协调器失败时的两阶段提交阻塞
- node.js - TypeError:无法读取未定义 Angular SSR 的属性“indexOf”
- java - 如何在 Intellij 中显示分支覆盖率?