UIViewController Containment с анимацией, подобной Google+

Question

Лучший способ понять, что я пытаюсь объяснить, - это открыть приложение Google+ и нажать в любом месте на фоне сообщения, отображаемого в основном потоке сообщений.

Когда вы нажимаете на него, вся почта перемещается в центре экрана с приятной анимацией, и она загружает комментарии сообщения под ним.

Я думаю, что это общий сценарий сдерживания UIViewController, где один UIViewController находится внутри другого. Но как сообщение может перемещать его в конечном итоге и «переносить» себя внутри встроенного контроллера представления?

Я уже пытался создать простую кнопку и отобразить UIViewController как всплывающее окно, но не знаю, как сделать то, что делает приложение Google+ (и другие).

UPDATE

Вот скриншоты.

Как вы можете видеть, когда вы нажмете на пост, пост скользит вверх и стал новый содержащийся UIViewController.

Answer 1

Как уже указывалось, существует множество способов достижения этого пользовательского интерфейса, но один способ - захватить представление из ячейки таблицы, переместить его на какой-то новый фон и сменить его рамку. И когда вы возвращаете обратно, просто измените процесс.

В чуть более подробно, что могло бы быть следующим:

1. В камере, у меня есть вид контейнера, который представляет собой вид прокрутки (чье взаимодействие с пользователем, как правило, отключен).

2. Когда пользователь нажимает на нее,

   • Создать новый вид фона, который является прозрачным, что занимает весь экран;

   • Дайте этому фону признак распознавания жетона, который может изменить процесс в более поздней точке;

   • Переместить вид контейнера ячейки из ячейки в этот новый вид фона (используя convertRect, чтобы он еще не двигался);

   • Анимируйте небольшое сжатие контейнера посредством трансформации (тонкий эффект, который дает эффект «выталкивания» на вид);

   • В блоке завершения этой анимации, инициировать новую анимацию, которая:

     • Восстанавливает преобразование обратно к идентичности;

     • Устанавливает цвет фона фона в основном непрозрачный (но не совсем так) цвет;

     • Animate размер зрения контейнера, чтобы занять большую часть экрана

     • идти вперед и дать возможность взаимодействия с пользователем на этой точке зрения контейнера, так что вы можете прокручивать;

3. Есть обработчик для крана жест на нашем фоне, который переворачивает этот процесс.

Таким образом:

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    [tableView deselectRowAtIndexPath:indexPath animated:NO]; 

    PostCell *cell = (id)[tableView cellForRowAtIndexPath:indexPath]; 

    // create subview to obscure the table view behind us 

    UIView *backdropView = [[UIView alloc] initWithFrame:self.view.bounds]; 
    backdropView.backgroundColor = [UIColor clearColor]; 
    [self.view addSubview:backdropView]; 
    self.backdropView = backdropView; 

    // add a tap gesture so we can reverse the process 

    [backdropView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self 
                       action:@selector(handleTapGesture:)]]; 

    // move the cell's container view to the backdrop view, preserving its location on the screen 
    // (so it doesn't look like it moved) 

    self.viewToMove = cell.containerView; 
    self.viewToMoveOriginalCell = cell; 
    self.viewToMoveOriginalFrame = cell.containerView.frame; 

    // figure out where this goes on the backdrop 

    CGRect frame = [self.viewToMoveOriginalCell convertRect:self.viewToMoveOriginalFrame 
                toView:self.backdropView]; 

    // move it there (though it won't appear to move yet, we're just changing its superview) 

    [self.backdropView addSubview:self.viewToMove]; 
    self.viewToMove.frame = frame; 

    // now do the animation 

    [UIView animateWithDuration:0.25 
          delay:0.0 
         options:0.0 
        animations:^{ 

         // first shrinking it a bit 

         self.viewToMove.transform = CGAffineTransformMakeScale(0.95, 0.95); 
        } 
        completion:^(BOOL finished) { 

         // finally restoring the size and making it bigger 
         // (and reveal the backdrop that obscures the tableview) 

         [UIView animateWithDuration:0.5 animations:^{ 
          CGFloat horizontalMargin = (self.view.bounds.size.width - frame.size.width)/2.0; 
          backdropView.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8]; 
          self.viewToMove.transform = CGAffineTransformIdentity; 
          self.viewToMove.frame = CGRectMake(horizontalMargin, kVerticalMargin, self.view.bounds.size.width - 2.0 * horizontalMargin, self.view.bounds.size.height - 2.0 * kVerticalMargin); 
         }]; 

         self.viewToMove.userInteractionEnabled = YES; 
        }]; 
} 

- (void)handleTapGesture:(UITapGestureRecognizer *)gesture 
{ 
    [UIView animateWithDuration:0.5 
          delay:0.0 
         options:0 
        animations:^{ 

         // in case user scrolled in content view, scroll back 

         [self.viewToMove setContentOffset:CGPointZero animated:YES]; 

         // figure out where to resize view on container view so it's 
         // going to end up where it will end up in the cell 

         CGRect frame = [self.viewToMoveOriginalCell convertRect:self.viewToMoveOriginalFrame 
                      toView:self.backdropView]; 
         self.viewToMove.frame = frame; 

         // make the back drop appear to gracefully disappear 

         self.backdropView.backgroundColor = [UIColor clearColor]; 

         // shrink content view a tad in the process 

         self.viewToMove.transform = CGAffineTransformMakeScale(0.95, 0.95); 
        } 
        completion:^(BOOL finished) { 

         // when done with that animation ... 

         [UIView animateWithDuration:0.25 
               delay:0.0 
              options:0 
              animations:^{ 

               // restore the size of the content view 

               self.viewToMove.transform = CGAffineTransformIdentity; 
              } 
              completion:^(BOOL finished) { 

               // when all done, put the content view back 
               // in the cell 

               [self.viewToMoveOriginalCell addSubview:self.viewToMove]; 
               self.viewToMove.frame = self.viewToMoveOriginalFrame; 

               // turn off its user interaction again 

               self.viewToMove.userInteractionEnabled = NO; 

               // and now safely discard the backdrop 

               [self.backdropView removeFromSuperview]; 
              }]; 
        }]; 
} 

Как вы можете сказать, что это все стандартные виды столов и тому подобное. Если вы хотите использовать ограничение контроллера контроллера (например, если представление имеет значительное взаимодействие с пользователем), вы тоже можете это сделать. Это не влияет на UX с точки зрения возрастания/сжатия контейнера в ячейке.

Кроме того, все это неавтоматизировано. Вы можете сделать это с помощью автоматического макета, но это скорее хлопот, ИМХО, потому что вам, вероятно, придется удалить и добавить ограничения, но, безусловно, можно сделать.