下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >移动开发 >iOS 可以纵向横向滑动的表格实现

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

Abby发布于 2017-11-06 09:33查看:1480回复:1

背景

1509931304196941.gif


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

        代码大体思路

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

        代码解析

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

image.png

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

image.png

        总结

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

      

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

共有1条评论

  • MK
  • 药师
  • 慧星的那一夜
  • Mr ken
  • YUI
  • cappuccino
  • mr jack
  • IT宅男
  • 课课家技术团队1
  • 选择版块:

  • 标题:

  • 内容

  • 验证码:

  • 标题:

  • 内容

  • 选择版块:

移动帖子x

移动到: