UICollectionView 自定义水平分页布局
UICollectionView custom horizontal paging layout
[![collectionview 示例][1]][1]
我正在尝试使用集合视图来模拟此行为。我已经开始使用这种方法,它让我更接近了。尽管当我在水平分页 CollectionView 上越来越向右滑动时,内容越来越向左移动。单元格之间的间距也关闭了。我认为它需要自定义布局,但不确定。
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width - 20, height: collectionView.frame.height - 20)
}
这取决于3个因素
1)部分插图
2) 单元间距
3) 单元格大小
每个人的任何改变都必须改变别人
针对您的情况
1) 左右设置为20
2) 将单元格间距设置为 10
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10
}
func collectionView(collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10
}
3) 设置单元格大小
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width / 1.15 ,height: collectionView.frame.height)
}
4) 这将使单元格在屏幕中居中
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth:CGFloat = scrollView.frame.width / 1.15 + cellSpacing ;
let currentOffset:CGFloat = scrollView.contentOffset.x;
let targetOffset:CGFloat = targetContentOffset.memory.x
var newTargetOffset:CGFloat = 0;
if targetOffset > currentOffset
{
newTargetOffset = ceil(currentOffset / pageWidth) * pageWidth;
}
else
{
newTargetOffset = floor(currentOffset / pageWidth) * pageWidth;
}
if newTargetOffset < 0
{
newTargetOffset = 0
}
else if newTargetOffset > scrollView.contentSize.width
{
newTargetOffset = scrollView.contentSize.width;
}
targetContentOffset.memory.x = currentOffset
scrollView.setContentOffset(CGPointMake(newTargetOffset, 0), animated: true)
}
我更改了一些@Mohamed 的解决方案,它非常适合我:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let cellSpacing: CGFloat = self.collectionView(self.collectionView, layout: self.collectionView.collectionViewLayout, minimumInteritemSpacingForSectionAt: 0)
let pageWidth: CGFloat = self.pageWidth + cellSpacing
let currentOffset = scrollView.contentOffset.x
let targetOffset = targetContentOffset.pointee.x
targetContentOffset.pointee.x = currentOffset
var pageNumber = 0
if targetOffset > currentOffset {
pageNumber = Int(ceil(currentOffset / pageWidth))
}
else {
pageNumber = Int(floor(currentOffset / pageWidth))
}
let indexPath = IndexPath(row: pageNumber, section: 0)
self.collectionView.scrollToItem(at: indexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
}
[![collectionview 示例][1]][1]
我正在尝试使用集合视图来模拟此行为。我已经开始使用这种方法,它让我更接近了。尽管当我在水平分页 CollectionView 上越来越向右滑动时,内容越来越向左移动。单元格之间的间距也关闭了。我认为它需要自定义布局,但不确定。
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width - 20, height: collectionView.frame.height - 20)
}
这取决于3个因素 1)部分插图 2) 单元间距 3) 单元格大小
每个人的任何改变都必须改变别人 针对您的情况
1) 左右设置为20
2) 将单元格间距设置为 10
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10
}
func collectionView(collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10
}
3) 设置单元格大小
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width / 1.15 ,height: collectionView.frame.height)
}
4) 这将使单元格在屏幕中居中
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth:CGFloat = scrollView.frame.width / 1.15 + cellSpacing ;
let currentOffset:CGFloat = scrollView.contentOffset.x;
let targetOffset:CGFloat = targetContentOffset.memory.x
var newTargetOffset:CGFloat = 0;
if targetOffset > currentOffset
{
newTargetOffset = ceil(currentOffset / pageWidth) * pageWidth;
}
else
{
newTargetOffset = floor(currentOffset / pageWidth) * pageWidth;
}
if newTargetOffset < 0
{
newTargetOffset = 0
}
else if newTargetOffset > scrollView.contentSize.width
{
newTargetOffset = scrollView.contentSize.width;
}
targetContentOffset.memory.x = currentOffset
scrollView.setContentOffset(CGPointMake(newTargetOffset, 0), animated: true)
}
我更改了一些@Mohamed 的解决方案,它非常适合我:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let cellSpacing: CGFloat = self.collectionView(self.collectionView, layout: self.collectionView.collectionViewLayout, minimumInteritemSpacingForSectionAt: 0)
let pageWidth: CGFloat = self.pageWidth + cellSpacing
let currentOffset = scrollView.contentOffset.x
let targetOffset = targetContentOffset.pointee.x
targetContentOffset.pointee.x = currentOffset
var pageNumber = 0
if targetOffset > currentOffset {
pageNumber = Int(ceil(currentOffset / pageWidth))
}
else {
pageNumber = Int(floor(currentOffset / pageWidth))
}
let indexPath = IndexPath(row: pageNumber, section: 0)
self.collectionView.scrollToItem(at: indexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
}