如何使 ScrollView 中的 TableView 的滚动行为自然

问题描述

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

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 上滚动时，它会滚动表格视图(而不是滚动视图).但我希望它滚动 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 的滚动行为自然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！