效果图
Paste_Image.png
Storyboard
Paste_Image.png
代码
import UIKit
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 offSetFornex: CGFloat = 0
// 下面这个是最后的时候加上的属性 发现问题加上的 具体的我们看详情部分 最后会用动态图展示不设置这个属性的结果
// 用来记录 右栏上下滑动原因 这里不用枚举了 用 BOOL, True代表手指滑动右栏,False 代表是点击左栏引起的
var rightScrollReason: Bool!
override func viewDidLoad() {
super.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")
self.rightTableView.separatorInset = UIEdgeInsetsMake(0, self.rightTableView.bounds.width / 2, 0, 0) // 上 左 下 右
self.rightTableView.backgroundView = UIImageView(image: UIImage(named: "guide_40_3"))
}
// 设置分区数 1
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
if tableView.tag == 1002
{
return dataArrayForSubKind!.count
}else
{
return 1
}
}
// 设置分区下面的行数 3
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if tableView.tag == 1001
{
return dataArrayForKind!.count
}else
{
return dataArrayForSubKind![section].count
}
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
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.orangeColor()
} 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
}
}
// 5
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
}
}
// 设置右侧头视图显示 让右侧头视图显示为分区(总类)的名字
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if tableView.tag == 1002 {
let headTitle: UILabel = UILabel()
headTitle.backgroundColor = UIColor.redColor()
headTitle.text = self.dataArrayForKind![section] as? String
headTitle.font = UIFont.systemFontOfSize(24)
headTitle.textAlignment = NSTextAlignment.Center
return headTitle
}
return nil
}
// 设置头视图的高度 2
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
if tableView.tag == 1001
{
return 0
}else
{
return 50
}
}
// 在点击方法中实现点击其中一个栏 另一滑动到响应的位置
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: .Top)
// 点击右栏的某个区的 row 左栏选定该区对应的 row
self.leftTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: indexPath.section, inSection: 0), animated: true, scrollPosition: .Middle)
}
}
// 判断右栏的滑动方向 实现右栏手指滑动左栏对应滑动效果
func scrollViewDidScroll(scrollView: UIScrollView) {
if scrollView.tag == 1002 {
// 下滑的时候 y 方向偏移为负值 向上时候为正 所以上一个偏移 y 值大于现在这个偏移值, 说明上一个到现在这个位置是下滑导致反之上滑
if offSetFornex > scrollView.contentOffset.y {
ScrollState = UpOrDownScroller.Down
} else {
ScrollState = UpOrDownScroller.Up
}
// // 每次比较完后记录当前的偏移量
offSetFornex = 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: .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)
}
}
}
