无情最是台城柳,依旧烟笼十里提!<滑头小子||奸诈蜥>
无情最是台城柳,依旧烟笼十里提!<滑头小子||奸诈蜥>
效果图:
分栏联动效果
- 思路:
① 这里我用的是两个 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 Up
case 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 = self
self.leftTableView.dataSource = self
self.rightTableView.delegate = self
self.rightTableView.dataSource = self
// 设置两个 TableView 的 tag 值 执行代理方法便于区分
self.leftTableView.tag = 1001
self.rightTableView.tag = 1002
// 关掉竖直方向的滑条
self.leftTableView.showsVerticalScrollIndicator = false
self.rightTableView.showsVerticalScrollIndicator = false
// 注册两个分栏的 cell
self.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
// 设置 cell
func 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? String
if 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? String
return 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? String
headTitle.font = UIFont.systemFontOfSize(24)
headTitle.textAlignment = NSTextAlignment.Center
return 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
// 判断滑动原因 如果是手指拖拽的 那么记录原因 true
if 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)
}
}```
----------
