swift中使用UIColllectionView实现横向轮播的一般方法
//
// HomeLiveRankCell.swift
// YYSwiftProject
//
// Created by Domo on 2018/7/28.
// Copyright © 2018年 知言网络. All rights reserved.
//

import UIKit
class HomeLiveRankCell: UICollectionViewCell {
private var multidimensionalRankVosList: [MultidimensionalRankVosModel]?
private let LiveRankCellID = "LiveRankCell"
// MARK: - 滚动排行榜
private lazy var collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout.init()
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
layout.itemSize = CGSize(width: (YYScreenWidth-30), height:self.frame.size.height)
// layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
layout.scrollDirection = UICollectionViewScrollDirection.horizontal
let collectionView = UICollectionView.init(frame:.zero, collectionViewLayout: layout)
collectionView.contentSize = CGSize(width: (YYScreenWidth-30), height: self.frame.size.height)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.white
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.isPagingEnabled = true
collectionView.register(LiveRankCell.self, forCellWithReuseIdentifier:LiveRankCellID)
return collectionView
}()
var timer: Timer?
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.white
self.addSubview(self.collectionView)
self.collectionView.snp.makeConstraints { (make) in
make.width.height.equalToSuperview()
make.center.equalToSuperview()
}
// 开启定时器
starTimer()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
// 界面赋值并刷新
var multidimensionalRankVos:[MultidimensionalRankVosModel]? {
didSet {
guard let model = multidimensionalRankVos else { return }
self.multidimensionalRankVosList = model
self.collectionView.reloadData()
}
}
}
extension HomeLiveRankCell: UICollectionViewDataSource, UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return (self.multidimensionalRankVosList?.count ?? 0)*100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell:LiveRankCell = collectionView.dequeueReusableCell(withReuseIdentifier: LiveRankCellID, for: indexPath) as! LiveRankCell
cell.backgroundColor = UIColor.init(red: 248/255.0, green: 245/255.0, blue: 246/255.0, alpha: 1)
cell.multidimensionalRankVos = self.multidimensionalRankVosList?[indexPath.row%(self.multidimensionalRankVosList?.count)!]
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(indexPath.row%(self.multidimensionalRankVosList?.count)!)
}
/// 开启定时器
func starTimer () {
let timer = Timer.init(timeInterval: 3, target: self, selector: #selector(nextPage), userInfo: nil, repeats: true)
// 这一句代码涉及到runloop 和 主线程的知识,则在界面上不能执行其他的UI操作
RunLoop.main.add(timer, forMode: RunLoopMode.commonModes)
self.timer = timer
}
/// 在1秒后,自动跳转到下一页
@objc func nextPage() {
// 1.获取collectionView的X轴滚动的偏移量
let currentOffsetX = collectionView.contentOffset.x
let offsetX = currentOffsetX + collectionView.bounds.width
// 2.滚动该位置
collectionView.setContentOffset(CGPoint(x: offsetX, y: 0), animated: true)
}
// // 监听collectionView的滚到
// func scrollViewDidScroll(_ scrollView: UIScrollView) {
// // 1、获取滚动的偏移量 + scrollView.bounds.width * 0.5给偏移量加一半,当滑动一般就滚动pageControl的当前选中
// let offsetX = scrollView.contentOffset.x + scrollView.bounds.width * 0.5
// // 2、计算pageContra的currentIndex。这 % (cycleModelArr?.count ?? 1)也是跟上同样道理
// pageControl.currentPage = Int(offsetX / scrollView.bounds.width) % (imageArray?.count ?? 1)
// }
//
/// 当collectionView开始拖动的时候,取消定时器
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.timer?.invalidate()
self.timer = nil
}
/// 当用户停止拖动的时候,开启定时器
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
starTimer()
}
}
//
// LiveRankCell.swift
// YYSwiftProject
//
// Created by Domo on 2018/7/28.
// Copyright © 2018年 知言网络. All rights reserved.
//
import UIKit
class LiveRankCell: UICollectionViewCell {
private lazy var imageView : UIView = {
let imageView = UIView()
return imageView
}()
private lazy var titleLabel : UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 18)
return label
}()
private lazy var label : UILabel = {
let label = UILabel()
label.text = ">"
label.textColor = UIColor.lightGray
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(self.titleLabel)
self.titleLabel.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(10)
make.height.equalTo(40)
make.width.equalTo(100)
make.centerY.equalToSuperview()
}
self.addSubview(self.imageView)
self.imageView.snp.makeConstraints { (make) in
make.right.equalToSuperview().offset(-5)
make.top.equalToSuperview().offset(5)
make.bottom.equalToSuperview().offset(-5)
make.width.equalTo(180)
}
self.imageView.addSubview(self.label)
self.label.snp.makeConstraints { (make) in
make.right.equalToSuperview().offset(-5)
make.height.width.equalTo(10)
make.centerY.equalToSuperview()
}
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
var multidimensionalRankVos:MultidimensionalRankVosModel? {
didSet {
guard let model = multidimensionalRankVos else { return }
self.titleLabel.text = model.dimensionName
let num:Int = (model.ranks?.count)!
let margin:CGFloat = 50
for index in 0..<num {
let picView = UIImageView.init(frame: CGRect(x:margin*CGFloat(index)+5*CGFloat(index),y:5,width:margin,height:margin))
picView.layer.masksToBounds = true
picView.layer.cornerRadius = picView.frame.size.width/2
picView.kf.setImage(with: URL(string: (model.ranks?[index].coverSmall!)!))
self.imageView.addSubview(picView)
}
}
}
}

