在以模态方式呈现视图控制器时，如何将视图控制器从搜索结果推入导航堆栈？

Question

I want to recreate the search UI shown in the iOS 7/8 calendar app. Presenting the search UI modally isn't a problem. I use UISearchController and modally present it just like the UICatalog sample code shows which gives me a nice drop down animation. The issue comes when trying to push a view controller from the results view controller. It isn't wrapped in a navigation controller so I can't push onto it. If I do wrap it in a navigation controller then I don't get the default drop down animation when I present the UISearchController . Any ideas?

EDIT: I got it to push by wrapping my results view controller in a nav controller. However the search bar is still present after pushing the new VC onto the stack.

EDIT (2): DTS from Apple said that the calendar app uses a non-standard method to push from search results. Instead they recommend removing focus from the search controller then pushing and returning focus on pop. This is similar to the way search in the settings app works I imagine.

Answer 1

Apple has gotten very clever there, but it's not a push, even though it looks like one.

They're using a custom transition (similar to what a navigation controller would do) to slide in a view controller which is embedded in a navigation controller.

You can spot the difference by slowly edge-swiping that detail view back and letting the previous view start to appear. Notice how the top navigation slides off to the right along with the details, instead of its bar buttons and title transitioning in-place?

Update:

The problem that you're seeing is that the search controller is presented above your navigation controller. As you discovered, even if you push a view controller onto a navigation controller's stack, the navigation bar is still beneath the search controller's presentation, so the search bar obscures any (pushed view controller's) navigation bar.

If you want to show results on top of the search controller without dismissing it, you'll need to present your own modal navigation view controller.

Unfortunately, there's no transition style which will let you present your navigation controller the same way the built-in push animation behaves.

As I can see, there are three effects that need to be duplicated.

1. The underlying content dims, as the presented view appears.
2. The presented view has a shadow.
3. The underlying content's navigation completely animates off-screen, but its content partially animates.

I've reproduced the general effect within an interactive custom modal transition. It generally mimic's Calendar's animation, but there are some differences (not shown), such as the keyboard (re)appearing too soon.

The modal controller that's presented is a navigation controller. I wired up a back button and edge swipe gesture to (interactively) dismiss it.

Here are the steps that are involved:

1. In your Storyboard, you would change the Segue type from Show Detail to Present Modally .

You can leave Presentation and Transition set to Default, as they'll need to be overridden in code.

2. In Xcode, add a new NavigationControllerDelegate file to your project.

   NavigationControllerDelegate.h:

    @interface NavigationControllerDelegate : NSObject <UINavigationControllerDelegate> 

   NavigationControllerDelegate.m:

    @interface NavigationControllerDelegate () <UIViewControllerTransitioningDelegate> @property (nonatomic, weak) IBOutlet UINavigationController *navigationController; @property (nonatomic, strong) UIPercentDrivenInteractiveTransition* interactionController; @end - (void)awakeFromNib { UIScreenEdgePanGestureRecognizer *panGestureRecognizer = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; panGestureRecognizer.edges = UIRectEdgeLeft; [self.navigationController.view addGestureRecognizer:panGestureRecognizer]; } #pragma mark - Actions - (void)handlePan:(UIScreenEdgePanGestureRecognizer *)gestureRecognizer { UIView *view = self.navigationController.view; if (gestureRecognizer.state == UIGestureRecognizerStateBegan) { if (!self.interactionController) { self.interactionController = [UIPercentDrivenInteractiveTransition new]; [self.navigationController dismissViewControllerAnimated:YES completion:nil]; } } else if (gestureRecognizer.state == UIGestureRecognizerStateChanged) { CGFloat percent = [gestureRecognizer translationInView:view].x / CGRectGetWidth(view.bounds); [self.interactionController updateInteractiveTransition:percent]; } else if (gestureRecognizer.state == UIGestureRecognizerStateEnded) { CGFloat percent = [gestureRecognizer translationInView:view].x / CGRectGetWidth(view.bounds); if (percent > 0.5 || [gestureRecognizer velocityInView:view].x > 50) { [self.interactionController finishInteractiveTransition]; } else { [self.interactionController cancelInteractiveTransition]; } self.interactionController = nil; } } #pragma mark - <UIViewControllerAnimatedTransitioning> - (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)__unused presented presentingController:(UIViewController *)__unused presenting sourceController:(UIViewController *)__unused source { TransitionAnimator *animator = [TransitionAnimator new]; animator.appearing = YES; return animator; } - (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)__unused dismissed { TransitionAnimator *animator = [TransitionAnimator new]; return animator; } - (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id<UIViewControllerAnimatedTransitioning>)__unused animator { return nil; } - (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)__unused animator { #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wgnu-conditional-omitted-operand" return self.interactionController ?: nil; #pragma clang diagnostic pop } 

   The delegate will provide the controller with its animator, interaction controller, and manage the screen edge pan gesture to dismiss the modal presentation.

