IOS Slide In/Out webview

Question

I am very new to IOS app dev.

I want to achieve slide In/out webview (e.g. from right), which everyone should seen one.

When user click a link, a new webview will slide in from right and load a webpage. If the user swipe right, the webview will move back to right side depends how much the distance.

To name a few apps got this function... Flipboard / Line / Facebook Groups...

Notice that the webview can be dragged by the user horizontally

I've been searching this for some time before i get my hands dirty and start the project. However, I couldn't find anything at all.

Can someone please point me to the right direction / keywords. How to setup such structure in xcode, or if there are existing controls (or default build-ins) which will do the trick...

Thanks

Answer 1

This is not default present/dismiss animation for a show action in segue or presentViewController method and it seems interactive. To implement this, you should customize your own animator class.

if you use presentViewController/dismissViewController without UINavigationController, have a look at UIViewController's transitioningDelegate

And if you use UINavigationController, have a look at UINavigationController's delegate method :

func navigationController(_ navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?
func navigationController(_ navigationController: UINavigationController, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

I am afraid this is not easy part in IOS animation design. If you are new in the field, you can use animator classes already designed on Github.

Answer 2

this effect is easily achieved with swifts built in segue methods. I believe it is now called show and used to be called push, but say you have the 2 views, first one contains the link or what ever and the second one is your web view. You control drag from first view to the other in your story board and create a show(push) segue. There are some snippets of code around if you go looking for this so I don't want to repeat them but the default animation slides the new view in from the right and when you swipe to the right the view is pushed out the way to review the old view.

Hope this is of some use, Dom