美文网首页ios开发整理解决方案iOS 知识点
iOS滴滴出行首页/高德地图/上拉底部TableView/地图+

iOS滴滴出行首页/高德地图/上拉底部TableView/地图+

作者: 拧发条鸟xds | 来源:发表于2018-04-11 16:04 被阅读311次

    滴滴出行首页(快车),可以上拉下拉底部菜单(tableView),但又不影响后面地图的交互使用。

    找来找去网上没有Demo,就想着自己做。

    一开始思路错误,想给tableview加手势和惯性滑动,做来做去总是不完美,而且麻烦。放弃了!

    先上GitHub:Demo (1.2已修改上拉不完全问题:tableview的高度没有设置对)

    Demo演示:

    Demo演示

    滴滴图:

    滴滴图

    正确思路:

    (1)tableview其实是全屏,设置其contentInset使其下移,并设置背景色为透明。

    (2)当手指触碰到屏幕时,其实是触碰在tableview上的;这里要判断手指第一下触碰在屏幕上的坐标,是在透明区域(地图)上还是tableview的不透明区域(cell)上。

    (3)当在透明区域时,判断手势操作底层地图;当在tableview的不透明区域上,判断手势操作tableview。

    实现方法:

    不多说了,直接说做法。

    1.创建一个继承UITableView的子类

    2.关键,在UITableView子类重写hitTest:withEvent:方法。

        2.1关于这个方法的理解,看这里:hitTest:withEvent:方法流程。(我也理解得不深)

    -(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event{

        if(point.y<0) {

            return nil;

        }

        return  [super hitTest:point withEvent:event];

    }

        2.2 方法里的手指触碰点的坐标point在我测试过后,发现不是以屏幕左上点为原点的,而是相对于tableview的contentOffset的。这里说不太清楚,可以自己打印着看一下。

        tableview是不断滑动的,所以contentOffset也是不断改变的。

        因此,这里只要判断point的y值是正是负就可以确定手指第一下是触碰在地图上还是tableview上了。

        2.3 point.y<0时,说明手指触碰在地图上,返回nil,让其不会在tableview上触发操作。反之,则正常进行此方法。

    3. 在VC的view中加入地图视图,以及UITableView子类的tableview,并设置tableview的contentInset使其下移。

    注意:使tableview下移的contentInset和用来判断point.y的contentOffset不要搞混了。

    GitHub:Demo (1.2已修改上拉不完全问题:tableview的高度没有设置对)

    参考文档:iOS之事件穿透

                      hitTest:withEvent:方法流程

                      [iOS开发]hitTest的一些使用(点击穿透)

    相关文章

      网友评论

      • lrxxhyf:好想知道用React Native 怎么实现这个功能,最近有这个需求
        拧发条鸟xds:还没接触过这种框架诶,帮不到你:sweat:
      • 第四风111:老铁写得太好了,我太佩服你了!
      • IT人故事会:写得太好了。老铁,动动手指收藏了

      本文标题:iOS滴滴出行首页/高德地图/上拉底部TableView/地图+

      本文链接:https://www.haomeiwen.com/subject/jkzahftx.html