3. In Storyboard, drag an Object (yellow cube) from the object library to the modal navigation controller. Set its class to our NavigationControllerDelegate , and wire up its delegate and navigationController outlets to the storyboard's modal navigation controller.

4. In prepareForSegue from your search results controller, you'll need to set the modal navigation controller's transitioning delegate and modal presentation style.

    navigationController.transitioningDelegate = (id<UIViewControllerTransitioningDelegate>)navigationController.delegate; navigationController.modalPresentationStyle = UIModalPresentationCustom; 

   The custom animation that the modal presentation performs is handled by transition animator.

5. In Xcode, add a new TransitionAnimator file to your project.

   TransitionAnimator.h:

    @interface TransitionAnimator : NSObject <UIViewControllerAnimatedTransitioning> @property (nonatomic, assign, getter = isAppearing) BOOL appearing; 

   TransitionAnimator.m:

    @implementation TransitionAnimator @synthesize appearing = _appearing; #pragma mark - <UIViewControllerAnimatedTransitioning> - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext { return 0.3; } - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext { // Custom animation code goes here } 

The animation code is too long to provide within an answer, but it's available in a sample project which I've shared on GitHub .

Having said this, the code, as it stands, was more of a fun exercise. Apple has had years to refine and support all their transitions. If you adopt this custom animation, you may find cases (such as the visible keyboard) where the animation doesn't do what Apple's does. You'll have to decide whether you want to invest the time to improve the code to properly handle those cases.

Answer 2

I know this thread is old, but there seems to be a much simpler approach to getting the desired behavior.

The important thing to realize is the UISearchController is presented from the source controller, which is a view controller inside the navigation controller. If you inspect the view hierarchy, you see that the search controller, unlike regular modal presentations, isn't presented as a direct child of the window, but rather as a subview of the navigation controller.

So the general structure is

• UINavigationController
  • MyRootViewController
    • UISearchViewController (presented pseudo-"modally")
      • MyContentController

Essentially you just need to get from the MyContentController up to the MyRootViewController, so you can access its navigationController property. In my tableView:didSelectRowAtIndexPath: method of my search content controller, I simply use the following to access my root view controller.

UINavigationController *navigationController = nil;
if ([self.parentViewController isKindOfClass:[UISearchController class]]) {
    navigationController = self.parentViewController.presentingViewController.navigationController;
}

From there you can easily push something onto the navigation controller, and the animation is exactly what you'd expect.

Answer 3

EDIT : an alternate solution that doesn't rely on a UIWindow . I think the effect is very similar to the calendar app.

@interface SearchResultsController () <UINavigationControllerDelegate>
@end

