scrollview tableView嵌套解决方案示例

目录
  • 正文
  • 效果预览:
    • 核心代码就是在父视图、子试图的滚动判断

正文

在网上找了很多,没有喜欢的方案。也参考了众多设计,做了一款自认为比较简洁、完美的方案:

大致思路:外层放置scrollview作为容器,容器内上部分topView,下部分tableView。当tableView滚动时,如果topView还在展示区域,就设置topView的y坐标,让topView跟随同步上移。

(注意:如果不设置tableView的headerView,tableView、和topView都会同时上移不是我想要的效果,所以设置tableView的headerView高度包括topView的高度,达到了完美的效果,具体实现看demo)

效果预览:

NestScrollView.gif

核心代码就是在父视图、子试图的滚动判断

//父视图滚动的回调,用于横向滚动判断

//父视图滚动的回调,用于横向滚动判断
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat placeholderOffset = 0;
    if (self.topView.selectedIndex == 0) {
        if (self.firstTableView.contentOffset.y > CGRectGetHeight(self.topView.frame) - kItemheight) {
            placeholderOffset = CGRectGetHeight(self.topView.frame) - kItemheight;
        }else {
            placeholderOffset = self.firstTableView.contentOffset.y;
        }
        [self.secondTableView setContentOffset:CGPointMake(0, placeholderOffset) animated:NO];
    }else {
        if (self.secondTableView.contentOffset.y > CGRectGetHeight(self.topView.frame) - kItemheight) {
            placeholderOffset = CGRectGetHeight(self.topView.frame) - kItemheight;
        }else {
            placeholderOffset = self.secondTableView.contentOffset.y;
        }
        [self.firstTableView setContentOffset:CGPointMake(0, placeholderOffset) animated:NO];
    }
}

//子视图滚动的回调,用于竖直方向上滚动判断

//子视图滚动的回调,用于竖直方向上滚动判断
- (void)updateTopViewFrame:(UIScrollView *)scrollView{
    CGFloat placeHolderHeight = CGRectGetHeight(self.topView.frame) - self.topView.itemHeight;
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat y = 0.0;
    if (offsetY >= 0 && (offsetY <= placeHolderHeight)) {
        y = -offsetY;
    } else if (offsetY > placeHolderHeight) {
        y = -placeHolderHeight;
    } else if (offsetY < 0) {
        y = -offsetY;
    }
    [self.topView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.offset(y + kNavBarHeight);
    }];
}

githut demo下载地址:https://github.com/biyuhuaping/NestScrollView

以上就是scrollview tableView嵌套解决方案示例的详细内容,更多关于scrollview tableView嵌套的资料请关注我们其它相关文章!

时间: 2022-08-31

ios scrollview嵌套tableview同向滑动的示例

我讨论的问题是嵌套同向滑动,能避免尽量避免.最好用一个tableview实现.一个tableview不够用了再嵌套,适用复杂场景. 首先我说下不适用的,免得大家浪费时间. 1.不适用上下拉刷新加载更多的页面. 2.不适用点击cell获取点击事件的页面,可以加入button点击获取事件. 官方文档说尽量不要进行两个竖直或两个水平方向滑动的视图嵌套.因为这个时候机器不知道用户要让哪个滑动,但在我们这个神奇的国度,项目中经常出现这样的需求,产品经理总爱这样做,andriod那边是比较容易实现的,ios

iOS中UIScrollView嵌套UITableView的实践教程

前言 最近因为工作项目中需要用到UIScrollView嵌套UItableView嵌套交互问题,顺便网上搜了下的demo,发现实现的效果并不是很理想,滑动偶尔会有延迟现象,所以自己想了个办法,顺便把自己实现写了个demo分享出来,一起来看看吧. 实现过程 最底部放置的为一个UIScrollView,设置ScrollView的contentSize属性,使可以发生横向滚动,同时隐藏横向滚动条,设置代理为当前控制器本身.然后,在最底部的UIScrollView上放置2个UITableView,因为只

iOS ScrollView嵌套tableView联动滚动的思路与最佳实践

