[SketchFlow 따라하기] Adding Navigation to Buttons in SketchFlow

 

다음 내용은 Navigation 기능을 삽입하는 겁니다. 역시 첨부파일을 통해서 따라가보도록 하겠습니다.

06.zip

 

우선 Boards 페이지로 넘어가면 여러가지 버튼들이 있습니다. 이 중에서 CheckOut 버튼을 활성화시켜보겠습니다. 이 버튼을 선택한 후 마우스 우클릭으로 들어가면 맨 마지막에 Navigate To 항목이 있습니다.

 

당연히 Checkout 버튼을 누르면 checkcout 페이지로 넘어가야겠지요. 그걸 선택해줍니다. 이 메뉴에서는 Map상에 떠 있는 모든 페이지의 종류가 나타납니다. 만약 연결이 안되있는 페이지라도 이 페이지를 통해서 Navigate를 시켜주면 자동으로 선이 형성됩니다. 자 이제는 반대로 Check out 페이지로 갑니다.

지금 보이는 창에서는 버튼이 제대로 동작하는지는 확인할 수 없습니다. 이건 오직 실행되고 있는 상태에서만 확인할 수 있습니다. 일단 Check out 페이지로 온 후 이전 상태로 돌아가는 버튼을 삽입해보고자 합니다. 물론 삽입하는 건 Assets안의 SketchStyle에 있는 버튼을 삽입하면 됩니다.

 

이전 상태로 돌아가는 것은 위처럼 가장 기본적인 Back 기능을 쓰면 됩니다. 그럼 이전 페이지가 무엇인지를 기억하고 그 전 페이지로 넘어가게 되는 겁니다.

위에서 배운 기능을 이전 포스팅에서 만들었던 NaviBar Component에 적용시키면 하나의 네비게이션 바가 완성되는 겁니다.

 

이런 식으로 말이지요. 다른 버튼에도 똑같이 적용시켜 보시기 바랍니다.

그럼 Map상으로도 연결이 조금 바뀌게 됩니다. 지난 시간에 말했던 connect an Existing screen과 동일하게 되는 겁니다.

 

다음은 결과 영상입니다.

 

네비게이션이 정상적으로 동작하는 것을 확인할 수있습니다. 이밖에도 Map상에서 서로 다른 State임을 구분하기 위해서 색상을 부여할 수도 있습니다. 지금 Map 상에 checkout이 성공했을 때와 실패했을 때를 구분해서 페이지가 나눠져 있는데 이 색상을 다르게 두려면

 

Change visual tag를 통해서 색상을 바꿀 수 있습니다. 바꾸면 다음과 같이 되겠지요.

 

 

여기까지가 Map상에서 Navigation 기능을 생성한 내용이었습니다.