iOS Development Combat--collectionview Click event and keyboard hide combined case (ii)

In my previous blog, "iOS Development combat--collectionview Click event and keyboard hide combined case" in detail, CollectionView and keyboard combination operation in the various situations, and solve the interactive experience of some problems. It is also true that this approach can be used in real-world projects. But the problem comes, the original interface we use UIView to operate, that is, the interface is non-scrollable. However, the more common scenario is a scrollview, and the interface can be scrolled up and down. So, this blog is mainly to optimize the previous case. There is also a problem, in the automatic layout masonry combined with ScrollView, will encounter some pits and tricks, but also our main problem solved. The project code is uploaded to Https://github.com/chenyufeng1991/ShowHiddenKeyboard.

The results to be achieved today are as follows:

。

Since most functions are similar to the previous, I focus on the combination of ScrollView and masonry.

(1) The idea of UI layout is: The outermost is a scrollview, and then put a uiview named Contentview, as a container to put other elements. The height of the contentview varies with the total height of the inner element, which is the total height that the ScrollView needs to scroll.

The most external scrollView self.scrollview = [[Uiscrollview alloc] init];    Self.scrollView.backgroundColor = [Uicolor Orangecolor];    self.scrollView.scrollEnabled = YES;    self.scrollView.userInteractionEnabled = YES;    Self.scrollView.bounces = NO;    Self.scrollView.delegate = self;    Self.automaticallyadjustsscrollviewinsets = NO;    [Self.view AddSubview:self.scrollView]; [Self.scrollview mas_makeconstraints:^ (Masconstraintmaker *make)        {Make.top.equalTo (Weakself.view). Offset (64);        Make.left.equalTo (Weakself.view);        Make.right.equalTo (Weakself.view);    Make.bottom.equalTo (Weakself.view);    }]; Container containing all child view Self.contentview = [[UIView alloc] Initwithframe:cgrectmake (0, [[UIScreen Mainscreen] bounds].size.    width, 200)];    Self.contentView.backgroundColor = [Uicolor Redcolor];    [Self.scrollview AddSubview:self.contentView]; [Self.contentview mas_makeconstraints:^ (Masconstraintmaker *make) {Make.edges.equalTo (Weakself.scrollview);       Make.width.equalTo (Weakself.scrollview); }];

This setting scrollview full screen. And the inside of the Contentview is covered with the entire scrollview, and must be explicitly set width equal to the width of ScrollView, that is, the horizontal can not slide.

It is recommended to add self.automaticallyadjustsscrollviewinsets = NO when setting ScrollView. This parameter compares the pit father, the default is yes, also is the default when you use the ScrollView when you add the inner margin, and this is often we do not need. If the default is yes, we find that the UI cannot be adjusted to the effect we want, often in the top part. PS: In fact here you can also consider the reason for the navigation bar, to see if your personal needs are scrollview to reach the top of the screen or only to reach the bottom of the navigation bar. 】

(2) because I want to let the interface has the effect of sliding, so to let the scrollview inside the contentsize greater than height, so I laid a long picture below to simulate.

Self.bottomimageview = [[Uiimageview alloc] init];    Self.bottomImageView.image = [UIImage imagenamed:@ "Bottom"];    [Self.contentview AddSubview:self.bottomImageView];    [Self.bottomimageview mas_makeconstraints:^ (Masconstraintmaker *make) {        make.top.equalTo (weakSelf.collectionView.mas_bottom). offset (+);        Make.left.equalTo (Weakself.contentview);        Make.right.equalTo (Weakself.contentview);        Make.height.equalTo (@500);    }];

(3) In fact, when the automatic layout is written here, all the settings have been completed. But when you run the code, you find that it's not. ScrollView can't scroll at all. The original thought is: Contentview because add a lot of elements, so the height of contentview should be these elements of the actual layout of the sum. Masonry should have this automatic calculation, but that's not the case. Debugging the above code will find that the height of Contentview is actually 0. Looking at the constraint settings code, we did not explicitly set the height. Unfortunately, masonry does not automatically complete this function. So you need to implement the following code after the child element constraint is complete:

    Here to reset the height of the container, in fact, as long as the bottom can be fixed.    [Self.contentview mas_updateconstraints:^ (Masconstraintmaker *make) {        Make.bottom.equalTo ( Self.bottomimageview);    }];

Updates the constraints of the Contentview container. That is, adding a bottom constraint to the bottom of the long picture, which is equivalent to setting the height. This way the ScrollView will be able to scroll normally.

(4) for CollectionView the same as the previous case, here is no longer to repeat. Because ScrollView is added, the original touchesended method is not called because the gesture operation first triggers the action in ScrollView. So we're going to implement the method in Scrollviewdelegate to implement keyboard hiding.

-(void) scrollviewwillbegindragging: (Uiscrollview *) scrollview{    [self hidekeyboard];}

Hide the keyboard when ScrollView starts scrolling. Because the background white space at this time is Contentview, add a tap gesture:

    UITapGestureRecognizer *tapview = [[UITapGestureRecognizer alloc] initwithtarget:self                                                                          action: @selector ( Hidekeyboard)];    [Self.contentview Addgesturerecognizer:tapview];

After the implementation of the above, you can achieve ScrollView, CollectionView and keyboard event processing, that is, the dynamic effect in the GIF above. In fact, the key to achieve is the above ScrollView and masonry combination.

iOS Development Combat--collectionview Click event and keyboard hide combined case (ii)