前言 随着业务的发展,页面的复杂度越来越高,嵌套滚动视图的方式也越来越受设计师们的青睐,在各大电商App十分常见.如下Demo图: 但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦.接下里我聊聊我们的实现思路. 思路和过程 对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的scrollView,它的页面上面放一个固定高度的header,紧接着下面一个支持横向滚动切换的容器scrollView,容器上面才是各个页面具体

IOS实现左右两个TableView联动效果

一.先来看看要实现的效果图 二.小解析,可以先看看后面的! 三.实现 tableView联动 主要分两种状况 1.点击 左侧 cell 让右侧 tableView 滚到对应位置 2.滑动 右侧 tableView 让左侧 tableView 滚到对应位置 1.先实现简单的:点击 左侧 cell 让右侧 tableView 滚到对应位置 //MARK: - 点击 cell 的代理方法 - (void)tableView:(UITableView *)tableView didSelectRowAt

iOS开发中TableView类似QQ分组的折叠与展开效果

类似QQ分组的样子,实现tableView的折叠与展开.其实要做这个效果我先想到的是在tableView中再嵌套多个tableView,这个想法实现起来就有点难了. 所以还是换个思路,把tableView的HeaderView用上了.给headerView加上手势,轻松解决折叠展开的问题. 直接上代码吧. @property (nonatomic, strong) UITableView *myTableView; @property (nonatomic, strong) NSMutableA

iOS模拟中奖名单循环滚动效果

本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等于所有cell的总高度,且加载相同的的数据,父视图的clipsToBounds属性一定要设置为true (2)滚动:使用计时器,调整时间及滚动大小,使展示平滑 (3)循环算法:当A列表滚动出界面时,就把它添加在B列表的下面,B列表滚动出界面时,就把它添加在A列表的下面,形成循环效果 3.Swift版

在android中ScrollView嵌套ScrollView解决方案

大家好,众所周知,android里两个相同方向的ScrollView是不能嵌套的,那要是有这样的需求怎么办?(这个需求一般都是不懂android的人提出来的) 难道就真的不能嵌套吗?当然可以,只要你再写一个ScrollView,在里面做点脚,它就支持嵌套了. 目前做的这个只支持两个ScrollView嵌套,两个以上还有待改进,能套两个就已经能满足很多需求了,呵呵,另外现在只做了纵向scrollview的支持,横向的还没来的急做哦. 效果截图:  先上核心代码吧.代码里头我加了注释,方便大家阅读

Android 中ScrollView嵌套GridView,ListView的实例

Android 中ScrollView嵌套GridView,ListView的实例 在Android开发中,经常有一些UI需要进行固定style的动态布局,然而由于现在的UI都喜欢把一个界面拉的很长,所以我们很多情况下需要使用ScrollView来嵌套列表控件来实现UI.这样就导致了很多不顺心的问题. 问题一:列表控件显示不完全 原因是嵌套情况下,ScrollView不能正确的计算列表控件的高度. 有两种解决方案 方案一 在适配器赋值完成后代码动态计算列表的高度.这里贴出ListView的计算代

iOS使用UICollectionView实现横向滚动照片效果

本文实例为大家分享了iOS使用UICollectionView实现横向滚动展示照片的具体代码,供大家参考,具体内容如下 这是Demo链接 效果图 思路 1. 界面搭建 界面的搭建十分简单,采用UICollectionView和自定义cell进行搭建即可. // ViewController.m // 下面使用到的宏和全局变量 #define ScreenW [UIScreen mainScreen].bounds.size.width #define ScreenH [UIScreen main

iOS利用UIScrollView实现无限滚动效果

前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤 1.根据需求准备几张图片,在网上找了5张图片,分别命名为 img

iOS应用开发中UIScrollView滚动视图的基本用法总结

在项目开发时遇到一个问题,我在UIViewController上面直接创建了一个UIScrollerView,把UIScrollerView作为一个子视图添加到了UIViewController, 又再UIScrollerView中添加了一个UISlider的组件,在手势滑动的过程中,很难滑动到UISlider这个控件,经常是滑动的时候UIScrollerView进行了滚动, 而UISlider这个控件没有滑动,让人很抓狂. 上网具体去了解了一下UIScrollerView的详解,终于彻底明白了