小码哥-玩转【斗鱼直播APP】系列之实现无限轮播
2016-11-24 15:08
816 查看
|
参数名称 | 参数说明 |
---|---|
version | 当前版本号:2.300 |
根据接口发送请求
定义CycleModel模型
将请求到的数据转成模型对象
模型定义
class CycleModel: NSObject {
/// 轮播标题
var title : String = ""
/// 轮播图片
var pic_url : String = ""
/// 轮播对应主播信息
var anchor : AnchorModel?
/// 主播信息
var room : [String : NSObject]? {
didSet {
guard let room = room else { return }
anchor = AnchorModel(dict: room)
}
}
// MARK: 构造函数
init(dict : [String : NSObject]) {
super.init()
setValuesForKeysWithDictionary(dict)
}
override func setValue(value: AnyObject?, forUndefinedKey key: String) {}
}
数据请求
func requestCycleData(finishedCallback : () -> ()) {
NetworkTools.requestData(.GET, URLString: "http://www.douyutv.com/api/v1/slide/6?version=2.300") { (result) in
// 1.将结果转成字典
guard let resultDict = result as? [String : NSObject] else { return }
guard let dataArray = resultDict["data"] as? [[String : NSObject]] else { return }
// 2.将字典转成模型对象
for dict in dataArray {
self.cycleModels.append(CycleModel(dict: dict))
}
finishedCallback()
}
}
展示数据
将数据传递给RecommendCycleView对象刷新UICollectionView
设置UIPageControl的个数
自定义Cell,用于展示数据
通过xib直接描述Cell
根据模型展示数据
代码如下:
class CollectionCycleCell: UICollectionViewCell {
// MARK: 控件属性
@IBOutlet weak var iconImageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
// MARK: 定义模型属性
var cycleModel : CycleModel? {
didSet {
titleLabel.text = cycleModel?.title
let iconURL = NSURL(string: cycleModel?.pic_url ?? "")!
iconImageView.kf_setImageWithURL(iconURL)
}
}
}
实现无限轮播功能
在返回Cell个数地方,返回无限个数例如:(cycleModels?.count ?? 0) * 10000
原因:无论用户怎么滚动,滚动几天可能才能滚完
另外:因为Cell有循环利用,是不会常见那么多Cell的。不会造成内存很大
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return (cycleModels?.count ?? 0) * 10000
}
随着用户的滚动,改变pageControl的显示
监听UICollectionView的滚动即可
func scrollViewDidScroll(scrollView: UIScrollView) {
let offset = scrollView.contentOffset.x + scrollView.bounds.width * 0.5
pageControl.currentPage = Int(offset / scrollView.bounds.width) % (cycleModels?.count ?? 1)
}
让用户向前滚动也可以
默认滚动到60处,那么用户向前滚动也有内容
注意:不需要太多,因为用户习惯来讲是很少向前滚动的
let indexPath = NSIndexPath(forItem: (cycleModels?.count ?? 0) * 10, inSection: 0)
collectionView.scrollToItemAtIndexPath(indexPath, atScrollPosition: .Left, animated: false)
自动滚动功能
添加定时器
每隔3秒钟自动滚动到下一个
// MARK:- 对定时器操作方法
extension RecommendCycleView {
private func addCycleTimer() {
cycleTimer = NSTimer(timeInterval: 3, target: self, selector: #selector(self.scrollToNext), userInfo: nil, repeats: true)
NSRunLoop.mainRunLoop().addTimer(cycleTimer!, forMode: NSRunLoopCommonModes)
}
private func removeCycleTimer() {
cycleTimer?.invalidate()
cycleTimer = nil
}
@objc private func scrollToNext() {
// 滚动collectionView
let currentOffSet = collectionView.contentOffset.x + collectionView.bounds.width
collectionView.setContentOffset(CGPoint(x: currentOffSet, y: 0), animated: true)
}
}
监听用户拖拽
用户拖拽过程中,定时器不更新
监听用户拖拽&结束拖拽即可
func scrollViewWillBeginDragging(scrollView: UIScrollView) {
removeCycleTimer()
}
func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
addCycleTimer()
}
相关文章推荐
- 玩转【斗鱼直播APP】系列之实现无限轮播
- 小码哥-玩转【斗鱼直播APP】系列之首页布局分析实现
- 玩转【斗鱼直播APP】系列之首页布局分析实现
- 小码哥-玩转【斗鱼直播APP】系列之界面分析
- 小码哥-玩转【斗鱼直播APP】系列之项目部署
- 小码哥-玩转【斗鱼直播APP】系列之框架搭建
- 小码哥-玩转【斗鱼直播APP】系列之项目基本设置
- 玩转【斗鱼直播APP】系列之游戏界面实现
- 小码哥-玩转【斗鱼直播APP】系列之利用青花瓷抓取数据
- 小码哥-玩转【斗鱼直播APP】系列之请求展示推荐数据
- 玩转【斗鱼直播APP】系列之项目基本设置
- 第二十一篇玩转【斗鱼直播APP】系列之加载数据动画
- 玩转【斗鱼直播APP】系列之首页导航栏设置
- 第二十四篇玩转【斗鱼直播APP】系列之采集视频
- 小码哥-玩转【斗鱼直播APP】系列之游戏推荐展示
- 第二十二篇玩转【斗鱼直播APP】系列之弹出房间界面
- 玩转【斗鱼直播APP】系列之界面分析
- 玩转【斗鱼直播APP】系列之框架搭建
- 第十八篇玩转【斗鱼直播APP】系列之娱乐菜单展示
- 玩转【斗鱼直播APP】系列之利用青花瓷抓取数据