[iOS] 액션 세그웨이와 매뉴얼 세그웨이란? - HoonIOS

안녕하세요 HoonIOS입니다 :)

앞에서 세그웨이에 대해 간단하게 설명을 했는데요,

이번에는 액션 세그웨이와 매뉴얼 세그웨이에 대해 알아보겠습니다.

 

액션 세그웨이

- 액션 세그웨이는 트리거와 세그웨이를 직접 연결된 것입니다. 여기서 트리거란 터치 또는 클릭 이벤트를 발생시켜 세그웨이를 실행할 수 있는 요소를 말합니다.

- 앞 포스팅에서 세그웨이의 종류에 대해 설명했을때 액션 세그웨이는 화면 전환 시 프로그래밍 코드가 필요하지 않고 스토리보드에 구현된 객체를 트리거로 지정만 하면 되므로 엄청 단순합니다.

 

액션세그웨이 설정

 - 위 영상은 스토리보드를 이용하여 다음 컨트롤러로 액션 세그웨이를 설정하는 방법으로 버튼인 Next 버튼 트리거에 control + 클릭 후 다음 불러올 컨트롤러로 잡아당기면 아래와 같은 액션 세그웨이 창이 나옵니다.

액션 세그웨이의 종류

- 세그웨이 종류

• Show
  - 가장 일반적인 세그웨이로, 내비게이션 컨트롤러를 이용할때 쓰는 세그웨이입니다.
  - 이 세그웨이를 통해 다음 컨트롤러로 화면을 전환한다면 내비게이션 컨트롤러 매서드와 같이 스택 맨 위에 올라간다(쌓인다)라고 생각을 하시면 됩니다.
• Show Detail
  - splitView에서 사용하는 세그웨이로 아이폰으로는 똑같아 보이지만 아이패드를 사용하면 splitView구조인 master, slave 구조가 돼서 보입니다.
  - 아이폰에서는 쓸 일이 없을 거 같습니다.
• Present Modally
  - 앞 영상에서 사용한 것으로 화면 전환 메소드인 present(_:animated:)를 이용한 화면 전환과 같은 기능입니다.
• Present As Popover
  - 아이패드에서 사용하는 것으로 팝업창을 띄우는 것입니다.
  - 아이폰에서는 사용되지 않는 메소드입니다.
• Custom
  - 세그웨이를 커스텀할 때 사용한다.

액션 세그웨이의 장점

• 세그웨이를 이용하면 이처럼 스토리보드에 전환 관계가 명료하게 표시되므로 직관적으로 사이의 관계를 확인할 수 있어서 좋습니다.
• 타입마다 세그웨이의 모양이 다르기 때문에 어떤 세그웨이가 사용됐는지 참조할 때 좋습니다.
• 세그웨이를 선택하면 어떤 트리거 객체와 연결이 되었는지 쉽게 식별을 할 수 있습니다.

세그웨이 종류에 따른 모양

-Show는 내비게이션에서 이용하는 세그웨이라고 위에 말씀을 드렸었는데요, 그렇다면 만약 내비게이션이 아니라 뷰 컨트롤러에서 사용하면 어떻게 될까요?

• 정답은 바로 자동으로 present Modally 메소드로 전환되어 사용이 됩니다.

 

이제는 그다음 세그웨이인 매뉴얼 세그웨이에 대해 알아보겠습니다.

매뉴얼 세그웨이

- 매뉴얼 세그웨이는 항상 조건이나 상황에 따른 구분 없이 화면을 이동하는 것은 아닙니다. 다양한 상황에서 다양한 조건에 따라 이동하는 페이지를 바꾸어 줘야 할 때가 있는데 이때 매뉴얼 세그웨이를 사용하면 됩니다.

- 뷰 컨트롤러와 뷰 컨트롤러 사이에 연결되는 수동 실행 세그웨이입니다.

- 액션 세그웨이와 달리 수동으로 실행을 시켜주어야 하므로 소스코드에서 세그웨이를 실행할 메소드를 호출해야 합니다.

• 매뉴얼 세그웨이를 실행하기 위한 메소드
  performSegus(WithIdentifier: <세그웨이 식별자>, sender: <세그웨이 실행 객체>)

-  필요한 시점에 세그웨이 식별자를 통해 특정 세그웨이를 지정하고 위 메소드를 호출하면 화면이 전환되는 구조입니다.

매뉴얼 세그웨이 설정하기

1. 매뉴얼 세그웨이는 스토리 상단에 있는 도크바를 이용하는 것으로 아래 그림과 같이 불러올 뷰 컨트롤러로 control + 드래그를 통해 갔다 놓으면 됩니다.

매뉴얼 세그웨이 설정

2. 그럼 액션 세그웨이랑 같이 어떤 세그웨이를 쓸 건지 팝업창이 우선 뜹니다.
( 우선 저는 present를 이용한 것이므로 present Modally를 통하여 화면 전환을 해보겠습니다.)

매뉴얼 세그웨이 종류

3. 그다음 idenetifier를 지정해 줄 것인데 이것은 위에서 매뉴얼 세그웨이 설정을 위한 메소드의 WithIdentifier 매개변수에서 사용할 식별자입니다.
4. 저는 next라는 식별자를 지정해 주었습니다.

세그웨이 식별자 설정

5. 이제 세그웨이를 설정해 주었으니 매뉴얼 세그웨이의 특징이 수동으로 실행을 시키기 위하여 버튼을 만들어 에디터에다가 @IBAction을 사용하여 메소드를 설정해 주겠습니다.

6. @IBAction 메소드 안에 performSegue 메소드를 설정해줘 매뉴얼 세그웨이를 실행시켜 줍니다.

performSegue메소드

7. 이제 빌드를 통하여 실행을 해보면 아래와 같은 화면이 전환되는 것을 확인할 수 있습니다.

 

매뉴얼 세그웨이를 이용한 화면 전환

화면 전환 효과

- 저번 포스팅에서 화면 전환을 하면서 효과를 준 것을 확인할 수 있었는데요, 그러면 세그웨이에서 화면효과를 주려면 어떻게 줄 수 있을까요?

정답: 세그웨이를 선택 후 어트리뷰트 인스펙터 탭을 열어 [Storyboard Segue] -> [Transition]에서 효과를 확인할 수 있습니다.

화면전환 효과 설정

 

지금까지 화면 효과에 대해 알아보았습니다,

.

.

.

어라? 끝났다고요? 이상한 느낌을 받으셨나요? 화장실 갔다가 뒷처리를 제대로 안 한 것 같은 느낌을 드셨을 텐데요.
왜냐하면 이전 화면으로 돌아가는 것을 구현하지 않았기 때문입니다.

 

ㅎㅎㅎ 그러면 다음 포스팅에는 세그웨이에서 화면 복귀인 Unwind에 대해 알아보겠습니다.