如何使 ScrollView 中的 TableView 滚动表现自然 [英] How to Make the scroll of a TableView inside ScrollView behave naturally

问题描述

我需要做这个配置很奇怪的应用.

I need to do this app that has a weird configuration.

如下图所示，主视图是一个 UIScrollView.那么里面应该有一个UIPageView，PageView的每一页都应该有一个UITableView.

As shown in the next image, the main view is a UIScrollView. Then inside it should have a UIPageView, and each page of the PageView should have a UITableView.

到目前为止我已经完成了所有这些.但我的问题是我希望滚动行为 自然.

I've done all this so far. But my problem is that I want the scrolling to behave naturally.

接下来是我的意思自然.目前，当我在 UITableViews 之一上滚动时，它会滚动 tableview(而不是 scrollview).但我希望它滚动 ScrollView，除非滚动视图无法滚动导致它到达顶部或底部(在这种情况下，我希望它滚动 tableview).

The next is what I mean naturally. Currently when I scroll on one of the UITableViews, it scrolls the tableview (not the scrollview). But I want it to scroll the ScrollView unless the scrollview cannot scroll cause it got to its top or bottom (In that case I'd like it to scroll the tableview).

例如，假设我的滚动视图当前滚动到顶部.然后我将手指放在 tableview(正在显示的当前页面)上并开始向下滚动.在这种情况下，我希望滚动视图滚动(没有表格视图).如果我继续向下滚动我的滚动视图并到达底部，如果我将手指从显示器上移开并将其放回 tebleview 并再次向下滚动，我希望我的 tableview 现在向下滚动，因为滚动视图到达了它的底部而不是能够继续滚动.

For example, let's say my scrollview is currently scrolled to the top. Then I put my finger over the tableview (of the current page being shown) and start scrolling down. I this case, I want the scrollview to scroll (no the tableview). If I keep scrolling down my scrollview and it reaches the bottom, if I remove my finger from the display and put it back over the tebleview and scroll down again, I want my tableview to scroll down now because the scrollview reached its bottom and it's not able to keep scrolling.

你们知道如何实现这种滚动吗?

Do you guys have any idea about how to implement this scrolling?

我真的很迷茫.任何帮助将不胜感激:(

I'm REALLY lost with this. Any help will be greatly appreciate it :(

谢谢！

推荐答案

同时处理滚动视图和表格视图的解决方案围绕着UIScrollViewDelegate.因此，让您的视图控制器符合该协议:

The solution to simultaneously handling the scroll view and the table view revolves around the UIScrollViewDelegate. Therefore, have your view controller conform to that protocol:

class ViewController: UIViewController, UIScrollViewDelegate {

我将滚动视图和表格视图表示为出口:

I’ll represent the scroll view and table view as outlets:

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var tableView: UITableView!

我们还需要跟踪滚动视图内容的高度以及屏幕高度.稍后你会明白为什么.

We’ll also need to track the height of the scroll view content as well as the screen height. You’ll see why later.

let screenHeight = UIScreen.mainScreen().bounds.height
let scrollViewContentHeight = 1200 as CGFloat

viewDidLoad::

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView.contentSize = CGSizeMake(scrollViewContentWidth, scrollViewContentHeight)
    scrollView.delegate = self
    tableView.delegate = self 
    scrollView.bounces = false
    tableView.bounces = false
    tableView.scrollEnabled = false
}

为了让事情变得简单，我关闭了弹跳.关键设置是滚动视图和表格视图的代理以及首先关闭表格视图滚动.

where I’ve turned off bouncing to keep things simple. The key settings are the delegates for the scroll view and the table view and having the table view scrolling being turned off at first.

这些是必需的，以便 scrollViewDidScroll: 委托方法可以处理到达滚动视图的底部和到达表格视图的顶部.这是该方法:

These are necessary so that the scrollViewDidScroll: delegate method can handle reaching the bottom of the scroll view and reaching the top of the table view. Here is that method:

func scrollViewDidScroll(scrollView: UIScrollView) {
    let yOffset = scrollView.contentOffset.y

    if scrollView == self.scrollView {
        if yOffset >= scrollViewContentHeight - screenHeight {
            scrollView.scrollEnabled = false
            tableView.scrollEnabled = true
        }
    }

    if scrollView == self.tableView {
        if yOffset <= 0 {
            self.scrollView.scrollEnabled = true
            self.tableView.scrollEnabled = false
        }
    }
}

委托方法正在做的是检测滚动视图何时到达其底部.当这种情况发生时，表格视图可以滚动.它还检测表格视图何时到达重新启用滚动视图的顶部.

What the delegate method is doing is detecting when the scroll view has reached its bottom. When that has happened the table view can be scrolled. It is also detecting when the table view reaches the top where the scroll view is re-enabled.

我创建了一个 GIF 来演示结果:

I created a GIF to demonstrate the results:

这篇关于如何使 ScrollView 中的 TableView 滚动表现自然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！