IOS a silky full-screen swipe back gesture

Last Update:2016-05-12 Source: Internet

Author: User

Tags uikit

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Original Link: http://blog.sunnyxx.com/2015/06/07/fullscreen-pop-gesture/Full-screen return gestureSince iOS7, Apple has added support for the right side of the screen to return to interaction, and with Uinavigationcontroller Interactive animations, the operation of Pop to the previous page has been very smooth and silky, and since then, I rarely return using the Back button on the top left navigation bar because it is very unfriendly to one-handed operation, and if an App dares not support sliding back, it is not far away from being Unloaded.Speaking of Full-screen return gesture , first I feel that this thing itself may have a problem, after all, a little anti-apple official interaction, so that users can swipe from anywhere to return this interaction in the domestic App is very common, such as my Phone's hand q, weibo, netease news, public comments, etc. Of course, there are Baidu know--. The product managers here have to praise, from the entire app, whether it is interactive or UI structure and style are very iOS, there is no special wonderful page and interaction, so that the use of UIKit native framework can be very simple to build up, which is also in line with my personal vision of the app: A good app should be simple and elegant , both from the User's point of view and from the code point of view, and call on the product managers to learn more about the app design like This. (you can share how to use Storyboard to quickly build up the UI within an hour)FdfullscreenpopgestureAfter all, work is work, so it was forced to achieve a pan gesture processing plus and parallax, although in the motion curve, bar processing up and down a lot of effort, but the distance between the System's silky effect is still far away. Over time, after finally being able to support iOS7, we put this issue again to discuss and study, until the Micro-blog to see the j_ rain classmate of this article only to find the most simple solution so far. As a result, under his authority, we put this return gesture on the Forkingdog open source, GitHub address, and decisively applied to the Baidu know the app, this is the Demo effect:After using the System's own edge to return gesture processing functions, all animations and curves are the same as the original Effect. The release of the <code style="font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; margin:0px 2px; padding:3px 5px; color:rgb(233,105,0); white-space:inherit; background-color:rgb(248,248,248)">FDFullscreenPopGesture</code> 1.0 release, and the provision of an AOP form of the API, add it to the project, no code to write, all Uinavigationcontroller to bring this full-screen return Effect.Smooth handling of navigation bar display and hideNext we find that using the System's uinavigationbar, the return gesture if the previous page has bar, the next page does not bar, or conversely, the animation is very ugly, give two counter-examples:Hand Q IOS:The bar on its personal center page was hidden and then made a fake bar that looked like the rest of the page, but the return gesture started out, and in order to make up, it did the alpha value animation of the next real bar, with two back buttons still overlapping.Sina Weibo iOS:The same way as the hand q, but not the alpha animation, so it is very obvious.Why is that? This may be a flaw in the design of the Uinavigationcontroller control API on the navigation bar. A Uinavigationcontroller manages the serial N-uiviewcontroller stack of Push and pop, and Uinavigationbar is managed by uinavigationcontroller, which leads to the U Iviewcontroller is unable to control its own hidden or displayed bar Above. This is very much like the uiapplication global status bar, with a full body, but Apple has the following methods for controlling its status bar for VC after iOS7: <table style="border-collapse:collapse; border-spacing:0px; width:730px; padding:0px; margin:0px"> <tbody> <tr style="width:730px; border-collapse:collapse; padding:0px; margin:0px"> <td class="code" style="padding:0px; width:730px; border-collapse:collapse; margin:0px"><pre style="overflow:auto; font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; background-color:rgb(248,248,248); color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px">-(uistatusbarstyle) preferredstatusbarstyle ns_available_ios(7_0);-(BOOL) Prefersstatusbarhidden ns_available_ios(7_0);-(uistatusbaranimation) preferredstatusbarupdateanimation ns_available_ios(7_0);</pre></td> </tr> </tbody> </table>Finally let the global variable become a local variable , although it is hard to Write. But the control of Uinavigationbar is still global, and maybe Apple doesn't think the App should have this weird page structure?The solution to this problem is not difficult, and the following code is written in the view controller that appears after sliding back: <table style="border-collapse:collapse; border-spacing:0px; width:730px; padding:0px; margin:0px"> <tbody> <tr style="width:730px; border-collapse:collapse; padding:0px; margin:0px"> <td class="code" style=" padding:0px; width:730px; border-collapse:collapse; margin:0px "><pre style=" overflow:auto; font-family:menlo, ' Roboto Mono ', monaco,courier,monospace; font-size:14px; Background-color:rgb (248,248,248); Color:rgb (82,82,82); Padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px ">-(void ) Viewwillappear: (bool ) animated { [super viewwillappear:animated]; [self . Navigationcontroller Setnavigationbarhidden:yes animated:animated]; </pre> </td> </tr> </tbody> </table>The system will link transition animations with bar and no bar. But as mentioned above, this is a global variable, but also in all the special page without bar can push and pop pages are processed in reverse, the code is very disorderly. As a result, we try to solve this problem, first look at the Effect:I specifically picked a real bar to fake bar, and then from the false bar to the real bar page, but also pretty silky, transition animation is the system itself. Ratione materiae <code style="font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; margin:0px 2px; padding:3px 5px; color:rgb(233,105,0); white-space:inherit; background-color:rgb(248,248,248)">FDFullscreenPopGesture</code> Update to version 1.1 and implement our streamlined API, you just have to write a sentence in the bar to hide the view controller: <table style="border-collapse:collapse; border-spacing:0px; width:730px; padding:0px; margin:0px"> <tbody> <tr style="width:730px; border-collapse:collapse; padding:0px; margin:0px "> <td class=" code " style=" padding:0px; width:730px; border-collapse:collapse; margin:0px "><pre style="overflow:auto; font-family:menlo, ' Roboto Mono ', monaco,courier,monospace; font-size:14px; Background-color:rgb (248,248,248); Color:rgb (82,82,82); Padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px ">-(void ) Viewdidload [super viewdidload]; self . navigationcontroller.fd_ Prefersnavigationbarhidden = yes ; </pre> </td> </tr> </tbody> </table> <table style="border-collapse:collapse; border-spacing:0px; width:730px; padding:0px; margin:0px"> <tbody> <tr style="width:730px; border-collapse:collapse; padding:0px; margin:0px "> <td class=" code " style=" padding:0px; width:730px; border-collapse:collapse; margin:0px "><pre style="overflow:auto; font-family:menlo, ' Roboto Mono ', monaco,courier,monospace; font-size:14px; Background-color:rgb (248,248,248); Color:rgb (82,82,82); Padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px ">-(BOOL ) fd_ Prefersnavigationbarhidden { return yes ; </pre> </td> </tr> </tbody> </table>Deliberately imitated under the system of the naming style, on this one sentence, the rest will not have to worry About.About Private APIsPeople will question that this uses the UIKit private property and the private API, if the system upgrade has changed? What if the audit is rejected? First of all, the IOS system SDK for backward compatibility, generally only add methods or modify the method implementation, it is unlikely to directly delete a common method, and the behavior of the private method may indeed change, but the system release frequency is very low, when the new version is released when the original function can work Just fine, big can not worry so far, the SDK is dead person is Alive. The other is the audit problem, in the implementation of Fdfullscreenpopgesture there are two main touches of the private API: <table style="border-collapse:collapse; border-spacing:0px; width:730px; padding:0px; margin:0px"> <tbody> <tr style="width:730px; border-collapse:collapse; padding:0px; margin:0px"> <td class="code" style="padding:0px; width:730px; border-collapse:collapse; margin:0px"><pre style="overflow: Auto font-family:menlo, ' Roboto Mono ', monaco,courier,monospace; font-size:14px; Background-color:rgb (248,248,248); Color:rgb (82,82,82); Padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px ">//1. Private variable flag Transition whether the animation is in progress [ Self . navigationcontroller valueforkey:@ "_ Istransitioning "]; //2. An internal selector nsselectorfromstring (@" handlenavigationtransition: "); </pre> </td> </tr> </tbody> </table>Whether it is KVC or selector reflection, is the use of OBJC runtime to complete, and to this layer, really there is no public private to speak Of. Imagine that you are the engineer who developed the Apple Private API Checker tool and gave you an IPA package, how would you check out if there are any private apis?First of all, this check must be a static check, it can not be run-time check, because the code logic is so complex, the program to run to see all the Objc_msgsend package does not include the private call this thing is too unrealistic. To do a static check of the IPA file is definitely to analyze the Mach-o executable file, because at this time a lot of source code level of information has been lost, after analysis can take the following methods: <ul style="margin:1rem 0px; color:rgb(52,73,94); font-family:‘Source Sans Pro‘,‘Helvetica Neue‘,Arial,sans-serif; font-size:16px"> <ul style="margin:1rem 0px; Color:rgb (52,73,94); Font-family: ' Source Sans Pro ', ' Helvetica Neue ', arial,sans-serif; FONT-SIZE:16PX "> <li> whether to link the private framework or private symbols in the public framework, which prevents the developer from putting the private header out for the program to call Directly. </li> <li> ibid., using <code style="font-family:menlo, ' Roboto Mono ', monaco,courier,monospace; font-size:14px; margin : 0px 2px; PADDING:3PX 5px; Color:rgb (233,105,0); white-space:inherit; Background-color:rgb (248,248,248) "> @selector (_private_sel) </code> plus <code style=" font-family:menlo, ' Roboto Mono ', monaco,courier,monospace; font-size:14px; margin:0px 2px; PADDING:3PX 5px; Color:rgb (233,105,0); white-space:inherit; Background-color:rgb (248,248,248) ">-performselector: </code> means calling the private API directly. </li> <li> scans all symbols to see if there are inherited selfish classes, overloaded private methods, and method names that overlap. </li> <li> Scans all string to see if the string constant segment appears and corresponds to the private API. </li> </ul> </ul>I think the top three are the most likely to be caught and most likely to be checked Out. again, we use the method of string KVC and reflection selector, should belong to the last, this time it is difficult to choose, take it <code style="font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; margin:0px 2px; padding:3px 5px; color:rgb(233,105,0); white-space:inherit; background-color:rgb(248,248,248)">handleNavigationTransition:</code> , it seems harmless ah, my own class inside the method can also name this, so simply by the string hit the private API decision, Apple can easily fire a big bunch of developers. In summary, I think the use of the method of using a string of private API is relatively safe, our APP will be submitted for review, if a few days you can still read this text, that my guess is wood wrong, we can rest assured that Use.0 Demo of codeAnother interesting thing is that our demo project on GitHub has written a line of code that achieves the following effect:The project looks like this, and the view controller class is not written, in order to embody <code style="font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; margin:0px 2px; padding:3px 5px; color:rgb(233,105,0); white-space:inherit; background-color:rgb(248,248,248)">FDFullscreenPopGesture</code> the AOP nature:The page is built by Storyboard:The properties of the control page Hide bar can also be invoked with Runtime Attributes:This completes a very clean Demo.Add to your projectFirst request minimum Support iOS7, I think at the end of WWDC 2015, after iOS9 release, the mainstream App will iOS7 Jump. is still familiar with the Cocoapods installation: <table style="border-collapse:collapse; border-spacing:0px; width:730px; padding:0px; margin:0px"> <tbody> <tr style="width:730px; border-collapse:collapse; padding:0px; margin:0px"> <td class="code" style="padding:0px; width:730px; border-collapse:collapse; margin:0px"><pre style="overflow:auto; font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; background-color:rgb(248,248,248); color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px">Pod ' fdfullscreenpopgesture ', ' ~> 1.1 '</pre></td> </tr> </tbody> </table>If you don't find it <code style="font-family:Menlo,‘Roboto Mono‘,Monaco,courier,monospace; font-size:14px; margin:0px 2px; padding:3px 5px; color:rgb(233,105,0); white-space:inherit; background-color:rgb(248,248,248)">pod setup</code> .Advertising timeMy side is recruiting iOS, coordinates beijing, hope to find a code specification, love with IB, lazy to write duplicate code, do not love overtime classmate, I believe there is a lot of space for you to learn and upgrade, you can also participate in the Forkingdog Open source group to do something dick, welcome to private chat or resume to the [ Email protected] IOS a silky full-screen swipe back gesture

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More