有视差的滚动视图-Parallax ScrollView In Swift
发布日期:2022-03-18 08:27:44 浏览次数:35 分类:技术文章

本文共 2329 字,大约阅读时间需要 7 分钟。

翻译自:

这里写图片描述

这周,我有机会在一个私有的项目上使用了UICollectionView。实际上,我在UICollectionViewCell上应用了一种简单的视差效果。介绍下,视差效果的走红得益于2011年网页设计师在HTML5和CSS3中的使用。

我要提醒的是视差效果并不适合每一个人,应该谨慎的使用它(还记得最初在iPhone上使用时,人们会感到眩晕)。虽然,它是一个非常棒的特色。

直接要代码,在这里。下面是一个简短的教程和一些关于视差的重点片段。

这个教程有重要的两步:

  1. 设置collection view的数据源
  2. 实现视差效果

使用Single View Application模板来创建一个新的工程。在Xcode创建项目后,会有 AppDelegate, ViewController, Main storyboard 和一堆其它的文件。

打开Main.storyboard,替换ViewController为CollectionViewController。设置table view的size为紧凑型:

这里写图片描述

调整cell的大小,宽度与CollectionView的宽度相同,高度为160:

这里写图片描述

选中cell后,设置identifier为:

parallaxCell

cell上添加UIImageView,调整其大小为320X200(UIImageView 比cell要高)。

这里写图片描述

接下来是,设置content view mode为 Aspect Fil。这很重要。

这里写图片描述

现在创建一个自定义的cell。选择File > New > File,选择Cocoa Touch Class 。命名为ParallaxCollectionViewCell,继承自UICollectionViewCell。

选择ParallaxCollectionViewCell类,添加如下的全局常亮:

let ImageHeight: CGFloat = 200.0let OffsetSpeed: CGFloat = 25.0

为UIImageView声明一个outlet:

@IBOutlet var imageView: UIImageView

图片变量来持有你的图片(利用didSet来设置imageView的image)

var image: UIImage = UIImage() {    didSet {        imageView.image = image    }}

实现offset函数,来偏移image view:

func offset(offset: CGPoint) {    imageView.frame = CGRectOffset(self.imageView.bounds, offset.x, offset.y)}

选择ViewController,改变其继承为UICollectionViewController。声明一个常量:

let parallaxCellIdentifier = "parallaxCell"

声明一个数组来保存图片数据:

var images = [String]()

接下来,下载图片,加入到项目中。在你的ViewController中,添加如下的代码到viewDidLoad: 函数中:

for i in 0...14 {    images.append("\(i)@2x")}

实现数据源函数:

override func collectionView(collectionView: UICollectionView!, numberOfItemsInSection section: Int) -> Int {    return images.count}
override func collectionView(collectionView: UICollectionView!, cellForItemAtIndexPath indexPath: NSIndexPath!) -> UICollectionViewCell! {    let parallaxCell = collectionView.dequeueReusableCellWithReuseIdentifier(parallaxCellIdentifier, forIndexPath: indexPath) as ParallaxCollectionViewCell    parallaxCell.image = UIImage(named: images[indexPath.row])    return parallaxCell}

接下来,实现UIScrollView的代理方法:

override func scrollViewDidScroll(scrollView: UIScrollView!) {    if let visibleCells = collectionView.visibleCells() as? [ParallaxCollectionViewCell] {    for parallaxCell in visibleCells {    var yOffset = ((collectionView.contentOffset.y - parallaxCell.frame.origin.y) / ImageHeight) * OffsetSpeed    parallaxCell.offset(CGPointMake(0.0, yOffset))  } }}

运行项目,滚动看看!

转载地址:https://windzen.blog.csdn.net/article/details/53610310 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:点击HTML的图片来预览图片
下一篇:UIWebView中的图文混排

发表评论

最新留言

不错!
[***.144.177.141]2024年03月25日 04时19分24秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

native react 变颜色 点击_React Native主动更改StackNavigator标头颜色 2019-04-21
prism项目搭建 wpf_WPF MVVM使用prism4.1搭建 2019-04-21
python发微信红包群_用Python实现微信自动化抢红包,再也不用担心抢不到红包了... 2019-04-21
python中func自定义函数_Python函数之自定义函数&作用域&闭包 2019-04-21
wget连接指定端口_端口通不通 telnet wget ssh 2019-04-21
eureka 调用服务_Spring Cloud微服务架构从入门到会用(二)—服务注册中心Eureka... 2019-04-21
easyexcel 工具类_问了个在阿里的同学,他们常用的15款开发者工具! 2019-04-21
mysql统计结果大于0时返回true_mysql表查询练习 2019-04-21
c语言对结构体排序中间变量,求助:c语言怎么实现结构体的排序? 总是弄不对啊... 2019-04-21
c语言宏定义只能在最前面吗,C语言宏定义注意事项 2019-04-21
android悬浮窗服务卡死,Android 悬浮窗兼容问题谈 2019-04-21
表格相关的html语言,HTML标记语言——表格标记 2019-04-21
web聊天界面html,PC端Web聊天界面+代码分享(HTML+CSS) 2019-04-21
cmake qt 添加路径 项目_CMake配置Qt工程 2019-04-21
使用python开发的软件协议_WEB开发——Python WSGI协议详解 2019-04-21
冰点下载器手机版apk_冰点文库下载器 2019-04-21
python信号采集代码_13行代码实现:Python实时视频采集(附源码) 2019-04-21
h5引入json_纯js直接引入json文件 2019-04-21
python格式化字符串总结_Python字符串处理方法总结 2019-04-21
python中true什么意思_python中的bool是什么意思 2019-04-21