实现类似这样的效果,可以滚动大概有两种实现方案

1. 使用scrollview来实现

2. 使用UICollectionView来实现

第一种比较简单,而且相对于性能来说不太好,于是我们使用第二种方案

UICollectionView 的基础知识再次就不做说明了,在网上随便一搜都是一大把,我们就说说这个如何实现的吧,

其实很简单

就这么几个文件。

先看看控制器里边的代码

 1 import UIKit
 2
 3 class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
 4
 5     var myCollectionView: UICollectionView!
 6
 7     override func viewDidLoad() {
 8         super.viewDidLoad()
 9         // Do any additional setup after loading the view, typically from a nib.
10
11         view.backgroundColor = UIColor(red: 220/255.0, green: 220/255.0, blue: 220/255.0, alpha: 1.0)
12
13         setupCollectionView()
14
15     }
16
17
18     // set up collection view
19     private func setupCollectionView() {
20
21         let screenW = UIScreen.mainScreen().bounds.size.width;
22         var rect = view.bounds
23         rect.size.height = (screenW - 15 * 2 - 10 * 3) / 2 + 30 + 10
24         rect.origin.y = 100
25         myCollectionView = UICollectionView(frame: rect, collectionViewLayout: collectionLayout())
26         myCollectionView.backgroundColor = UIColor.whiteColor()
27         myCollectionView.pagingEnabled = true
28         myCollectionView.showsHorizontalScrollIndicator = true
29         myCollectionView.delegate = self
30         myCollectionView.dataSource = self
31         view.addSubview(myCollectionView)
32
33
34       myCollectionView.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
35
36     }
37
38     // set up layout
39     private func collectionLayout() -> UICollectionViewLayout {
40
41         let layout = CustomLayout()
42         return layout;
43     }
44
45
46     //MARK:- collection view data source
47     func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
48
49         return 1
50     }
51     func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
52
53         return 26
54     }
55     func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
56
57         let cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath)
58
59         return cell
60     }
61
62     func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
63         print(indexPath.row)
64     }
65
66 }

就是在控制器中见了一个UICollectionView 所有的设置跟我们平时使用的一模一样,唯一不同的地方就是我们自定义的布局

 1 import UIKit
 2
 3 let edgeMargin: CGFloat = 15   // 边界的间距
 4 let padding: CGFloat = 10     // 内部每个cell的间距
 5 let column: Int = 4      // 每页有多少列
 6 let row: Int = 2        // 每页有多少行
 7
 8
 9 class CustomLayout: UICollectionViewLayout {
10
11     private var layoutAttr: [UICollectionViewLayoutAttributes] = []
12
13     var totalCount: Int {  // 有多少cell
14         get {
15             return collectionView!.numberOfItemsInSection(0)
16         }
17     }
18
19     var page: Int {
20         get {
21             let numOfPage: Int = column * row
22             return totalCount / numOfPage + 1
23         }
24     }
25
26     // 重写此方法,自定义想要的布局
27     override func prepareLayout() {
28         super.prepareLayout()
29
30         // 这个方法最主要的任务是计算出每个cell的位置
31         layoutAttr = []
32         var indexPath: NSIndexPath
33         for index in 0..<totalCount {
34             indexPath = NSIndexPath(forRow: index, inSection: 0)
35             let attributes = layoutAttributesForItemAtIndexPath(indexPath)!
36
37             layoutAttr.append(attributes)
38         }
39     }
40
41     override func collectionViewContentSize() -> CGSize { // 返回滚动的Size,根据页数计算出来
42         return CGSizeMake(collectionView!.frame.size.width * CGFloat(page), collectionView!.frame.size.height)
43     }
44
45     override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
46         return true
47     }
48
49     override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
50
51         // 这个方法用来计算每一个cell的位置
52         let att: UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
53
54         let collectW: CGFloat = collectionView!.frame.size.width   // collection view 宽度
55         let numOfPage: Int = column * row
56         let pageIndex: Int = indexPath.row / numOfPage    // 当前cell处在哪一个页
57         let columnInPage: Int = indexPath.row % numOfPage % column   // 当前cell 在当前页的哪一列,用来计算位置
58         let rowInPage: Int = indexPath.row % numOfPage / column  // 当前cell 在当前页的哪一行,用来计算位置
59         // 计算宽度
60         let cellW: CGFloat = (collectW - edgeMargin * 2 - CGFloat(column - 1) * padding) / CGFloat(column)
61         // 高度
62         let cellH: CGFloat = cellW
63         // x
64         let cellX: CGFloat = collectW * CGFloat(pageIndex) + edgeMargin + (cellW + padding) * CGFloat(columnInPage)
65         // y
66         let cellY :CGFloat = edgeMargin + (cellH + padding) * CGFloat(rowInPage)
67
68         att.frame = CGRectMake(cellX, cellY, cellW, cellH)
69         return att
70     }
71
72     override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
73         return layoutAttr
74     }
75
76
77 }

