F#3 Tab Bar 버튼의 활성/비활성 상태 인지하기

tab bar 작업화면
이번에는 구현했던 tab bar에서 한단계 깊이 들어가보았다. 각각의 메뉴를 눌렀을 때 불이 켜지는 동작을 만들었다. 그런데 이중 가운데 메뉴는 다른 화면과 달리 팝업이 아래에서 올라오는 구조이다. popup을 닫으면, 현재 보이는 화면에 대한 버튼의 불이 켜져 있어야 한다. 감이 잡힐듯 말듯. 한 번 구현에 성공했던 화면이었기에 처음부터 다시 만들면 쉽게 작성 가능할 거라 생각했으나 오산이었다. 그러나 이번 경험으로 개념 이해에는 한발짝 더 다가간 것 같다.

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

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

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

59
60 Tabs.states =
61 up:
62 maxY: Screen.height
63 down:
64 y: Screen.height
65 Tabs.animationOptions =
66 time: 0.5
67 curve: Spring(damping: 0.7)
68
69 Tabs.stateSwitch(“up”)

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

 

140
141 closeBtn.onTap ->
142 screens[2].animate(“down”)
143 Utils.delay 0.3, ->
144 Tabs.animate(“up”)
145 Utils.delay 0.5, ->
146 # print flow.current.name
147 for i in [0…5]
148 if flow.current.name == names[0]
149 btnGnbs[0].animate(“on”)
150 menuTexts[0].animate(“on”)
151 else if flow.current.name == names[1]
152 btnGnbs[1].animate(“on”)
153 menuTexts[1].animate(“on”)
154 else if flow.current.name == names[3]
155 btnGnbs[3].animate(“on”)
156 menuTexts[3].animate(“on”)
157 else if flow.current.name == names[4]
158 btnGnbs[4].animate(“on”)
159 menuTexts[4].animate(“on”)

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

구현 화면 보러 가기 >

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다