首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何停止水平CollectionView Swift并使其居中

在Swift中停止水平CollectionView并使其居中,可以通过以下步骤实现:

  1. 首先,确保你的ViewController类遵循UICollectionViewDelegateFlowLayout协议,并设置CollectionView的delegate为该ViewController。
  2. 在ViewController中,实现UICollectionViewDelegateFlowLayout协议的方法collectionView(_:layout:insetForSectionAt:),该方法用于设置CollectionView的section边距。返回一个UIEdgeInsets对象,通过调整left和right属性来设置水平边距。例如:
代码语言:txt
复制
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let totalCellWidth = cellWidth * numberOfItems // 计算所有cell的总宽度
    let totalSpacingWidth = cellSpacing * (numberOfItems - 1) // 计算所有间距的总宽度
    let leftInset = (collectionView.frame.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2 // 计算左边距
    let rightInset = leftInset // 右边距等于左边距
    return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)
}

在上述代码中,cellWidth表示每个cell的宽度,numberOfItems表示CollectionView中的cell数量,cellSpacing表示cell之间的间距。通过计算得到左边距和右边距,使得CollectionView居中显示。

  1. 在ViewController中,设置CollectionView的滚动方向为水平方向。例如:
代码语言:txt
复制
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
collectionView.collectionViewLayout = layout

通过将scrollDirection属性设置为.horizontal,可以使CollectionView水平滚动。

  1. 最后,在ViewController中,实现UICollectionViewDelegate协议的方法scrollViewWillEndDragging(_:withVelocity:targetContentOffset:),该方法在用户停止拖动CollectionView时被调用。在该方法中,可以通过调整targetContentOffset参数来使CollectionView停止在居中位置。例如:
代码语言:txt
复制
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    let cellWidthIncludingSpacing = cellWidth + cellSpacing // cell的宽度加上间距
    var offset = targetContentOffset.pointee // 当前的偏移量
    let index = (offset.x + scrollView.contentInset.left) / cellWidthIncludingSpacing // 计算当前显示的cell索引
    let roundedIndex = round(index) // 四舍五入取整
    offset = CGPoint(x: roundedIndex * cellWidthIncludingSpacing - scrollView.contentInset.left, y: -scrollView.contentInset.top) // 调整偏移量使得CollectionView停止在居中位置
    targetContentOffset.pointee = offset
}

在上述代码中,cellWidthIncludingSpacing表示每个cell的宽度加上间距。通过计算当前显示的cell索引,并将偏移量调整为使得CollectionView停止在居中位置。

通过以上步骤,你可以停止水平CollectionView并使其居中显示。请注意,上述代码中的cellWidthnumberOfItemscellSpacing等变量需要根据你的实际情况进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

添加多个屏幕-创建格线布局

在上一节中,我们学习了如何使用按钮更改iPhone的屏幕。让我们进一步推动!我们将实现一个CollectionView,我们将能够切换到您想要的壁纸。该的CollectionView将是滚动的水平。...从对象库中拖放标签并将其约束到Container中的水平居中并将顶部设置为30。...MultipleScreens04 委托 Delegate 首先,让我们为CollectionView创建一个IBOutlet,Control +从Collection View ****拖动到swift...在“ 属性”检查器中,将“滚动方向”更改为“ 水平取消选中“ 显示”指示器。到目前为止,如果您运行该应用程序,您将看到3个类似的cell,并且它是可滚动的。问题是它现在做的不多。 ?...在 Cell 文件中,为索引声明一个变量使其为0.然后,在screenImageButtonTapped的值内,调用索引及其类型Int。因此,它上面的代理将具有相同的值,它将返回一个索引。

