iOS 可以纵向横向滑动的表格实现

背景

 668737-46abe7c1cb371cd1
screenCut.gif

这个效果是今天公司项目里面遇上的,也是第一次遇见这种需求,所以记录下来,效果如上图。需求主要是可以实现上下的滑动,并且同时最左侧的“线路名称”这一列在向左滑动的时候是不能跟随滚动的。这个功能主要是实现用户可以方便查看关于一下难以看全的列表数据。下面说一下思路。

代码大体思路

由上面的GIF图和基本需求描述我们第一个想到的东西就是万能的tableview,没错,这个功能的完成当然离不开tableview,那么tableview应该怎样发挥它的功力呢,左右侧的信息需要对称,所以在这里我使用了两个tableview,也就是最左侧线路名称这一列是一个tableview,右侧的粉红色字体这些行是一个tableview。上下滑动两者关联是使用scrollview完成的。那接下来就结合代码简单说一下,也方便我以后回头看,哈哈哈。

代码解析

  • 这是需要的原材料,每个变量都有注释它的功能了,一眼懂。titleTableView是最左侧的线路名称这一列。infoTableView是粉红色字体这些。contentViewtitleTableView和最上方(除了“线路名称”)这一列内容的superView

  • 这是所需要的数据配置,我把里面所有需要的数据都放在数组李典里面了。我比较懒。哈哈哈哈

  • 分步来看,首先是头部的,这个titleLabel是最左上角的“线路名称”这四个字,contentView的配置,上面说了这个contentView的作用的,从它的frame看出来,_contentView = [[UIScrollView alloc] initWithFrame:CGRectMake(_kOriginX, 0, _kScreenWidth - _kOriginX, _kScreenHeight)];它的x_kOriginX也就是预留的最左侧的空间。最上面的一列使用for循环创建出来的label

  • 那接下来就是配置最左侧那一栏和左侧粉红色字体那些行。也就这两个tableview创建的。

  • 这是tableview的代理方法实现。在cellForRowAtIndexPath这个代理方法中,将两个tableviewcell分开来写。

  • 这个方法就是实现上下滑动时候,左侧和右侧tableview联动的实现方法。

总结

啊,写完感觉也是比较简单,就是基本方法的配合使用,当时想的时候也是没有能一下想出来,还是自己基本功不好的原因吧。把这个效果的实现记录在这里,也是为了提醒自己,也就是这个功能比较简单,但是再怎样的功能都是靠最基本的东西堆砌的。思想很重要,但是最重要的还是去实现,光想没有用,人不是靠嘴活的。与君共勉。
额,这个是我打着盹写完的,如果您看到这里了,真的是特别感谢,有点儿困了,北京,晚安。

代码地址:https://github.com/irembeu/HorizontalSwipListView.git

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

2 4 收藏 评论

关于作者:劉光軍_Shine

行到水穷处,坐看云起时 个人主页 · 我的文章 · 3 ·     

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部