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

1. 使用scrollview来实现

2. 使用UICollectionView来实现

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

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

其实很简单

就这么几个文件。

先看看控制器里边的代码

 import UIKit

 class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {

     var myCollectionView: UICollectionView!

     override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib. view.backgroundColor = UIColor(red: /255.0, green: /255.0, blue: /255.0, alpha: 1.0) setupCollectionView() } // set up collection view
private func setupCollectionView() { let screenW = UIScreen.mainScreen().bounds.size.width;
var rect = view.bounds
rect.size.height = (screenW - * - * ) / + +
rect.origin.y =
myCollectionView = UICollectionView(frame: rect, collectionViewLayout: collectionLayout())
myCollectionView.backgroundColor = UIColor.whiteColor()
myCollectionView.pagingEnabled = true
myCollectionView.showsHorizontalScrollIndicator = true
myCollectionView.delegate = self
myCollectionView.dataSource = self
view.addSubview(myCollectionView) myCollectionView.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell") } // set up layout
private func collectionLayout() -> UICollectionViewLayout { let layout = CustomLayout()
return layout;
} //MARK:- collection view data source
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) return cell
} func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
print(indexPath.row)
} }

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

 import UIKit

 let edgeMargin: CGFloat =    // 边界的间距
let padding: CGFloat = // 内部每个cell的间距
let column: Int = // 每页有多少列
let row: Int = // 每页有多少行 class CustomLayout: UICollectionViewLayout { private var layoutAttr: [UICollectionViewLayoutAttributes] = [] var totalCount: Int { // 有多少cell
get {
return collectionView!.numberOfItemsInSection()
}
} var page: Int {
get {
let numOfPage: Int = column * row
return totalCount / numOfPage +
}
} // 重写此方法,自定义想要的布局
override func prepareLayout() {
super.prepareLayout() // 这个方法最主要的任务是计算出每个cell的位置
layoutAttr = []
var indexPath: NSIndexPath
for index in ..<totalCount {
indexPath = NSIndexPath(forRow: index, inSection: )
let attributes = layoutAttributesForItemAtIndexPath(indexPath)! layoutAttr.append(attributes)
}
} override func collectionViewContentSize() -> CGSize { // 返回滚动的Size,根据页数计算出来
return CGSizeMake(collectionView!.frame.size.width * CGFloat(page), collectionView!.frame.size.height)
} override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
return true
} override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? { // 这个方法用来计算每一个cell的位置
let att: UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath) let collectW: CGFloat = collectionView!.frame.size.width // collection view 宽度
let numOfPage: Int = column * row
let pageIndex: Int = indexPath.row / numOfPage // 当前cell处在哪一个页
let columnInPage: Int = indexPath.row % numOfPage % column // 当前cell 在当前页的哪一列,用来计算位置
let rowInPage: Int = indexPath.row % numOfPage / column // 当前cell 在当前页的哪一行,用来计算位置
// 计算宽度
let cellW: CGFloat = (collectW - edgeMargin * - CGFloat(column - ) * padding) / CGFloat(column)
// 高度
let cellH: CGFloat = cellW
// x
let cellX: CGFloat = collectW * CGFloat(pageIndex) + edgeMargin + (cellW + padding) * CGFloat(columnInPage)
// y
let cellY :CGFloat = edgeMargin + (cellH + padding) * CGFloat(rowInPage) att.frame = CGRectMake(cellX, cellY, cellW, cellH)
return att
} override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return layoutAttr
} }
prepareLayout 这个方法使我们自定义布局的方法
只要我们自定义了这几个方法就是实现了上边图片中的效果, 其实到这里,就跟使用scrollviewview 差不多了。效果图如下
下载地址 https://github.com/agelessman/ScrollItemView

使用UICollectionView实现首页的滚动效果的更多相关文章

  1. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  2. 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. [iOS] UICollectionView实现图片水平滚动

    最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...

  4. [ios]新手笔记-。-UIPickerView 关于伪造循环效果和延时滚动效果

    查找了网上资料,循环效果绝大部分都是增加行数来制造循环的错觉,延时滚动就是利用NSTimer间隔出发滚动事件来制造滚动效果. 代码: #import <UIKit/UIKit.h>#imp ...

  5. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  6. HTML标签marquee实现滚动效果

    html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...

  7. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  8. marquee标签实现页面内容的滚动效果

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  9. marquee 实现首尾相连循环滚动效果

    <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等  marquee标签不是HTML3.2 ...

随机推荐

  1. 【.net 深呼吸】程序集的热更新

    当一个程序集被加载使用的时候,出于数据的完整性和安全性考虑,程序集文件(在99.9998%的情况下是.dll文件)会被锁定,如果此时你想更新程序集(实际上是替换dll文件),是不可以操作的,这时你得把 ...

  2. 转:serialVersionUID作用

    汗,以前学了还忘了... Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本 ...

  3. 用scikit-learn学习DBSCAN聚类

    在DBSCAN密度聚类算法中,我们对DBSCAN聚类算法的原理做了总结,本文就对如何用scikit-learn来学习DBSCAN聚类做一个总结,重点讲述参数的意义和需要调参的参数. 1. scikit ...

  4. 小兔JS教程(四)-- 彻底攻略JS数组

    在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性 在J ...

  5. web api接口同步和异步的问题

    一般来说,如果一个api 接口带上Task和 async 一般就算得上是异步api接口了. 如果我想使用异步api接口,一般的动机是我在我的方法里面可能使用Task.Run 进行异步的去处理一个耗时的 ...

  6. 验证管理员权限(C#)

    参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  7. ASP.NET MVC关于Ajax以及Jquery的无限级联动

    ---恢复内容开始--- 第一次发表博文,发表博文的目的是巩固自己的技术,也能够共享给大家.写的不好的地方,希望大家多给给意见.老司机勿喷 数据结构() NewsTypeId 新闻ID, NewsTy ...

  8. bzoj3932--可持久化线段树

    题目大意: 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第 ...

  9. 面向对象相关知识点xmind

  10. 如何区别char与varchar?

    1.varchar与char两个数据类型用于存储字符串长度小于255的字符,MySQL5.0之前是varchar支持最大255.比如向一个长度为40个字符的字段中输入一个为10个字符的数据.使用var ...