Shulou(Shulou.com)06/02 Report--

This article mainly explains the "iOS ScrollView nested tableView linkage rolling train of thought analysis", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in depth, together to study and learn "iOS ScrollView nested tableView linkage rolling train of thought analysis"!

Preface

With the development of business, the complexity of the page is getting higher and higher, and the way of nested scrolling view is more and more favored by designers, which is very common in the major e-commerce App. The Demo figure is as follows:

But this kind of interaction is not officially recommended, and it is not so friendly for developers, it needs to deal with the conflict of scrolling gestures, and the multi-level nesting of pages brings some trouble to the development. Next, I'll talk about our implementation ideas.

Thinking and process

There is no doubt that the bottom of this page structure is a vertical scrolling scrollView, with a fixed height header on the top of the page, followed by the following container scrollView that supports horizontal scrolling, and the specific tableView of each page is on the top of the container, as shown below:

Idea one

The first thought is, since it is a scrolling view, can we do it by scrolling the scrollable property of the view, initially prohibiting the scrolling of the tableView of the top specific business, then according to the event response chain, the scrolling event will be received and processed by the underlying ScrollView, after reaching the maximum offset, disable the underlying ScrollView scrolling and turn on the tableView of the upper layer, so that the upper layer can slide It is feasible to think of it, but unfortunately, the reality is cruel, and the results are as follows:

This will cause when the offset reaches the critical value, the scrolling gesture will be truncated due to the setting of the scrollEnable property and the maximum offset, and it will need to be dragged again to continue scrolling, which is obviously unacceptable.

Idea two

This is the idea provided by colleagues. I have discussed with colleagues when doing this. They had such an interactive page before, using custom gestures, but because UIScrollView is elastic, general sliding gestures can not do this, so it is necessary to introduce UIDynamic to simulate the force field to achieve the damping effect. Thought for a while, although there is a certain feasibility, but in order to a linkage sliding, to do so many things, feel more tedious, and custom gestures to do the simulation of elastic effect may still have a certain gap with the native ScrollView, so choose to give up.

Idea 3

Back to our idea one, in addition to the boundary position will block the linkage rolling, other effects are still possible, so can we solve this problem by means of means? Now that I can write it here, there is no doubt that it can be done. Through gesture penetration, that is, a sliding gesture can act on both the bottom ScrollView and the upper business tableView, and control their scrolling at the same time. By letting the underlying scrollView implement a gesture recognition protocol while responding to scrolling events:

Func gestureRecognizer (_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer)-> Bool {return true}

According to the official documentation:

Asks the delegate if two gesture recognizers should be allowed to recognize gestures simultaneously.

The expression means to ask whether the delegate allows two gesture recognizers to recognize gestures at the same time, then we implement this protocol, "penetrate" gestures, and implement the func scrollViewDidScroll (_ scrollView: UIScrollView) proxy method for scrolling views in the bottom container and the upper business, respectively, and control their scrollable state and offset respectively. Part of the implementation is as follows:

Underlying container ScrollView:

Func scrollViewDidScroll (_ scrollView: UIScrollView) {headerView.isHidden = scrollView.contentOffset.y > = maxOffset? True: false if! superCanScroll {scrollView.contentOffset.y = maxOffset currentVC.childCanScroll = true} else {if scrollView.contentOffset.y > = maxOffset {scrollView.contentOffset.y = maxOffset superCanScroll = false currentVC.childCanScroll = true}

Upper layer business tableView:

Func scrollViewDidScroll (_ scrollView: UIScrollView) {if! childCanScroll {scrollView.contentOffset.y = 0} else {if scrollView.contentOffset.y

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.