[iOS] Jane book page effect (scroll up and down when the menu hover and can be switched around)

[iOS] Jane book page effect (scroll up and down when the menu hover and can be switched around)
demo

In this paper, we introduce the realization of the special view that the menu hovers on the top and bottom, and the left and right sides can slide. Knowledge involves the event response chain, UIScorllView rolling simulation, and the basic principles of the refresh control.

I. Introduction

With the development of the business, the conventional view of the system has been difficult to meet the needs of the great UI designers can always come up with a special view of the general view of the challenges to the programmer’s brain cells. This can also scroll up and down around the sliding switch first and I do not know which mentioned, but after so long, this view display mode is also more and more use of App, the open source framework there are many processing methods are wonderful, but also has shortcomings and limitations.

Two, part of the framework

2.1 YX_UITableView_IN_UITableView

The common practice of this view is the UIScorllView suite UIScorllView, so that the inner layer of the UITableView (TAB bar inside) and the outer layer of the UITableView response to the user’s gesture sliding event. When the user moves from the top of the page to the TAB bar from the bottom up, the outer layer of the UITableView follows the user gestures, and the inner layer of the UITableView does not follow the gestures. When the user continues to slide up, let the outer layer of the UITableView does not follow the gesture to slide, so that the inner layer of the UITableView follow gestures slide. The same is true from the bottom up.

Disadvantages: when the user from the top of the page from the bottom up to the TAB bar in the process, it will not have a separate Scrollview, such as the general effect of sliding silk.

Most similar frames have the problems, such as the MXSegmentedPager, too, had this effect is also quite good, but UI said you can see Jane books, beauty makeup tips can be said that if there is no products as silk generally not rolling on……

2.2 HHHorizontalPagingView

In order to meet the requirements of UI and product demand, the author finally tossing sleepless nights to dawn, the author’s idea is very clever:

By rewriting the HHHorizontalPagingView - (UIView) hitTest: (CGPoint) point withEvent: (UIEvent * event) method will respond on the role of headerView in self.currentScrollView (the show scrollerView), according to the contentOffset headerView to move the scroll. Click on the call @property (nonatomic, copy) void (^clickEventViewsBlock) (UIView *eventView); eventView is the hitTest method to find the view. Disadvantages: 1 as long as the headerView is a little more complicated, click the event is very difficult to deal with. 2 destroy the headerView incident response chain, if you want to add the headerView map to slide carousel gestures around.

In view of the above two shortcomings, the shortcomings of the 2 is limited to the realization of the method of interception of the system’s gestures are not handled in the headerView, it is impossible to achieve. I think in the disadvantages of the 1 to make a solution.

Click to handle is the author, in order to achieve this effect, override the hitTest method causes the headerView response of fracture of the chain, although the author provides a block callback, but to click on the handle is undoubtedly against humanity. My idea is to connect the responder chain when you click on it. On the responder chain can look at the article.
Huanhoo @property (nonatomic, copy) void (^clickEventViewsBlock)
(UIView *eventView); to handle the click event, while eventView is the hit test view, and I have to do is through the
view to find the hit test to handle the event.

Method: the introduction of UIView+WhenTappedBlocks which is a gesture classification processing, #pragma mark simulated response chain is triggered by the View control to its parent control brothers (void) - extended search response viewWasTappedPoint: (CGPoint) point{[self clickOnThePoint: point];} - (BOOL) clickOnThePoint: (CGPoint) point{(if [self.superview isKindOfClass:[UIWindow class]] {return NO}); if (self.block) {self.block (return); YES;} __block BOOL Click = NO; / / see brother [self.superview.subviews (__kindof enumerateObjectsUsingBlock:^ control UIView * _Nonnull obj, NSUInteger IDX, BOOL * _Nonnull stop) {/ / coordinate system aspect is In the View CGPoint objPoint convertPoint:point fromView:self] = [obj; if (! CGRectContainsPoint (obj.frame, objPoint)) {/ / NSLog (@ -----%@, NSStringFromCGPoint (objPoint)); return (self.block);} if {self.block (); Click = YES; *stop = YES;}}]; if {(click!) return [self.superview clickOnThePoint:point] return click;}}; a normal response, click gestures trigger method to perform block, click on the non normal active call - (void) viewWasTappedPoint: (CGPoint) point; method can pick up the responder chain.

On the above implementation can see JYHHHorizontalPagingView version of 1.1.0 which is the author of
HHHorizontalPagingView an optimization process to click on easy to handle, but also can only pick up the click event. Add on headerView map carousel can not be achieved, even UIButton long press highlight on headerView will fail. But it has a silky sliding, headerView and the lower part of each ScrollView rolling effect is one.

Three, JYHHHorizontalPagingView simulation ScrollView rolling

The framework described above to implement all defects, that in the end can not be perfect, the answer is yes, after all, beauty makeup tips do, Jane books do (UIButton long press highlighted on the headerView in that response has not been broken). My idea is to add drag and drop gestures on the headerView to change the scrollView below contentOffset, simulate the scrollView slowdown and spring effect.

3.1 simulation spring effect
Spring effect is very simple to use UIView animation can be. [UIView animateWithDuration:0.35 animations:^{self.currentScrollView.contentOffset = CGPointMake (contentOffset.x, border); [self layoutIfNeeded];}];
3.2 simulation deceleration sliding effect

Slow down the sliding effect is not good to achieve, I tried a lot of methods are not very good results, and later saw the hungry a developer’s blog, he is through the physical characteristics of UIDynamic to simulate the scrollView scroll. According to his method, the simulation is perfect. The author of the blog address seems to go on with a push cool reproduced by UIKit imitation UIScrollView Dynamics, some concrete shows the authors speak very clearly I will not say, everyone can see, can also see my code.

Four, extended function

So far, the function of this kind of view can be said to be quite perfect, but the demand is always difficult to meet, one day the product said that now the data update mechanism can not only pull refresh, can not pull down refresh. What? So the anti human function you have to add a drop-down refresh……

According to these requirements, the author of this adding a separate pull-down refresh and overall pull-down refresh, because of space, I will say no more, interested students can go to the GithubJYHHHorizontalPagingView specific description.

Five, the end

If my article is helpful to you or give you some inspiration, I hope you can give a small star in the GitHub, if you are in the process of experiencing Bug please leave a message, I will promptly solve. Welcome to reprint (at the beginning of the article can indicate the source).