iOS模拟中奖名单循环滚动效果

本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下

1.动态效果图:

2.思路:

(1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等于所有cell的总高度,且加载相同的的数据,父视图的clipsToBounds属性一定要设置为true

(2)滚动:使用计时器,调整时间及滚动大小,使展示平滑

(3)循环算法:当A列表滚动出界面时,就把它添加在B列表的下面,B列表滚动出界面时,就把它添加在A列表的下面,形成循环效果

3.Swift版核心代码(可直接复制粘贴看效果):

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource{

 var tableView:UITableView!
 var doubleTableView:UITableView!
 let kScreenW = UIScreen.main.bounds.size.width
 let kXPercent = UIScreen.main.bounds.size.width / 375.0
 let kBorderW = CGFloat(15.0)
 let kYPercent = UIScreen.main.bounds.size.width / 375.0
 let cellId:String = "drawViewCell1"

 override func viewDidLoad() {
  super.viewDidLoad()

  self.addListTableView()
 }
 func addListTableView(){

  let tableWidth = kScreenW - kBorderW*3
  let tableBgView = UIView(frame: CGRect(x: (kScreenW-tableWidth)/2.0,y: 100*kYPercent,width: tableWidth,height: 148*kYPercent))
  tableBgView.clipsToBounds = true
  tableBgView.backgroundColor = UIColor.yellow
  self.view.addSubview(tableBgView)

  //

  tableView = UITableView(frame: CGRect(x: 0,y: 0,width: tableWidth,height: 148*kYPercent*2), style: UITableViewStyle.plain)
  tableView.backgroundColor = UIColor.clear
  tableView.delegate = self
  tableView.dataSource = self
  tableView.separatorStyle = UITableViewCellSeparatorStyle.none
  tableBgView.addSubview(tableView)

  doubleTableView = UITableView(frame: CGRect(x: 0,y: tableView.frame.origin.y+tableView.frame.size.height,width: tableWidth,height: 148*kYPercent*2), style: UITableViewStyle.plain)
  doubleTableView.backgroundColor = UIColor.clear
  doubleTableView.delegate = self
  doubleTableView.dataSource = self
  doubleTableView.separatorStyle = UITableViewCellSeparatorStyle.none
  tableBgView.addSubview(doubleTableView)

  //
  Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(personListScroll(timer:)), userInfo: nil, repeats: true)
 }
 @objc func personListScroll(timer:Timer){

  // 1>移动tableView的frame
  var newTableViewframe = self.tableView.frame
  newTableViewframe.origin.y -= 2*kYPercent
  if (newTableViewframe.origin.y < -(doubleTableView.frame.size.height)) {

   newTableViewframe.origin.y = tableView.frame.size.height
  }
  self.tableView.frame = newTableViewframe

  // 2>移动doubleTableView的frame
  var newDoubleViewframe = self.doubleTableView.frame
  newDoubleViewframe.origin.y -= 2*kYPercent
  if newDoubleViewframe.origin.y < -(tableView.frame.size.height) {

   newDoubleViewframe.origin.y = tableView.frame.size.height
  }
  self.doubleTableView.frame = newDoubleViewframe

 }

 //返回行的个数
 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
  return 10
 }
 //返回列的个数
 func numberOfSections(in tableView: UITableView) -> Int {
  return 1;
 }
 //去除头部空白
 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
  return 0.001
 }
 //去除尾部空白
 func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
  return 0.001
 }
 //返回一个cell
 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{

  //回收池
  var cell:UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: cellId)

  if cell == nil{//判断是否为nil

   cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: cellId)
  }
  cell.backgroundColor = UIColor.clear
  cell.selectionStyle = UITableViewCellSelectionStyle.none

  if tableView == self.tableView{// 测试是否循环滚动

   cell.textLabel?.text = "张先生"
  }else {

   cell.textLabel?.text = "李小姐"
  }

  return cell
 }
 //返回cell的高度
 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{

  return 148/5.0*kYPercent
 }

 override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()

 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • iOS中无限循环滚动简单处理实现原理分析

    说下原理: 1./*初始化/ + (instancetype)loopScrollViewWithFrame:(CGRect)frame; 将背景collectinview视图初始化设置 代理和数据源 . 布局 2.在激活initwithFrame后触发 layoutSubviews //默认滚动到要显示的第一张图片 if (self.imageCollectionView.contentOffset.x == 0) { NSIndexPath *indexPath = [NSIndexPath

  • iOS实现无限循环滚动的TableView实战教程

    前言 本文主要给大家介绍了如何实现一个可以无限循环的TableView的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 先来看看效果: 思路 条条大路通罗马,个人分析下以下思路的可行性: 1.借鉴无限广告轮播的思路.可行性不高,主要是列表头部和尾部的衔接不够自然,而且快速滑动不够流畅. 2.使用TableView+3倍长度dataSource.可行性一般,在使用过程中滑动流畅,但是由于重复的数据源,可能导致在处理事件时需要特别对数据进行处理避免重复,另外此方法不能重用,总让有强迫

  • iOS模拟中奖名单循环滚动效果

    本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等于所有cell的总高度,且加载相同的的数据,父视图的clipsToBounds属性一定要设置为true (2)滚动:使用计时器,调整时间及滚动大小,使展示平滑 (3)循环算法:当A列表滚动出界面时,就把它添加在B列表的下面,B列表滚动出界面时,就把它添加在A列表的下面,形成循环效果 3.Swift版

  • 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

  • 不间断循环滚动效果的实例代码(必看篇)

    蛮优秀的一段效果代码,可以上下左右滚动,收藏了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • JS实用的带停顿的逐行文本循环滚动效果实例

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实用的带停顿的逐行文本循环

  • jQuery模拟Marquee实现无缝滚动效果完整实例

    本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di

  • JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后

  • Unity实现3D循环滚动效果

    本文实例为大家分享了Unity实现3D循环滚动效果展示的具体代码,供大家参考,具体内容如下 然后通过SetDepthAndPosition这个方法,实现图片的空间空间展开 Z轴和Y轴,系数是一样的 经过上面设置,空间就摆开了 using UnityEngine; using System.Collections; using System.Collections.Generic; public class SelectRole : MonoBehaviour { public GameObjec

  • JS实现的文字间歇循环滚动效果完整示例

    本文实例讲述了JS实现的文字间歇循环滚动效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>www.jb51.net - 间歇循环滚动</title> <style> #box{ height:240px; width:300px; margin:0 auto

  • Unity实现卡片循环滚动效果的示例详解

    目录 简介 定义卡片的摆放规则 调整卡片的层级关系 调整卡片的尺寸大小 动态调整位置.层级和大小 移动动画 按钮事件 简介 功能需求如图所示,点击下一个按钮,所有卡片向右滚动,其中最后一张需要变更为最前面的一张,点击上一个按钮,所有卡片向左滚动,最前面的一张需要变更为最后一张,实现循环滚动效果. 最中间的一张表示当前选中项,变更为选中项的滚动过程中,需要逐渐放大到指定值,相反则需要恢复到默认大小. 实现思路: 定义卡片的摆放规则: 调整卡片的层级关系: 调整卡片的尺寸大小: 卡片向指定方向移动,

  • iOS仿网易简单头部滚动效果

    本文实例为大家分享了iOS仿网易滚动效果片展示的具体代码,供大家参考,具体内容如下 仿网易的主要思想为: 1. 设置好按钮与线的宽度, 2. 将所需要的标题传入并生成按钮 3. 在点击的时候,通过计算偏移量,将自身进行偏移 4. 偏移量的设置需要注意不能小于0并且不成大于contengsize-frame的宽度 具体代码如下,可直接使用,需要注意的是需要先设置宽度,再传标题数组才可自动调整,否则会固定为默认的60 另外,BtnArr与linelabel设置为readonly比较合理,不过这里还需

随机推荐