@implementation SearchResultsController

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // this will be the UINavigationController that provides the push animation.
    // its rootViewController is a placeholder that exists so we can actually push and pop
    UIViewController* rootVC = [UIViewController new]; // this is the placeholder
    rootVC.view.backgroundColor = [UIColor clearColor];
    UINavigationController* nc = [[UINavigationController alloc] initWithRootViewController: rootVC];
    nc.modalPresentationStyle = UIModalPresentationCustom;
    nc.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

    [UIView transitionWithView: self.view.window
                      duration: 0.25
                       options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowAnimatedContent
                    animations: ^{

                        [self.parentViewController presentViewController: nc animated: NO completion: ^{

                            UIViewController* resultDetailViewController = [UIViewController alloc];
                            resultDetailViewController.title = @"Result Detail";
                            resultDetailViewController.view.backgroundColor = [UIColor whiteColor];

                            [nc pushViewController: resultDetailViewController animated: YES];
                        }];
                    }
                    completion:^(BOOL finished) {

                        nc.delegate = self;
                    }];
}

- (void) navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    // pop to root?  then dismiss our window.
    if ( navigationController.viewControllers[0] == viewController )
    {
        [UIView transitionWithView: self.view.window
                          duration: [CATransaction animationDuration]
                           options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowAnimatedContent
                        animations: ^{

                            [self.parentViewController dismissViewControllerAnimated: YES completion: nil];
                        }
                        completion: nil];
    }
}

@end

ORIGINAL solution:

Here's my solution. I start out using the same technique you discovered in the UICatalog example for showing the search controller:

- (IBAction)search:(id)sender
{
    SearchResultsController* searchResultsController = [self.storyboard instantiateViewControllerWithIdentifier: @"SearchResultsViewController"];

    self.searchController = [[UISearchController alloc] initWithSearchResultsController:searchResultsController];
    self.searchController.hidesNavigationBarDuringPresentation = NO;


    [self presentViewController:self.searchController animated:YES completion: nil];
}

In my example, SearchResultsController is a UITableViewController-derived class. When a search result is tapped it creates a new UIWindow with a root UINavigationController and pushes the result-detail view controller to that. It monitors for the UINavigationController popping to root so it can dismiss the special UIWindow.

Now, the UIWindow isn't strictly required. I used it because it helps keep the SearchViewController visible during the push/pop transition. Instead, you could just present the UINavigationController from the UISearchController (and dismiss it from the navigationController:didShowViewController: delegate method). But modally-presented view controllers present on an opaque view by default, hiding what's underneath. You could address this by writing a custom transition that would be applied as the UINavigationController's transitioningDelegate.

    @interface SearchResultsController () <UINavigationControllerDelegate>
@end

@implementation SearchResultsController
{
    UIWindow* _overlayWindow;
}

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // this will be the UINavigationController that provides the push animation.
    // its rootViewController is a placeholder that exists so we can actually push and pop
    UINavigationController* nc = [[UINavigationController alloc] initWithRootViewController: [UIViewController new]];

    // the overlay window
    _overlayWindow = [[UIWindow alloc] initWithFrame: self.view.window.frame];
    _overlayWindow.rootViewController = nc;
    _overlayWindow.windowLevel = self.view.window.windowLevel+1; // appear over us
    _overlayWindow.backgroundColor = [UIColor clearColor];
    [_overlayWindow makeKeyAndVisible];

    // get this into the next run loop cycle:
    dispatch_async(dispatch_get_main_queue(), ^{

        UIViewController* resultDetailViewController = [UIViewController alloc];
        resultDetailViewController.title = @"Result Detail";
        resultDetailViewController.view.backgroundColor = [UIColor whiteColor];
        [nc pushViewController: resultDetailViewController animated: YES];

        // start looking for popping-to-root:
        nc.delegate = self;
    });
}

- (void) navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    // pop to root?  then dismiss our window.
    if ( navigationController.viewControllers[0] == viewController )
    {
        [_overlayWindow resignKeyWindow];
        _overlayWindow = nil;
    }
}

@end

Answer 4

As you present a viewController the navigationController becomes unavailable. So you have to dismiss your modal first and then push another viewController.

Answer 5

UISearchController必须是UINavigationController的rootViewController，然后将导航控制器呈现为模态。