F#2 Tab Bar 구현하기

취미생활로 끝인 줄만 알았는데, 어느새 회사에서 프레이머로 목업을 제작중인 나를 발견 후덜덜. 거기에 더하여 이 작업에 집중할 수 있도록 다른 업무가 배제되었다.(꿀) 6주 클래스 이후로 본격적인 앱 프로토타입을 만들어낸다는 게 쉽지 않지만, 날마다 차근차근 구현에 성공함으로써 성취감을 느끼고 있다.

그중 가장 뿌듯했던 것은, 몇 번의 도전 끝에 Tab Bar 활성탭/비활성탭의 구조를 구현했다는 것이다. 프레이머가 출시된 지 최소 4년은 넘은 만큼 탭바에 대한 오픈소스는 곳곳에서 찾을 수 있었다. 그러나 소스를 받아서 흉내를 내 보아도 응용이 되지 않았다. 어느 곳에서 틀린 건지 구분하는 건 능력 밖의 일이었다. 그래서 따라해본 소스는 전부 삭제하고 탭바 영역만 따로 떼어 내가 배운 지식을 토대로 처음부터 만들어 보았다.

먼저 배열을 세팅한다. sketch파일을 import했고, 버튼과 메뉴 텍스트의 레이어명을 배열에 순서대로 추가 하였다.

1 btnGnbs = [btnGnb1, btnGnb2, btnGnb3, btnGnb4, btnGnb5]
2 menuTexts = [menu1, menu2, menu3, menu4, menu5]
3 hotSpots = [] #버튼의 영역 지정
4

반복문을 이용하여 다섯개의 버튼, 메뉴명 텍스트에 대한 states를 셋팅한다. 활성탭은 on, 기본상태는 off로 이름을 지어 주고 각각의 properties를 작성한다. 여기에서는 활성탭을 불투명하게, 비활성 탭은 투명도를 30% 주었다.

5
6 for i in [0…5]
7 btnGnbs[i].states =
8 off:
9 opacity: 0.3
10 on:
11 opacity: 1
12 menuTexts[i].states =
13 off:
14 opacity: 0.3
15 on:
16 opacity: 1
17 btnGnbs[i].animationOptions =
18 time: 0.2
19 menuTexts[i].animationOptions =
20 time: 0.2

버튼의 불이 켜질 때 스르륵, 켜 지도록 할 것이므로 animationOptions를 사용하여 시간을 지정한다.
그리고 아래와 같이 모든 아이콘의 불을 끄고, 첫번째 메뉴만 불을 켜 준다.

21
22 btnGnbs[i].stateSwitch(“off”)
23 menuTexts[i].stateSwitch(“off”)
24 btnGnbs[0].stateSwitch(“on”)
25 menuTexts[0].stateSwitch(“on”)
26

다음으로 hotspot이라는 이름으로 버튼 영역을 만들어 준다. 다섯개의 영역이 만들어졌다.

27
28 hotspot = new Layer
29 parent: Tabs
30 width: Screen.width / 5 – 10
31 height: Tabs.height
32 x: 5 + i * Screen.width / 5
33 backgroundColor: “transparent”
34 index: i 
35 hotSpots.push(hotspot)

이제 이 영역을 눌렀을 때, 각각의 버튼에 불이 들어오도록 하는 #Events를 셋팅한다.
여기서 막히기 시작함.
분명 현재 버튼의 번호라든가 뭔가 일치하면 불이 들어오게 하면 될 텐데, 뭘 어떻게 일치시켜야 할 지. 며칠동안 수도 없이 오픈 소스를 찾아보았지만 배웠던 방식과 달라 제대로 구현되지 않았다. 그러다 docs에서 찾게 된 layer.index 라는 것을 응용하여, hotspots의 각각의 인덱스를 i로 지정해주었다. 5개의 hotspot의 번호가 만들어졌다. 순서대로 1,2,3,4,5. 버튼과 메뉴 텍스트의 번호와 일치할 방법을 찾았다.

36 hotSpots[i].onTap ->
37 # print this.index. 인덱스를프린트해 봄.
38 for i in [0…5]
39 if i == this.index
40 btnGnbs[i].animate(“on”)
41 menuTexts[i].animate(“on”)
42 else
43 btnGnbs[i].animate(“off”)
44 menuTexts[i].animate(“off”)

i 라는 변수를 다시 5개 반복시켜 i와 hotspot의 index 가 일치하면 i 에 해당하는 버튼과 텍스트는 “on”상태로 애니메이션을 실행, 그렇지 않을 경우에는 “off”로 애니메이션 실행.
이렇게 하여 구현에 성공 하였다.

구현화면 보러 가기 >

댓글 남기기

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