无情最是台城柳,依旧烟笼十里提!<滑头小子||奸诈蜥>

效果图:

分栏联动效果

思路:

① 这里我用的是两个 tableView (执行操作(代理)方法时候根据 tag 值加以区分), 先用StoryBoard布局两个 tableView. 然后实现代理方法让两个栏显示各自的内容(左栏一个分区row显示总类, 右栏分区数是左栏 row 的数目),
② 接下来实现第一种需求: 点击左栏的 row 右栏选中对应分区的第一个row, 点击右侧栏任一分区的 row,左栏选中对应分区的 row, 这个在点击方法中实现起来问题不大
③ 另外一个要求就是, 滑动右栏的时候左栏对应会选中右栏分区对应的总类 row; 解决这个问题思路就是在右栏的头视图出现和消失的时候进行判断左栏的选中哪个row , 关键点就是我们要判断头视图出现是从下面还是上面, 也就是你滑动的方向,一般情况下我们需要的是左栏的 row 类名, 是我们右栏最上分区的名; 那么滑动右栏下滑时候出现的区就是左栏显示的 row 名, 而上滑右栏消失的区的下一个区就是左栏显示的 row 名;就这两个情况
④ 上面是我做之前的思考思路, 还有些出现的问题, 我们遇到了在进行解决.

代码解析:

定义需要的属性:

#不要忘了遵循协议 class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource
// 把两个栏拖成属性 @IBOutlet weak var leftTableView: UITableView!@IBOutlet weak var rightTableView: UITableView!
// 存左栏 总类数据 并设置假总类数据var dataArrayForKind: NSMutableArray? = ["骑士", "勇士", "尼克斯", "快船", "公牛", "CBA"]
// 存右栏 分类细节数据 并设置分类详情假数据var dataArrayForSubKind: NSMutableArray? = [["詹姆斯", "欧文", "乐福", "TT汤普森", "JR", "香浓波特", "福莱","杰弗森"],["库里", " 汤普森", "格林", "杜兰特"],["安东尼", "罗斯"], ["保罗", "格里芬", "小乔丹", "皮尔斯"],["韦德", "巴特勒", "朗多"],["易建联", "郭艾伦", "周琦", "周鹏", "丁彦雨航", "李根", "王哲林"]]// 构造一个枚举(就是为了练练 Swift 枚举 这里可以用 BOOl 记录就行) 记录右侧 分栏 向上滑动 还是 向下滑动enum UpOrDownScroller{case Upcase Down}// 用一个枚举值记录滑动方向的枚举var ScrollState: UpOrDownScroller?// 记录右栏滑动的  y 方向的偏移量  便于对比判断滑动方向var offSetForNext: CGFloat = 0# 下面这个是最后的时候加上的属性 发现问题加上的 具体的我们看详情部分 最后会用动态图展示不设置这个属性的结果// 用来记录 右栏上下滑动原因 这里不用枚举了 用 BOOL, True代表手指滑动右栏,False 代表是点击左栏引起的 var rightScrollReason: Bool!

在viewDidLoad中相关操作

self.view.backgroundColor = UIColor.grayColor()// 设置两个分栏tableView 的代理self.leftTableView.delegate = selfself.leftTableView.dataSource = selfself.rightTableView.delegate = selfself.rightTableView.dataSource = self// 设置两个 TableView 的 tag 值  执行代理方法便于区分self.leftTableView.tag = 1001self.rightTableView.tag = 1002
// 关掉竖直方向的滑条self.leftTableView.showsVerticalScrollIndicator = falseself.rightTableView.showsVerticalScrollIndicator = false
// 注册两个分栏的 cellself.leftTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "Left_Cell")self.rightTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "Right_Cell")

执行代理方法显示内容

// 设置分区数func numberOfSectionsInTableView(tableView: UITableView) -> Int {if tableView.tag == 1002{return dataArrayForSubKind!.count}else{return 1}}``````code
// 设置分区下面的行数func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {if tableView.tag == 1001{return dataArrayForKind!.count}else{return dataArrayForSubKind![section].count}}``````code
// 设置 cellfunc tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {// 设置让左栏的 cell 间隔显示不一样的颜色好区分if tableView.tag == 1001{let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("Left_Cell")!cell.textLabel?.text = dataArrayForKind![indexPath.row] as? Stringif indexPath.row % 2 != 0{cell.backgroundColor = UIColor.cyanColor()}else{cell.backgroundColor = UIColor.greenColor()}return cell}else{let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("Right_Cell")!cell.textLabel?.text = dataArrayForSubKind![indexPath.section][indexPath.row] as? Stringreturn cell}}`````` code
// 调节行高  按照自己的需要设置即可func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {if tableView.tag == 1001{return (self.view.bounds.size.height - 420.0 ) / 3.0}else{return 60}}``````code
// 设置右侧头视图显示 让右侧头视图显示为分区(总类)的名字func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {if tableView.tag == 1002{let headTitle: UILabel = UILabel()headTitle.text = dataArrayForKind![section] as? StringheadTitle.font = UIFont.systemFontOfSize(24)headTitle.textAlignment = NSTextAlignment.Centerreturn headTitle}return nil}``````code
// 设置头视图的高度func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {if tableView.tag == 1001{return 0}else{return 50}}```
---------------
下面开始实现两个分栏的关联:
---------------
- 在点击方法中实现点击其中一个栏 另一滑动到响应的位置```code
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {if tableView.tag == 1001{
// 这里设置的false  是由于点击了左栏  导致右栏滑动 所以不是手指滑动引起的右栏滑动效果 false 表示不是手指滑动的rightScrollReason = false
# 点击左栏的 row 右栏选定对应分区的第一个 row
self.rightTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: 0, inSection: indexPath.row), animated: true, scrollPosition: UITableViewScrollPosition.Top   }else{
# 点击右栏的某个区的 row 左栏选定该区对应的 row
self.leftTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: indexPath.section, inSection: 0), animated: true, scrollPosition: UITableViewScrollPosition.Middle}}

实现右栏手指滑动左栏对应滑动效果:

判断右栏的滑动方向

 func scrollViewDidScroll(scrollView: UIScrollView) {if scrollView.tag == 1002{// 这个判断可以带入打印一下
# 下滑的时候 y 方向偏移为负值 向上时候为正  所以上一个偏移 y 值大于现在这个偏移值, 说明上一个到现在这个位置是下滑导致反之上滑if offSetForNext > scrollView.contentOffset.y{ScrollState = UpOrDownScroller.Down}else{ScrollState = UpOrDownScroller.Up} // 每次比较完后记录当前的偏移量offSetForNext = scrollView.contentOffset.y// 判断滑动原因  如果是手指拖拽的 那么记录原因 trueif scrollView.dragging{rightScrollReason = true}}}

设置右栏向下滑动时候有一个头视图将要出现的时候左侧自动选中要出现的这个头视图分区对应 row

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

判断条件满足是右栏 tableView 并且是向下滑动而且滑动原因是手指拖拽滑动不然的话点击左栏促使右栏滑动那么又反过来导致左栏滑动

if tableView.tag == 1002 && ScrollState == UpOrDownScroller.Down && rightScrollReason

self.leftTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: section, inSection: 0), animated: true, scrollPosition: UITableViewScrollPosition.Middle)
}

}```

