Google+와 같은 UIViewController 둘러보기

Question

내가 설명하려고하는 것을 이해하는 가장 좋은 방법은 Google+ 앱을 열고 게시물의 기본 스트림에 표시된 게시물의 배경을 아무 데서 탭하는 것입니다.

클릭하면 전체 게시물이 멋진 애니메이션으로 화면 가운데에서 움직이며 그 아래에 게시물의 댓글이로드됩니다.

나는 이것이 UIViewController 봉쇄 시나리오라고 생각한다. 그러나 포스트가 그것을 어떻게 움직일 수 있고 포함 된 뷰 컨트롤러 내부에서 그 자체를 "전송"할 수 있습니까?

나는 이미 간단한 버튼을 만들고 UIViewController을 다른 팝업으로 표시하려고했지만 대신 Google+ 앱 (및 다른 앱)이하는 일을 수행하는 방법을 알지 못합니다.

UPDATE는 여기에 스크린 샷입니다. 이 게시물을 활용할 때

을 볼 수 있듯이, 포스트 슬라이드까지 새로운 포함 UIViewController되었다.

Answer 1

지적했듯이이 UI를 구현하는 데는 많은 방법이 있지만 한 가지 방법은 tableview 셀에서 뷰를 가져 와서 새로운 배경으로 이동하고 프레임을 변경하는 것입니다. 그리고 그것을 되돌릴 때, 그 과정을 역으로하십시오. 다음과 같이 될 수있는 좀 더 자세하게

: 셀

1. 는, I는 (사용자 상호 작용을 일반적으로 사용할 수 없음) 스크롤 도면 용기도있다.

2. 사용자가 도청,

   • 전체 화면을 차지 투명 새로운 배경보기를 만들기;

   • 나중에 프로세스를 되돌릴 수있는 탭 제스처 인식기를 그 배경 화면에 제공하십시오.

   • 셀의 컨테이너보기를 셀에서이 새 배경보기로 이동합니다 (convertRect을 사용하므로 아직 이동하지 않습니다).

   • 변형을 통해 용기의 약간의 수축을 애니메이션합니다 (보기에 "아래로 밀린 효과"를 제공하는 미묘한 효과). 애니메이션이 완성 된 블록

   • 은 새로운 애니메이션 시작 :

     • 아이덴티티로 다시 변환을 복원하는 단계;

     • 배경 화면의 배경색을 크게 불투명 한 (그러나 완전히 그렇지는 않음) 색으로 설정합니다.

     • 애니메이션 컨테이너 뷰의 크기는

     • 이 가서 당신이 주변에 스크롤 할 수 있도록 해당 컨테이너보기에 사용자 상호 작용을 가능하게 화면의 이상을 차지합니다;

프로세스 것을 반대로 우리의 배경 화면에 탭 제스처에 대한 핸들러 되세요. 따라서

:

- (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에 영향을주지 않습니다.

또한이 모두가 자동 레이아웃입니다. 자동 레이아웃을 사용하면이 작업을 수행 할 수 있지만 제약 조건을 제거하고 추가해야하기 때문에 혼란 스럽습니다.하지만 확실하게 수행 할 수 있습니다.