Swift实现多个TableView侧滑与切换效果

在Android中我们常常使用ListView来表示列表,来显示类似的呈现列表样式的结果。来到iOS中,这种控件称之为TableView。这里我们将会通过使用ScrollView和TableView结合的方式来实现可以侧滑显示的列表,这将会大大提高用户体验。先看一下实现效果:

具体实现步骤如下:

(1)创建一个iOS项目,Language选择Swift,然后在Main.storyboard中拖入一个ScrollView,即滚动控件,界面设计如图:

(2)然后拖动控件绑定到代码中:

@IBOutlet weak var dynamicScrollView: UIScrollView! 

(3)我将会在一个ScrollView中实现三个TableView,三个列表可以通过手指的左右滑动进行切换,一些变量定义如下:

var tableView11:UITableView = UITableView()
var tableView22:UITableView = UITableView()
var tableView33:UITableView = UITableView() 

var cell1 = UITableViewCell()
var cell2 = UITableViewCell()
var cell3 = UITableViewCell() 

(4)然后在viewDidLoad()中设置委托和数据源,同时该类要实现以下接口:UIScrollViewDelegate,UITableViewDelegate,UITableViewDataSource

override func viewDidLoad() {
  super.viewDidLoad() 

  tableView11.delegate = self
  tableView11.dataSource = self 

  tableView22.delegate = self
  tableView22.dataSource = self 

  tableView33.delegate = self
  tableView33.dataSource = self 

  dynamicScroll()
  initCustomTableView()
}

(5)实现dynamicScroll()方法,该方法是对ScrollView控件的滚动进行控制,同时把三个TableView加入到ScrollView中:

func dynamicScroll(){ //动态信息的滚动;
  let tableW:CGFloat = self.dynamicScrollView.frame.size.width;
  let tableH:CGFloat = self.dynamicScrollView.frame.size.height;
  var tableY:CGFloat = 0;
  var totalCount:NSInteger = 3;//只有三列; 

    var tableView1:UITableView = UITableView();
    var tableView2:UITableView = UITableView();
    var tableView3:UITableView = UITableView(); 

    tableView11.frame = CGRectMake(CGFloat(0) * tableW, tableY, tableW, tableH);
    tableView22.frame = CGRectMake(CGFloat(1) * tableW, tableY, tableW, tableH);
    tableView33.frame = CGRectMake(CGFloat(2) * tableW, tableY, tableW, tableH); 

    dynamicScrollView.addSubview(tableView11);
    dynamicScrollView.addSubview(tableView22);
    dynamicScrollView.addSubview(tableView33); 

  let contentW:CGFloat = tableW * CGFloat(totalCount);//这个表示整个ScrollView的长度;
  dynamicScrollView.contentSize = CGSizeMake(contentW, 0);
  dynamicScrollView.pagingEnabled = true;
  dynamicScrollView.delegate = self; 

}

(6)实现initCustomTableView()方法,该方法是对TableView的中的Cell设置ID号,用来标识不同的TableView :

func initCustomTableView(){  //初始化动态信息中的TableView 

  tableView11.registerClass(UITableViewCell.self, forCellReuseIdentifier:"cell1")
  tableView22.registerClass(UITableViewCell.self, forCellReuseIdentifier:"cell2")
  tableView33.registerClass(UITableViewCell.self, forCellReuseIdentifier:"cell3")
}

(7)最后实现UITableViewDataSource中的两个必须实现的方法,是对三个TableView的数据源将进行设置:需要显示的内容可以在这里进行添加:

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{ 

 return 5 //返回TableView的Cell数量,可以动态设置;
} 

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{ 

 var cell = UITableViewCell() 

 switch tableView { 

 case tableView11:
  cell1 = tableView11.dequeueReusableCellWithIdentifier("cell1") as! UITableViewCell
  cell1.textLabel!.text = String(format:"昨天")
  cell = cell1
  break 

 case tableView22:
  cell2 = tableView22.dequeueReusableCellWithIdentifier("cell2") as! UITableViewCell
  cell2.textLabel!.text = String(format:"今天")
  cell = cell2 

  break 

 case tableView33:
  cell3 = tableView33.dequeueReusableCellWithIdentifier("cell3") as! UITableViewCell
  cell3.textLabel!.text = String(format:"明天")
  cell = cell3 

  break 

 default:
  break
 } 

 return cell
} 

