brunch

You can make anything
by writing

C.S.Lewis

by 유나 Dec 21. 2017

4.4 인스타그램 만들기- 완성

* 예상치 못하게 인스타그램 만들기 시리즈가 장기화되면서 그동안 프레이머도 수많은 업데이트가 진행되었습니다. 디자인 탭도 생기고요. 원래도 열일하는 애들인데 말이죠. 시리즈의 특성상 구버전의 코드를 그대로 사용할 수밖에 없어서 최신 버전에서는 코드가 달라져 오류가 발생할지도 모르겠습니다. 이 점 참고해주세요.

지난 시간에 배열에 대해 정리했다. 거의 반년에 한 번씩 올리는 것 같아서 생각이 안 날 사람들을 위해 친절히 링크를 걸어둔다. (4.3 인스타그램 만들기 - 배열(Array))

그리고 인스타그램 만들기가 장기화되면서 잊혔을 최종 완성형을 다시 한번 보며 상기시키자.

우리가 만들려고 했던 것은 바로 메인 리스트에서 프로필 이미지를 클릭하면 각 유저의 상세화면으로 넘어가는 플로우였다.(gif에서는 영상 촬영 플로우까지 있지만 이 부분은 생략) 이전의 4편을 통해 변수와 반복문을 활용하여 메인 리스트의 레이아웃을 잡았으니 남은 것은 지난번에 정리했던 배열을 활용하여 상세로 넘어갈 플로우다.

상세 화면의 레이아웃은 지난 편에서 정리했던 내용들을 응용하면 만들 수 있으니 이 부분은 스스로의 공부를 위해 설명을 최소화하고 이어가도록 하겠다. (아래에 파일을 함께 첨부하니 해당 부분의 응용이 어려운 사람은 참고)

# UserProfile Variables

tileCount = 24 #상세화면에서 이미지 타일 수

columnCount = 3 #한 줄에 노출할 이미지 수

gutter = 4 #이미지 사이 여백 설정을 위한 변수

combinedGutterWidth = gutter * (columnCount - 1) #이미지 배치 시 사이 여백 설정

combinedTileWidth = Screen.width - combinedGutterWidth #타일 이미지 전체 가로 사이즈

tileWidth = combinedTileWidth / columnCount #타일 이미지 하나의 사이즈

tileOffset = tileWidth + gutter #타일 하나와 이미지 하나를 합친 값

profWidth = 750/2

profHeight = 556/2

# 유저 상세 화면 레이아웃 설정

detailScroll = new ScrollComponent

size: Screen.size

scrollHorizontal: false

backgroundColor: "#fff"

profDetail = new Layer

width: profWidth

height: profHeight

backgroundColor: "#fff"

parent: detailScroll

for i in [0...tileCount]

columnIndex = i % columnCount

rowIndex = Math.floor(i/columnCount)

tile = new Layer

x: columnIndex*tileOffset

y: rowIndex*tileOffset+574

size: tileWidth

parent: detailScroll.content

image: Utils.randomImage(tile)

기존에 만들어두었던 타임라인 코드에 배열을 추가해보도록 한다.

여기서는 빈 배열을 하나 생성하고 후에 레이어를 배열에 밀어 넣는 방식을 택했다. 프로필 영역을 클릭하면 상세로 넘어가게 할 예정이니 배열의 이름은 임의로 profArray라고 명명했다. (다른 이름으로 바꿔어도 상관없다.)

profArray = []

빈 배열은 반드시 밀어 넣을 콘텐츠 위에 먼저 생성이 되어야 하므로 위치는 타임라인에서 사용되는 반복문이 시작하기 전에 선언해주어야 한다는 점을 유의하자. 예제에서는 타임라인 변수 바로 다음에 배열을 선언했다.

그럼 이제 빈 배열에 profList를 추가하여 순서를 만들어보자.

지난 배열 정리에서 했던 것을 생각해보면 아주 간단하다. profList아래에 profList를 profArray에 밀어 넣겠다는 코드를 삽입하면 된다.

profArray.push(profList)

그리고 상세의 프로필 이미지와 리스트의 프로필 이미지를 매칭 시키기 위해 인덱스 번호를 부여한다. 이 번호가 나중에 클릭 이벤트에서 같은 번호를 매칭 하여 같은 이미지를 불러낼 때 사용된다.

profList.idx = index

여기서 idx는 index의 줄임말이고 뒤에 붙은 index는 반복문(for index in...)에 사용된 변수다.

# Timeline Variables

rows = 8

profHeight = 51

photoSize = Screen.width

commentHeight = 191

profArray = []

scroll = new ScrollComponent

size: Screen.size

scrollHorizontal: false

# Loop to create row layers

for index in [0...rows]

profList = new Layer

width: photoSize

height: profHeight

y: index * (profHeight + photoSize + commentHeight) + 65

parent: scroll.content

image: "images/profList_"+index+".png"

profList.idx = index

profArray.push(profList)

(중략)

이제 클릭이벤트만 설정하면 인스타그램 만들기가 끝난다. 클릭이벤트 역시 반복문을 활용한다.

지난번 레이아웃 편에서 flow 컴포넌트를 사용하며 주석처리했던 부분에 클릭이벤트를 위한 반복문을 삽입해보자.

# layerA.onClick ->

# flow.showNext(layerB)

# layerB.onClick ->

# flow.showPrevious()

↑ 레이아웃 편에서 주석 처리했던 부분

for i in [0...rows]

profArray[i].onClick -> #리스트의 프로필을 profArray라는 배열에 넣은 상태이므로 배열에 이벤트를 삽입한다. [i]는 for문의 변수를 받아온다.

flow.showNext(detailScroll) # 프로필을 클릭하면 detailScroll을 보여준다.

profDetail.image = "images/profView_"+@.idx+".png" #리스트와 상세의 프로필을 매칭 시키는 부분이다. @는 자기 자신을 뜻한다. 다르게는 this를 쓸 수 있다. #.idx는 즉 자기 자신의 idx 번호를 뜻한다. profArray[i]가 반복문을 통해 숫자를 받아오면 그 숫자가 그대로 여기에 똑같이 적용되어 같은 이미지가 불러오게 되는 것이다. 그렇기 때문에 리스트가 프로필 이미지와 상세의 프로필 이미지의 파일명에서 숫자가 동일하게 매칭 되어 있어야 한다. (예: profArray[1] → "images/profView_"+1+".png)

btnBack.visible = true #상세로 가면 숨겨두었던 back버튼과 more 버튼을 활성화시킨다.

btnHMore.visible = true

btnMsg.visible = false #마찬가지로 필요 없는 메시지와 사진 버튼은 비활성화시킨다.

btnCam.visible = false

btnBack.onClick -> #상세에서 back버튼을 클릭하여 리스트로 돌아올 수 있게 설정한다.

flow.showPrevious() #이전 화면으로 돌아가라는 의미.

btnBack.visible = false

btnHMore.visible = false

btnMsg.visible = true

btnCam.visible = true

↑추가 수정된 부분