swift中使用UIColllectionView实现横向轮播的一般方法的更多相关文章
- js 实现横向轮播效果
参考:https://www.cnblogs.com/LIUYANZUO/p/5679753.html html: <!DOCTYPE html> <html> <hea ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- 移动端轮播图实现方法(dGun.js)
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
- H5制作显示轮播图的方法Swiper
1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...
- swiper横向轮播--3d
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- swiper横向轮播(兼容IE8)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- JForum项目搭建
JForum 是采用Java开发的功能强大且稳定的论坛系统.它提供了抽象的接口.高效的论坛引擎以及易于使用的管理界面,同时具有完全的权限控制.多语言支持(包括中文).高性能.可自定义的用户接口.安全. ...
- 基于Python的大数据的分页模型代码
最近在写一个cmdb系统的分页,尽管Django本身有分页的模块儿,但是还是想实现一下自己心中想的分页的一种逻辑 因为,在我们工作当中,当我们的数据量超级大的时候,其实我们每次分页查询都不必将所有的数 ...
- python2.x 脚本 中文乱码 解决方法
在python脚本起始位置添加如下代码 # -*- coding: UTF-8 -*
- 深入了解memcached
一.memcached如何支持高并发 Memcached使用多路复用 I/O模型(如epoll.select等).传统阻塞 I/O中,系统可能会因为某个用户连接还没做好 I/O准备而一直等待,直到这个 ...
- 小程序列表循环出来的list是不同接口赋的值
需求:首页有三个列表,样式形式都是一样的,可以循环展示,但是循环的内容list部分是来自于不同的三个接口. data: { indexList:[{ name: "中考体能突击营" ...
- HTML学习第七天(二)
HTML学习第七天(二) 新增的非主体结构 header元素 footer元素 hgroup元素 address元素 header元素:通常用于存放整个页面或页面内的一个区域块的标题,但也可以存放类似 ...
- mysql 安装完以后没有mysql服务
用管理员身份打开命令控制台(cmd),然后将mysql的安装文件的路径打开(bin文件的路径),然后再路径下打上mysqld.exe -install, 会出现提示 Service successf ...
- 使用PYaudio录制音频和视频(自己)
参考:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 音频录制:简洁版 import pyaudioimport waveimpo ...
- 微信公众号sdk
微信公众号开发 能享用微信公众号的API,比如分享给好友,分享到朋友圈,禁止菜单功能,选择图片,获取地址,以及支付 微信的功能有两种执行方式 一种是 wx.xx 一种是 WeixinJSBridge. ...
- java面试题汇总,不断更新中。。。
JVM,并发,锁相关: 1.请你谈谈对volatile的理解,volatile是否存在伪共享问题. 2.cas你知道吗? 3.原子类AtomicInteger的ABA问题谈谈?原子更新引用知道吗? 4 ...