본문 바로가기

DeVsign

Framer 도전기 #3 Tab Bar 의 활성/비활성 상태 인지하기


이 화면에서 나는 화면의 stack 구조를 어떻게 짜야 할 지가 가장 힘들었던 것 같다. 먼저 각 메뉴를 눌렀을 때 뜰 다섯개의 화면이 필요한데, 팝업을 제외한 나머지 화면은 하단 tab bar보다 아래 뎁스에 위치해야 하므로 가장 위에는 tab bar가, 그 아래에는 각 메뉴의 화면들을 놓으면 될 거라 생각했다. 그러면 flow밖에 tab bar를 빼 놓고, flow안에는 화면 네 개를 놓고, 가운데 화면은 tab bar위로 어떻게 쌓냐능????????

그래서 생각한 것이, 세번째 버튼을 눌렀을 때는 탭바가 아래로 사라진 후 팝업이 스윽 위로 뜨면 되지 않을까? 였다. 그렇게 하면 세번째 화면이 flow 아래 있더라도 눈속임이 가능할 것 같으므로.

먼저 Tabs의 state를 셋팅하고, 기본 상태는 화면 하단에 그대로 보이도록 “up”으로 스테이트를 전환시켜준다. 3번 버튼을 누르면 states는 “down”으로 바꿔줄 것이다.




이렇게 해서, 화면을 눌렀을 때 각 페이지가 뜨고 세 번째 버튼을 누르면 팝업이 뜨는 동작까지 구현 완료. 이제 팝업에서 내리기 화살표를 눌렀을 때, 지금 보이는 화면의 버튼에 불이 들어오게 해 보겠다. 왠지 ‘지금 보이는 무언가’가 일치했을 경우라는 어떤 그런 조건을 활용할 것 같은 느낌에, docs에서 current로 검색을 해 보았다. 핳. 그 ‘무언가’를 찾은 것 같다. 바로 응용해 봄.



오오 됐다. flow.current.name으로 설정한 이유는, 현재 화면과 버튼간의 관계에서 뭔가 일치시키고 싶은 명확한 요소가 필요했기 때문이다. 그래서 flow를 부모로 하는 각 스크린마다 name property를 지정해주었다. 뭔가 엄청 날림공사인 듯 하지만, 날림으로 많이 해 보는 게 좋다고 스승께서 말씀 하셨으니 나쁜 건 아니라고 생각한다. 어쩌다 보니 코드가 160줄이나 나와 버려서 줄일 방법을 고민하긴 해야겠지만.

태그