(8)最后运行程序,就可以实现本文开头的多个TableView在ScrollView中通过侧滑就可以切换的效果,虽然屏幕大小有限,我们可以通过视图的切换显示丰富的内容。

在iOS的开发中,TableView和ScrollView是两个最为常用,使用最为灵活的控件,必须要好好掌握。

github主页:https://github.com/chenyufeng1991  。欢迎大家访问!

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

(0)

相关推荐

  • Swift开发之UITableView状态切换效果

    效果 源码 https://github.com/YouXianMing/Swift-Animations // // TableViewTapAnimationController.swift // Swift-Animations // // Created by YouXianMing on 16/8/7. // Copyright © 2016年 YouXianMing. All rights reserved. // import UIKit class TableViewTapAni

  • Swift TableView实现冻结窗格功能

    今天做了一个简例,用tableView实现excel冻结窗格功能 Demo:https://git.oschina.net/sunflowrs/FreezePanes.git 初始化Tableview 实现代理 class BasicTableView:UITableView,UITableViewDelegate,UITableViewDataSource 声明变量时,数组和字典,最好设置成已知类型,避免惹麻烦 var titleArr:Array<String> = [] var list

  • Swift实现多个TableView侧滑与切换效果

    在Android中我们常常使用ListView来表示列表,来显示类似的呈现列表样式的结果.来到iOS中,这种控件称之为TableView.这里我们将会通过使用ScrollView和TableView结合的方式来实现可以侧滑显示的列表,这将会大大提高用户体验.先看一下实现效果: . . . 具体实现步骤如下: (1)创建一个iOS项目,Language选择Swift,然后在Main.storyboard中拖入一个ScrollView,即滚动控件,界面设计如图: . (2)然后拖动控件绑定到代码中:

  • iOS开发tips-UINavigationBar的切换效果

    概述 在iOS系统中,如果控制器是以push方式进行管理的话,那么事实上多个控制器是共享的同一个导航栏.当然iOS系统的设计无可厚非,但是国内的应用经常会遇到很多个性的设计,就比如说A push到 B,A可能有导航栏,但是B控制器要求导航栏是透明的,这样一来A和B由于共用同一个导航栏就会让整个切换操作不易管理,何况从iOS 7开始不仅仅是点击返回按钮瞬间返回A那么简单,还要支持通过手势操作从B缓慢返回到A的导航栏渐变效果.本文就简单看一下如何能够更加合理的设计导航栏切换的效果以避免开发中由于导航

  • Android编程实现ActionBar的home图标动画切换效果

    本文实例讲述了Android编程实现ActionBar的home图标动画切换效果.分享给大家供大家参考,具体如下: Material Design中一个重要特性是侧滑菜单 展开/关闭 时,ActionBar上的home图标也动画切换.本例要实现的正是这个效果,如图所示: 实现这个效果仅需几步: 1.首先,该页面的布局是一个DrawerLayout,代码如下: <android.support.v4.widget.DrawerLayout xmlns:android="http://sche

  • Android Flutter实现图片滑动切换效果

    目录 前言 SlideTransition 介绍 示例效果实现 总结 前言 我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成, Flutter 为了简化开发,提供了不少转换动画组件,这类组件通常命名为 xxTransition.本篇要介绍的就是 SlideTransition,顾名思义,就知道是滑动转换动画.我们本篇来实现两张小姐姐图片的滑动切换,效果如下图所示. SlideTransition 介绍 S

  • AngularJS2中一种button切换效果的实现方法(二)

    之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式: 路由 <button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button> <button class="btn2&q

  • 使用AngularJS2中的指令实现按钮的切换效果

    之前在AngularJS2中一种button切换效果的实现(二)中实现了按钮的切换效果,但是方法比较low,这次我们使用Angular2的指令来实现. 指令实现hover效果 import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructo

  • 基于javascript实现最简单的选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &

  • 基于jquery实现鼠标滚轮驱动的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果: 鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度. XHTML <div class="demo"> <div id="imageflow"> <div id="loading">&l

  • 基于jquery实现左右按钮点击的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示. 2.html结构分析 <div class="activity" id="activity-slide"> <a href

随机推荐