IOS How to set the navigation slide back gesture, and system hungry like

IOS 7 Swipe back to those things

2014/05/17 Wei

. Entry-meta

. entry-header

As the smart machines become more popular and the screen gets bigger and larger, the swipe-back gesture has become a standard feature of an application, and it can even be said that not sliding back is an anti-human interaction experience.

Sliding back now roughly has the following 3 types:

1 implemented with Uiswipegesturerecognizer, the effect is that the user swipes the finger to the right in the screen, and the page returns.

2 implemented with Uipangesturerecognizer, the effect is that the user slides the finger to the right in the screen and then releases the page back.

3 using the sliding return implementation provided by IOS 7, the effect is that the user's finger goes from left to right into the screen, releasing the page back.

The first two implementations are the common practice of IOS 7, which is now outdated and poorly experienced, with a third, the advantages of the following:

• good interaction and animation effects

• system-level support for simplicity and clarity of code

• does not conflict with gestures in some screens

Although the advantages are obvious, but in the use of the process, there will be some issues worthy of our attention, and then we will one by one to solve them.

1. How do I set up a custom back button picture?

If our return button does not need to display text, or if the text displayed is fixed and can be done in the picture, then I recommend to customize the return button by setting the new backindicatorimage introduced in IOS 7. The code is as follows:

Crayon Syntax Highlighter v2.6.4

UIImage *image = [UIImage imagenamed:@ "nav_back_btn"];

[Uinavigationbar appearance].backindicatorimage = image;

[Uinavigationbar appearance].backindicatortransitionmaskimage = image;

1

2

3

UIImage *image = [UIImage imagenamed:@ "nav_back_btn"];

[Uinavigationbar appearance].backindicatorimage = image;

[Uinavigationbar appearance].backindicatortransitionmaskimage = image;

[Format time:0.0036 seconds]

This setting will find that the image is rendered into a navigationbar tintcolor color, how to display the original image color? You also need to use a new attribute Renderingmode for UIImage in IOS 7. We need to generate a picture of Renderingmode as Uiimagerenderingmodealwaysoriginal, let's add this line of code:

Crayon Syntax Highlighter v2.6.4

UIImage *image = [UIImage imagenamed:@ "nav_back_btn"];

image = [Image imagewithrenderingmode:uiimagerenderingmodealwaysoriginal];

[Uinavigationbar appearance].backindicatorimage = image;

[Uinavigationbar appearance].backindicatortransitionmaskimage = image;

1

2

3

4

UIImage *image = [UIImage imagenamed:@ "nav_back_btn"];

image = [Image imagewithrenderingmode:uiimagerenderingmodealwaysoriginal];

[Uinavigationbar appearance].backindicatorimage = image;

[Uinavigationbar appearance].backindicatortransitionmaskimage = image;

[Format time:0.0018 seconds]

So that our pictures can show the original color.

2. Using UIButton to customize the return button, how to use the system slide back?

When we need to display different text on the return button, we can't use backindicatorimage, we want to customize a UIButton to generate Uibarbuttonitem, and then set the Navigationbar Leftbarbuttonitem. If the Leftbarbuttonitem is set, the sliding return of the system will fail. We need to add this line of code to the Uiviewcontroller.

Crayon Syntax Highlighter v2.6.4

Self.navigationController.interactivePopGestureRecognizer.delegate = self;

1

Self.navigationController.interactivePopGestureRecognizer.delegate = self;

[Format time:0.0007 seconds]

Run up a look, uh ... can slide back.

3. How do I make the swipe return as easily triggered as the default effect?

Play for a while you find, as if something is wrong, how is it easier to trigger before?

Yes, when the navigationController.interactivePopGestureRecognizer.delegate is set, although sliding back to restore, but it is a bit "disabled", the specific performance is two points:

1 finger sliding angle must be almost horizontal, and the normal effect can accept the deviation of almost 30 degrees, which in the actual use of the experience difference is very large.

2 If the Uiviewcontroller is a uitableview or other scrollable Uiscrollview, then when the Uiscrollview scrolling, it is not possible to trigger the sliding back, and the normal effect can be triggered.

So, how do we solve these two problems?

We can almost guess because of the clash of gestures, so let's get viewcontroller to accept multiple gestures at the same time. Add code:

Crayon Syntax Highlighter v2.6.4

-(BOOL) Gesturerecognizer: (Uigesturerecognizer *) Gesturerecognizer Shouldrecognizesimultaneouslywithgesturerecognizer: (Uigesturerecognizer *) Othergesturerecognizer

{

return YES;

}

1

2

3

4

-(BOOL) Gesturerecognizer: (Uigesturerecognizer *) Gesturerecognizer Shouldrecognizesimultaneouslywithgesturerecognizer: (Uigesturerecognizer *) Othergesturerecognizer

{

return YES;

}

[Format time:0.0013 seconds]

Run a try, two problems at the same time to solve, but found a new problem, the finger in the sliding, the pop viewcontroller in the Uiscrollview will follow along with the rolling, this effect looks very strange (know the daily is the effect of the current), And it's not the original swipe to return the desired effect, so let's continue with the code to solve it.

Crayon Syntax Highlighter v2.6.4

-(BOOL) Gesturerecognizer: (Uigesturerecognizer *) Gesturerecognizer Shouldberequiredtofailbygesturerecognizer: ( Uigesturerecognizer *) Othergesturerecognizer

{

return [Gesturerecognizer IsKindOfClass:UIScreenEdgePanGestureRecognizer.class];

}

1

2

3

4

-(BOOL) Gesturerecognizer: (Uigesturerecognizer *) Gesturerecognizer Shouldberequiredtofailbygesturerecognizer: ( Uigesturerecognizer *) Othergesturerecognizer

{

return [Gesturerecognizer IsKindOfClass:UIScreenEdgePanGestureRecognizer.class];

}

[Format time:0.0014 seconds]

With this code, the Uiscreenedgepangesturerecognizer of the system does not trigger at the same time as other gestures, which solves this seemingly odd effect.

4. Several other minor issues

Let's continue to play and play, what problems will we encounter?

1 When you do an action in Uinavigationcontroller Rootviewcontroller that will trigger a swipe to return, and then click a button that will Pushviewcontroller, Uinavigationcontroller no response, and if you use the home key to return to the main screen, and then into the application, you will find that has been push into the viewcontroller just should enter, this is because in Uinavigationcontroller Rootviewcontroller triggered a sliding return, we just have to determine whether the current Viewcontroller is Rootviewcontroller, and then in- Gesturerecognizershouldbegin: Return to the right.

2 If we trigger a sliding return during the Pushviewcontroller animation, it will cause a flashback, and the processing is simple, disable interactivepopgesturerecognizer after push, Viewcontroller display and then restore the Interactivepopgesturerecognizer. I used the Swizzling method to deal with the Category uniformly.

3 '

I put a Demo on Github and you are welcome to download it.

Ios7-navigationcontroller-sample

IOS How to set the navigation slide back gesture, and system hungry like