BOID
[iOS] 화면 전환하기 (2/4) - HooniOS 본문
안녕하세요 HooniOS입니다 :)
저번 시간에 앱에서 화면 전환의 중요성, 화면 전환의 종류, 화면 전환 시 주의할 점에 대해 알아봤는데요!
혹시 안보고 오셨다면 여기를 클릭해 주셔서 읽고 오시는 걸 추천해 드립니다.
이번 포스팅에는 화면 전환 기법 2가지를 알아보겠습니다.
첫 번째는 뷰를 이용한 화면 전환, 두 번째는 뷰 컨트롤러 직접 호출에 의한 화면 전환에 대해 알아보겠습니다.
화면 전환 기법 첫번째: 뷰를 이용한 화면 전환
- 하나의 뷰 컨트롤러 안에 두 개의 루트 뷰를 준비한 다음 상황에 따라 뷰를 적절하게 교체해주는 방법이다.
- 커스텀 세그웨이를 이용해서 뷰만 전환할 수 있다.
- 위그림에 서 UIImageView끼리 전환할 수 있는 게 뷰를 이용한 화면 전환입니다.
- 뷰를 바꿔치기도 뷰를 위에 엎을수도 있지만 이 방식은 하나의 뷰 컨트롤러가 두 개 이상의 루트 뷰를 관리해하므로 좋은 방식은 아닙니다.
- 뷰를 이용한 화면전환은 이전 화면으로 되돌아가는 방식에 대한 처리 등 고려해야 할 사항이 꽤 많습니다. 될 수 있으면 뷰를 이용한 화면 전환을 지양하고 뷰 컨트롤러를 사용한 화면 전환 방식을 사용하는 게 좋습니다.
화면 전환 기법 두번째: 뷰 컨트롤러 직접 호출에 의한 화면 전환
- 현재의 뷰 컨트롤러에서 이동할 대상 뷰 컨트롤러를 직접 호출해서 화면에 표시하는 방법입니다.
- 직접 표시한다는 의미에서 프레젠테이션 방식이라고 부르기도 하고 앞 포스팅에서 언급한 적이 있는 present메서드를 이용하면 됩니다.
- 이 방법은 기존 뷰컨트롤러를 밀어버리고 작성하는 게 아니라 그 위에 새로운 뷰 컨트롤러의 화면을 덮는 방식을 이용하는 것이다.
* 프레젠트 메소드의 구조
- present(:animated:)
- present(<새로운 뷰 컨트롤러의 인스턴스>:animated:<애니메이션 유무(Bool형)>)
- present(_:animated:completion:)
- 첫 번째 매개변수는 새로운 화면을 담당하는 화면의 뷰 컨트롤러의 인스턴스, 두 번째 매개변수는 화면을 전환할 때 애니메이션 효과를 줄 수 있는 Bool값이 들어갑니다.
- 세 번째 메소드의 구조는 만약 화면이 완료되는 시점에 맞추어 특정 코드를 실행해주어야 할 경우 마지막에 클로저 함수 형식을 입력받는데(completion:) 이 코드는 완전히 끝난 후에 호출해주는 역할을 한다.
- 화면 전환 처리 방식은 비동기 방식으로 처리되기 때문에 클로저가 아닌 다음 코드에 작성을 하여 화면 전환 과정이 끝나고 실행되는 게 아니라 끝나게 기다리지 않고 다음 코드를 실해해 버립니다. 따라서 클로저에 넣는 것이 좋습니다.
- 프레젠테이션 방식으로 화면을 전환했을 때 iOS 시스템은 화면에 표시된 뷰 컨트롤러와 표시할 뷰 컨트롤러 사이에 참조할 수 있는 포인터를 생성하며 참조할수 있게 해 줍니다.
* 하나의 예시를 보고 설명을 해보겠습니다.
- UIViewController1을 UV1 , UIViewController2을 UV2라고 하고 설명을 하겠습니다.
- 위 예시를 보면 UV1 -> UV2는 present 방식으로 되어있어 전환했을 때 iOS 시스템은 화면에 표시된 뷰 컨트롤러 UV2에서 UV1은 참조할 수 있는 포인터를 생성하여 참조할수 있게 해 줍니다.
- 더 자세하게 설명해보면 UV1에서 UV2로 화면이 전환되었을 때 UV1에서 .presentViewController 속성을 이용하여 UV2를 참조할 수 있고 dismiss메소드를 통해 참조 해체를 할 수 있습니다.
- 위 코드를 보면. instantiateViewController 메서드를 통해 다음 화면의 인스턴스를 생성해 vc라는 변수에 넣어주고. modalTransitionStyle의 하면 전환 스타일 저장해주는 속성을 통해. coverVertical이라는 화면 전화 애니메이션을 지정해 주었습니다.
- 위 영상에서 나오는 애니메이션 효과가. coverVertical 효과인 아래에서 위로 올라가고 이전 화면으로 갈 때는 반대 효과가 나오는 것을 확인할 수 있습니다.
- 인스턴스를 생성해주는 instatiateViewController에서 identifier에 "vc2"로 지정을 해줬는데 여기서 vc2는 아래 그림처럼 뷰 컨트롤러의 Storyboard ID를 지정해 주어 사용하면 됩니다.
- 그럼 이제 복귀메소드인 dismiss(animated:completion:)를 이용해보겠습니다.
- 이 메서드는 이전 화면으로 돌아가는 기능이기 때문에 뷰 컨트롤러의 인스턴스를 전달 인자로 받지 않습니다. 복귀할 때 애니메이션이 적용할지 말지 또 복귀하면서 사용할 클러저만 설정해주면 됩니다.
- 기존 화면을 덮고 있던 화면을 걷어내는 방식입니다.
- 단 화면을 걷어내는 주체가 자기 자신(뷰 컨트롤러)이 아니고 iOS에서 화면이 사라지게 처리하는 것은 자신을 띄우고 있는 이전 뷰 컨트롤러입니다.
- 이걸 헷갈리지 말고 꼭 기억하시길 바랍니다.
- 따라서 UV 2가 사라지게 하는 것은 UV1의 역할이므로 내려갈 때 UV1한테 저 화면 내려갈 건데 좀 내려주세요 ㅠㅠ 하고 요청하는 메서드가 dimiss입니다.
- 프로그래밍 관점에서 정리해보면 복귀 메서드를 호출하는 대상 인스턴스가 self.presentingViewController이므로 self.presentingViewController?.dimiss(animated:)를 호출해야 합니다.
(self.dismiss(_:)로 호출하면 안 됩니다!!!!)
- 위 사진을 보면 UV2에서 dismiss로 인해 뒤로 가기를 해줬고 animated을 설정해줘 present일 때의 애니메이션과 반대 흐름의 애니메이션이 실행됩니다..
만약 스토리보드가 여러 개일 때 원하는 스토리보드를 지정해주려면?
- Main.stroyboard를 참조하기 위해 self.stroyboard 코드를 사용하면 참조를 할 수 있습니다. 타입은 UIStroyboard입니다.
- 스토리 보드 파일이 여러 개 존재할 수도 있죠? 그럴 때는 여러 개의 스토리보드 파일 중 원하는 스토리보드를 지정할 수 있도록 하려면 다음과 같은 방법으로 스토리보드를 지정해 주어야 합니다.
- let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
let ivc = stroyboard.instatiateViewController(_:animated:)
- UIStoryboard의 첫 번째 항목은 읽어 들일 스토리 파일명을 나타냅니다, 여기서 확장자까지 필요는 없어 생략을 합니다.
왜 생략을 할까요?
.
.
왜냐하면 바로 굳이 안 써도. storyboard일 테니깐요 ㅎㅎㅎㅎㅎㅎㅎ
- 두 번째 인자 값인 bundle:은 스토리보드 파일을 읽어 들일 위치입니다. 여기서 사용하는 Bundle.main은 앱의 중요 소스 코드 파일을 포함하고 있는 번들을 뜻합니다.
modalTransitionStyle, 화면 전환 시 애니메이션 종류
- 위에서 말씀 드린것처럼 .modalTransitionStyle은 어떤 스타일을 적용해서 전환할 것인지를 결정하는 것입니다. 이것의 값은 UIModalTransitionStyle객체에 enum타입으로 정의가 되어있습니다.
* 화면 전환 효과 종류는 총 4개가 있습니다.
- UIModalTransitionStyle.coverVertical
- 아래에서 위쪽으로 새로운 화면이 올라가면서 전환되는 효과, 아무 스타일이 지정되지 않으면 이 효과가 기본 효과로 작용합니다. - UIModalTransitionStyle.crossDissolve
- 디졸브 상황에서 두 화면이 서로 교차하면서 전화면이 사라지고 다음 화면이 뚜렷하게 나타나는 효과로 작용합니다. - UIModalTransitionStyle.flipHorizontal
- 화면 중앙 가상의 축을 기준으로 화면이 돌아가는 효과 - UIModalTransitionStyle.partialCurl
- 화면의 오른쪽 아래 모서리에서 시작해 페이지가 말려 올라가는 효과
지금까지 뷰를 이용한 화면 전환과 뷰 컨트롤러 직접 호출에 의한 화면 전환에 대해 알아봤습니다. 엄청 기본적인 것이니 그냥 ssg~ 보지 마시고 하나하나 꼼꼼히 보시길 바랄게요 ㅎㅎㅎ
다음 시간에는 내비게이션 컨트롤러에서 화면 전환, 세그웨이를 통한 화면 전환에 대해 포스팅하겠습니다.
긴 글 읽어주셔서 감사합니다. 좋은 시간 되세요 :)
'IOS 시작기' 카테고리의 다른 글
| [iOS] 화면 전환하기(4/4) - HoonIOS (0) | 2021.03.27 |
|---|---|
| [iOS] 화면 전환하기 (3/4) - HooniOS (0) | 2021.03.23 |
| [iOS] 화면 전환하기 (1/4) - HooniOS (0) | 2021.03.22 |
| [iOS] 뷰 컨트롤러의 상태 변화와 생명주기 (0) | 2021.03.19 |
| [iOS] 뷰컨트롤러란? (0) | 2021.03.18 |
