Swift 带有下一页预览的 CollectionView 滑块
Swift CollectionView slider with preview of next page
我有在每个单元格上显示图像的滑块。我想要做的是在当前页面上显示下一张图片的 10%,然后将它滑到下一页。每张图片都应该在自己的页面中居中(总共 3 张)。
extension OnboardingViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.width - 200, height: view.frame.height)
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let cellWidth : CGFloat = view.frame.width - 200
let numberOfCells = floor(self.view.frame.size.width / cellWidth)
let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)
return UIEdgeInsets(top: 15, left: edgeInsets, bottom: 0, right: edgeInsets)
}
}
我所做的是...我插入左边缘。使我的单元格更小,例如初始大小的 0.74,我添加了 2 种方法来在拖动幻灯片时控制我的幻灯片...
然后我使用标志 previewed 将动画添加到我的自定义单元格。所以..我的初始幻灯片总是 previewed 并且大小为 1.0,所有其他幻灯片的大小为 0.9,当我拖动图像时我将 previewed 状态更改为 false 用于所有幻灯片,仅对呈现的幻灯片执行 true。
0.74 是我的单元格大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let cellWidth : CGFloat = view.frame.width * 0.74
let numberOfCells = floor(self.view.frame.size.width / cellWidth)
let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)
return UIEdgeInsets(top: 0, left: edgeInsets, bottom: 0, right: edgeInsets)
}
我找到了适合我案例的自定义尺寸
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.width * 0.74, height: view.frame.height)
}
我写了 2 个方法来控制我的幻灯片
func scrollViewWillEndDragging(_ scrollView: UIScrollView,
withVelocity velocity: CGPoint,
targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let x = targetContentOffset.pointee.x
pageControl.currentPage = Int(x / view.frame.width * 0.74)
let last = viewModel.getNumberOfItems() - 1
if pageControl.currentPage == last {
btnStart.isHidden = false
imbBtnStartBg.isHidden = false
} else {
btnStart.isHidden = true
imbBtnStartBg.isHidden = true
}
}
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
let pageWidth = view.frame.width * 0.74
let page = floor((collectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1
let xOffset: CGFloat = page * pageWidth
collectionView.setContentOffset(CGPoint(x: xOffset, y: 0.0), animated: true)
pageControl.currentPage = Int(page)
if Int(page) == 2{
btnStart.isHidden = false
imbBtnStartBg.isHidden = false
} else {
btnStart.isHidden = true
imbBtnStartBg.isHidden = true
}
for i in 0..<viewModel.onBoardingModels.count{
viewModel.onBoardingModels[i].previewed = false
}
viewModel.onBoardingModels[Int(page)].previewed = true
collectionView.reloadData()
}
我还为我的单元格添加了动画[=14=]
UIView.animate(withDuration: 0.5, animations: {
self.imgv.transform = model.previewed ? CGAffineTransform(scaleX: 1, y: 1) : CGAffineTransform(scaleX: 0.9, y: 0.9)
})
我有在每个单元格上显示图像的滑块。我想要做的是在当前页面上显示下一张图片的 10%,然后将它滑到下一页。每张图片都应该在自己的页面中居中(总共 3 张)。
extension OnboardingViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.width - 200, height: view.frame.height)
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let cellWidth : CGFloat = view.frame.width - 200
let numberOfCells = floor(self.view.frame.size.width / cellWidth)
let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)
return UIEdgeInsets(top: 15, left: edgeInsets, bottom: 0, right: edgeInsets)
}
我所做的是...我插入左边缘。使我的单元格更小,例如初始大小的 0.74,我添加了 2 种方法来在拖动幻灯片时控制我的幻灯片... 然后我使用标志 previewed 将动画添加到我的自定义单元格。所以..我的初始幻灯片总是 previewed 并且大小为 1.0,所有其他幻灯片的大小为 0.9,当我拖动图像时我将 previewed 状态更改为 false 用于所有幻灯片,仅对呈现的幻灯片执行 true。
0.74 是我的单元格大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let cellWidth : CGFloat = view.frame.width * 0.74
let numberOfCells = floor(self.view.frame.size.width / cellWidth)
let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)
return UIEdgeInsets(top: 0, left: edgeInsets, bottom: 0, right: edgeInsets)
}
我找到了适合我案例的自定义尺寸
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.width * 0.74, height: view.frame.height)
}
我写了 2 个方法来控制我的幻灯片
func scrollViewWillEndDragging(_ scrollView: UIScrollView,
withVelocity velocity: CGPoint,
targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let x = targetContentOffset.pointee.x
pageControl.currentPage = Int(x / view.frame.width * 0.74)
let last = viewModel.getNumberOfItems() - 1
if pageControl.currentPage == last {
btnStart.isHidden = false
imbBtnStartBg.isHidden = false
} else {
btnStart.isHidden = true
imbBtnStartBg.isHidden = true
}
}
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
let pageWidth = view.frame.width * 0.74
let page = floor((collectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1
let xOffset: CGFloat = page * pageWidth
collectionView.setContentOffset(CGPoint(x: xOffset, y: 0.0), animated: true)
pageControl.currentPage = Int(page)
if Int(page) == 2{
btnStart.isHidden = false
imbBtnStartBg.isHidden = false
} else {
btnStart.isHidden = true
imbBtnStartBg.isHidden = true
}
for i in 0..<viewModel.onBoardingModels.count{
viewModel.onBoardingModels[i].previewed = false
}
viewModel.onBoardingModels[Int(page)].previewed = true
collectionView.reloadData()
}
我还为我的单元格添加了动画[=14=]
UIView.animate(withDuration: 0.5, animations: {
self.imgv.transform = model.previewed ? CGAffineTransform(scaleX: 1, y: 1) : CGAffineTransform(scaleX: 0.9, y: 0.9)
})