右栏上滑的时候有头视图要消失的时候左侧选中将要消失的下一个区号对应 row

  func tableView(tableView: UITableView, didEndDisplayingHeaderView view: UIView, forSection section: Int) {
# 判断条件满足 是右栏 tableView 并且是向上滑动 而且滑动原因是手指拖拽滑动  不然的话点击左栏促使右栏滑动那么又反过来导致左栏滑动 if tableView.tag == 1002 && ScrollState == UpOrDownScroller.Up && rightScrollReason{
self.leftTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: section + 1, inSection: 0), animated: true, scrollPosition: UITableViewScrollPosition.Middle)}        }```----------
![**不考虑右栏的滑动是不是手指拖拽时效果(bug 点击左栏右栏滑动同时左栏也滑动了**)](http://upload-images.jianshu.io/upload_images/1523603-f0fa29a4d9628dc8.gif?imageMogr2/auto-orient/strip)

iOS-小Demo(Swift基础练习)--双TableView关联相关推荐

欲从事服务端工作不懂seata？一篇小demo零基础带你快速掌握分布式事务框架seata的基本使用！
乾坤未定,你我皆是
从零开始的iOS开发：00 | Swift基础语法(上)
目录一.开发环境二.关于Swift (一)Swift简介 (二)Swift特性 (三)结语三.Swift基础语法 (一)编程准备 (二)Hello,world! (三)简单值 1.变量与常量 2 ...
《tensorflow从基础到实战》03 RNN实现mnis图像分类、RNN小demo、RNN时间序列预测
书山有路勤为径,学海无涯苦作舟 1.RNN网络 2.tensorflow构建mnist-RNN网络 2.1导入数据集 import tensorflow as tf import numpy as n ...
iOS开发之swift资料大全
目录(?)[+] 版本:Swift github排名 https://github.com/trending,github搜索:https://github.com/search 主要工作说明: 1 ...
iOS开发系列--Swift语言
概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...
云服务器apache mysql php_服务器配置教程：阿里云服务器安装PHP环境(附PHP+MySQL+Apache后台小Demo)...
前言搭建Apache HTTP Server往往都会安装PHP环境,因为很多人都使用PHP做web.其实相对我而言,我是用PHP做后台.主要是因为我是移动端方向:做iOS和Android.往往需要通 ...
ios c语言头文件,iOS开发 -- C语言基础12（预处理指令）
iOS开发 -- C语言基础12(预处理指令) 宏定义预处理指令简介 1.C语言在对源程序进行编译之前,会先对一些特殊的预处理指令作解释(比如之前使用的#include文件包含指令),产生一个新的源 ...
iOS学习之Swift史上最全第三方大全
目录 "轮子" 工具类存储类网络类图片类界面类框架类 "车子" 示例项目完整应用 "轮子" 工具类项目开发者备注 Swi ...
iOS学习之Swift史上最全第三方轮子大全
@SwiftLanguage 更新至 2016-2-1,最近新收录 Graph, Localize-Swift, Cuckoo, Gecco, AudioKit, vapor, Every.swift ...

iOS-小Demo(Swift基础练习)--双TableView关联

代码解析:

实现右栏手指滑动左栏对应滑动效果:

判断条件满足是右栏 tableView 并且是向下滑动而且滑动原因是手指拖拽滑动不然的话点击左栏促使右栏滑动那么又反过来导致左栏滑动

iOS-小Demo(Swift基础练习)--双TableView关联相关推荐

最新文章

热门文章

iOS-小Demo(Swift基础练习)--双TableView关联

代码解析:

实现右栏手指滑动左栏对应滑动效果:

判断条件满足 是右栏 tableView 并且是向下滑动 而且滑动原因是手指拖拽滑动 不然的话点击左栏促使右栏滑动那么又反过来导致左栏滑动

iOS-小Demo(Swift基础练习)--双TableView关联相关推荐

最新文章

热门文章

判断条件满足是右栏 tableView 并且是向下滑动而且滑动原因是手指拖拽滑动不然的话点击左栏促使右栏滑动那么又反过来导致左栏滑动