prepareLayout 这个方法使我们自定义布局的方法只要我们自定义了这几个方法就是实现了上边图片中的效果,

其实到这里,就跟使用scrollviewview 差不多了。效果图如下

下载地址 https://github.com/agelessman/ScrollItemView

转载于:https://www.cnblogs.com/machao/p/5696216.html

使用UICollectionView实现首页的滚动效果相关推荐

  1. QQTIM首页视差滚动效果案例

    <QQ TIM>案例 html 在头部引入html5shiv.min.js文件,此处作用是判断浏览器是否是IE9以下版本的, 如果是,则执行兼容性文件,不是的话就跳过 <!--[if ...

  2. html 点击后上下滚动效果,css 上下滚动效果

    .scroll{ overflow:hidden; width:100%; } .scrollout{ height:250px; width:100%; overflow:hidden; curso ...

  3. JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 实现类似表格内容动态滚动效果

    文章目录 需求背景 效果图 实现思路 示例代码 需求背景 在一些大屏首页展示上,通常会有一些表格展示,由于大屏的特殊性,不会有人专门去操作这个页面查看相应数据,一般都会采用动态滚动的效果.下面是具体的 ...

  5. 【网站】数字滚动效果的实现方法

    代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...

  6. 【Android】App首页上下滚动快报控件 通知控件 类似京东快报控件(一)

    前言 快过年了,对于大伙来说手头上的事情做完没有呢,马上也该让自己轻松一阵子了,哈哈哈.好,说正事,由于公司App这个版本首页的改版,新增了很多新的控件,类似于京东快报这种控件的话我在写之前也去找了一 ...

  7. uni-app 项目笔记 基础配置及scroll-view左右滚动效果

    一直想用uni来做个项目,这次公司有新项目,我决定用uni来写,虽然自己学的还不是很熟.感觉只有在项目中才能更好的学习,所以记下在项目中遇到的一些要点. 第一步:新建项目我就不写了,当项目建好后会生成 ...

  8. 【SwiftUI模块】0026、SwiftUI制作具有半透明底部标签栏滚动效果的动画轮播滑块

    SwiftUI模块系列 - 已更新26篇 SwiftUI项目 - 已更新2个项目 往期Demo源码下载 技术:SwiftUI.SwiftUI3.0.半透明底部标签栏.滚动效果.动画轮播滑块 运行环境: ...

  9. 包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...

    <script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...

  10. html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果

    HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...

最新文章

  1. 对象统计信息锁定的解决办法(ORA-20005/ORA-38029)
  2. python连接阿里云odps
  3. 分享一次 Java 内存泄漏的排查
  4. HAPPY_TOGETHER_WEEK15_ENJOY
  5. 并发编程中的重重量级模型和轻量级模型
  6. 手机MODEM开发(27)---VOLTE SIP 信令流程图
  7. C++ 出现异常“.... \debug_heap.cpp Line:980 Expression:__acrt_first_block==header“
  8. python3中exec_Python3
  9. mysql中的表显示“使用中”解决办法!
  10. 拓端tecdat|R语言基于温度对城市层次聚类、kmean聚类、主成分分析和Voronoi图可视化
  11. SQLyog安装成功步骤(附带码),2021版最新
  12. 《Python 100例》练习,基于Python 3.5做了一遍
  13. 普元EOS之我要使用多数据源
  14. 微信小程序弹框显示自定义内容(1)
  15. 海康大华等传统摄像机的RTSP流通过拉转GB/T28181输出级联到国标流媒体服务平台
  16. Android CoordinatorLayout自定义Behavior实现依赖滚动布局
  17. HTML+CSS小白入门与进阶教程
  18. 一文弄懂BIN、HEX、AXF、ELF文件格式的区别
  19. 排列组合 C(n,m)
  20. Qt之使用GraphicsView框架实现思维导图功能

热门文章

  1. matlab获取图片上的字,Matlab读取图片代码
  2. 74cms代码执行漏洞
  3. BAT账号相关1:腾讯开放平台和QQ互联开发者审核步骤
  4. 安装西门子博图一直重启_博途V15.1安装及无限重启和.net3.5SP1错误处理解决方法...
  5. html5语音读取文字_微信语音转发给别人播放不了怎么办?该怎么转发?
  6. 药品计算机数据备份管理制度,药品记录与数据管理规范(征求意见稿)
  7. windows7计算机图片,win7照片查看器无法显示图片计算机可用内存不足 需要技巧...
  8. python ctype_Python ctype帮助:使用C unsigned char指针
  9. 计算机网络系统工程监理,GB-T 19668.4-2007 信息化工程监理规范 第4部分:计算机网络系统工程监理规范.pdf...
  10. 龙格-库塔(Runge-Kutta)