2.9K40
  • 高仿ios斗鱼界面

    全民直播,一下子掀起了直播的技术潮,今天要聊聊如何实现一个ios的直播app。 首先来看最终的效果: ?...最近也是因为入门swift不久,在网上找了一个项目就开始模仿,本项目用到的第三方库: Alamofire Kingfisher Swift3.0的蝶变 swift3.0相对于2.x,渐渐的脱离了...弹性/韧性 解决易碎二进制接口问题 Fragile binary interface problem是面向对象编程语言的通病 如果在程序中引入了外部库 我们的的程序中使用继承了该外部库中的类 如果外部库有改动...全面支持泛型特性 Swift 2.2已经很好的支持泛型 但是还不够完善,Swift 3.0开始 将全面支持泛型的所有特性。...新的API设计规范 Swift3.0 发布了新的语言设计规范 其中在Swift3.0中标准库和核心库将会遵循这个设计规范。

    76150

    ios仿斗鱼界面

    全民直播,一下子掀起了直播的技术潮,今天要聊聊如何实现一个ios的直播app。 首先来看最终的效果: ?...最近也是因为入门swift不久,在网上找了一个项目就开始模仿,本项目用到的第三方库: Alamofire Kingfisher Swift3.0的蝶变 swift3.0相对于2.x,渐渐的脱离了oc和c...弹性/韧性 解决易碎二进制接口问题 Fragile binary interface problem是面向对象编程语言的通病 如果在程序中引入了外部库 我们的的程序中使用继承了该外部库中的类 如果外部库有改动...全面支持泛型特性 Swift 2.2已经很好的支持泛型 但是还不够完善,Swift 3.0开始 将全面支持泛型的所有特性。...新的API设计规范 Swift3.0 发布了新的语言设计规范 其中在Swift3.0中标准库和核心库将会遵循这个设计规范。

    89890

    Swift多线程之Operation:异步加载CollectionView图片1. Operation 设置依赖关系2. 前置知识点内容3. CollectionView中图片进行异步加载

    知识点有:自定义Operation子类、map函数、Swift特有的元组数据类型。 下面是最终实现的CollectionView异步加载图片的例子效果: ?...先看看如何设置operation的依赖关系。 啥叫依赖关系?有啥用啊? 打个比方咱们要做一个听音乐的付费App项目,需要经过登陆、付费、下载、播放四个步骤。...其实这个属性起到的作用只是一个标识,我们在写代码的时候需要定期检查isCancelled这个值,如果是ture,我们需要立即停止执行接下来的任务。 2.2 map函数 map是干嘛的呐?...CollectionView中图片进行异步加载 来看一下思维导图: ? image.png 源代码各位可以自行下载观看,只有Swift版本的下载 。...给item赋值图片的重点地方的代码: override func collectionView(_ collectionView: UICollectionView, willDisplay cell:

    1.5K70

    iOS流水布局UICollectionView简单使用引实现结

    首先看每个方块,也就是每个cell怎么呈现,这里的cell明显是自定义的,我们用一张图片填满cell,同时在底部居中的位置放置一个label。...不同之处在于UICollectionView需要一个布局参数来决定cell是如何布局的,默认是流水布局,也就是我们最常见的形式,也就是上面图里的形式;此外,UICollectionView除了垂直滚动,...还可以设置为水平滚动,只需要改变布局参数的设置就可以了;UICollectionView的cell只能通过注册来确定重用标识符,什么叫注册,我们还是看代码: - (void)viewDidLoad {...代码中注释了一行,就是用来设置滚动方向为水平的,效果如下: 同样的内容,滚动方式变化后,呈现的效果也会变化。...:(NSInteger)section { return 4; } // 水平间距 - (CGFloat)collectionView:(UICollectionView *)collectionView

    1.1K00

    WWDC20中iOS的改变

    打造出带有网格视图、类似UITableView的界面。...Group 有三种形式水平(horizontal)、垂直(vertical)、自定义(custom)从这里可以看出,collectionView的布局越来越多样,越来越多样,多性能监控和用户行为监控提了更高的要求...Apple Silicon 重新编译 MacOS App,如何构建通用架构 App,以及让这些 App 启动更快,性能更好支持平台未来发展是需要我们关注的,这里apple给出了一个移植用例,可以作为一个通用参考...参考https://xiaozhuanlan.com/topic/9823657014 10.Swift 最后,事实上,这一次的WWDC介绍了大量的Swift的内容,这里没有涉猎,网上有很多相关的内容,...可以看出Swift早晚会转正,而且内容会更加完善,例如App Clip只在Swift上支持,有兴趣的同学可以看https://xiaozhuanlan.com/topic/2804537169 最后,可以参考

    1.8K10

    AVKit框架详细解析(二) —— 基于视频播放器的画中画实现(一)

    开始 首先看下主要内容: 了解如何为所有应用平台的默认和自定义视频播放器实现画中画,内容来自翻译。...在本教程中,您将学习如何向使用 UIKit 构建的现有视频应用程序添加画中画支持。...打开 CategoryListViewController.swift 滚动到标有注释的 UICollectionViewDataSource的Implementation部分。...delegate = self 此代码初始化pictureInPictureController 设置其代理。 接下来,您将添加功能,以便您的用户可以在自定义播放器控制器中启动和停止画中画。 1....stopPictureInPicture() 当用户点击适当的按钮时,这些方法告诉画中画控制器启动或停止画中画。

    2.8K10

    手把手带你撸一个网易云音乐首页(三)

    前言 Hello, 大家好,今天准备和大家继续分享如何利用 Swift 来实现一个网易云音乐的首页;上俩篇文章文章发布以后,我收获了不少小伙伴的关注与点赞,同时也得到了一些非常有用的建议,在这里再次感谢大家的认可...首先,在我们的首页视图控制器 DiscoveryViewController 中创建存储属性 HomeViewModel 初始化它。...上面讲到为视图设置圆角一不小心就会造成离屏渲染,那么这个问题该如何解决呢!...targetContentOffset(...), 在这个函数中有一个参数 proposedContentOffset 记录了滚动的目标位移坐标,通过这个坐标和记录的上次滚动的坐标可以判断出是向左滚动还是向右滚动 如果俩坐标的水平方向相减的绝对值大于某个固定值...decelerationRate = .fast } // 这个方法的返回值,决定了 CollectionView 停止滚动时的偏移量 override func targetContentOffset

    2.3K10

    成为一名优秀 Swift 开发人员的 10 个小技巧

    使用 Protocol Protocol 在 Swift 中可以做很多事情。使用协议,我们可以设计软件组件的行为,使其符合特定的实现。...HTTP 层:使用 Alamofire; 图像处理库:使用 Alamofire image 或 Kingfisher; 自动布局辅助库,如 Snapkit; UI 工具,如 HUD、masonry CollectionView...如何还不够的话,在 @IBDesignable 你甚至可以支持 Storyboards 的扩展,它有很多扩展集合,我喜欢编写简短的方法来扩展字符串、按钮等以完成简单的任务。...幸运的是,我有一位 UI/UX 专家与我一起工作,为我提供了很多有关如何正确操作的建议。...在本文中,我将重点更多地放在Swift功能上,以提高代码效率传递Swift机制的优点。我提供了一些简单的示例,说明每个iOS应用程序和开发人员应关注的重点。 - EOF -

    2.3K40

    使用 UICollectionView 实现分页滑动效果

    在上篇博客中,给大家演示了如何利用 UICollectionView 这个强大的控件去实现一个卡片轮播的效果,后来有网友联系我说:"他遇到一个问题,当他滚动的 item 宽度与屏幕宽度一致时,滚动效果是正常的...,但当把 item 宽度的值设置成小于屏幕宽度的时候,滚动就会出现遮挡的 bug, 这该如何解决呢!"...那自定义滚动分页该如何实现呢!...targetContentOffset(...), 在这个函数中有一个参数 proposedContentOffset 记录了滚动的目标位移坐标,通过这个坐标和记录的上次滚动的坐标可以判断出是向左滚动还是向右滚动4.如果俩坐标的水平方向相减的绝对值大于某个固定值...decelerationRate = .fast } // 这个方法的返回值,决定了 CollectionView 停止滚动时的偏移量 override func targetContentOffset

    3K20

    iVX 倒计时制作

    需求:点击开始计时计时,并且开始计时按钮文本编程停止计时文本,点击记录事件可以记录当前时间显示到下面的记录时间列中。...一、页面制作 首先创建一个相对应用项目,命名为计时器: 接着创建一个页面,设置页面的水平、垂直对齐为居中: 接着创建一个行,用于显示记录内容: 这个行设置宽度不占满 100%,...使其可以居中对齐,并且给予对应的背景色,设置内部元素为居中对齐,接着为了使内部元素可以举例上下左右有一点举例,可以再设置内边距增加其边缘厚度: 接着创建一个行,命名为倒计时,在里面用于显示对应的文本...我们得创建一个变量用于标记是否计时,在此创建一个布尔变量,默认为否,没有点击,当点击后设置为true表示开启,那么开启时就设置文本为停止计时,关闭时就设置文本为停止计时即可: 这个时候将触发器一做了设置...: 每次触发时这个秒数就应该设置为加1: 当加到60s时,那么这个秒变量置零,随后分加1,所以在这里我们还需要创建两个变量,分和时: 此时我们还需要知道一个问题,那就是如何在小于

    1.5K20

    三、登录页制作《iVX低代码无代码个人博客制作》

    一、登录页实现 本节需要做的登录页如下: 该页面我们复习可以的值,首先设置整个页面页面的垂直和水平对其为居中,随后一个容器包裹对应的登录区域,此时我们创建一个页面命名为登录注册页,并且设置水平和垂直对其为居中...: 接着我们创建一个行,命名为登录框,并且需要设置这个行的宽高为 500*300,水平方向对其为居中: 接着我们创建一个行,命名为标题,在内部创建一个文本,编写文本内容为登录,接着设置这个标题的的水平分享垂直居中...,一个是输入框一个是按钮: 需要设置成以上形式,需要去掉对应元素的外边框属性,比清切使其统一高度,在此设置了两个元素的高度均为40、圆角取消: 接着按照此方法一次创建其他内容:...此时由于其内部的每一个行的水平内容都是设置为居中,我们需要内部元素的宽度一致才能对其,在此验证码输入框的宽度要等于手机号码和发送按钮宽度的综合。...此时只需要在触发器中,添加条件,当秒数已经小于1时,那么发送按钮的文本就更改为发送: 但是此时还会出现一个问题,当前触发器还未停止,登录倒计时依旧在减1,此时还需要在小于0时停止当前触发器并且我还需要给予原本的秒数为

    1.2K20
    领券