[Framer] Study day 05(+sketch)
고정 영역 만들기
뚜둔!! 오늘의 작업은 고정 영역 만들기입니다! 제가 이 작업을 하면서 몇 가지 문제점을 발견했는데요. 고정 영역을 만들 때 스케치에서 레이어가 상단에 위치한다고 해서 framer에서도 영역이 상위에 위치하지 않다는 것!
또르르 이번 포스팅은 되게 아무것도 아닌 듯싶지만.. 저는 사실 7~8시간을 고난의 시간을 겪었어요..ㅜㅜㅜ
그만큼 중요하기도 하고... 흐흐
하단 텝바가 고정되고 전체 스크롤이 움직이도록 수정했습니다!!지난번에 풀지 못한 문제 중 2번째 문제(좌우 스크롤 영역 만들기)를 해결하고, 전체 스크롤이 이루어지면서 하단 탭을 고정하도록 하였습니다.
flow = new FlowComponent [화면 전환이 이루어질 수 있다는 정의 ]
backgroundColor: "#ffffff" [ 배경색은 white ]
flow.footer = sketch.bottomBar [ 하단 풋터로는 sketch파일의 bottomBar 레이어 ]
flow.showNext(sketch.Mpage) [ flow.showNext는 아래로 스크롤하거나, 클릭하여 다음 페이지로 이동할 때 필요한 코드입니다. ]
scroll1 = new ScrollComponent [ 스크롤 기능을 추가합니다 ]
width :375, height: 667, parent: sketch.page [ 높이는 아이폰 사이즈에 맞추었습니다.]
sketch.Mpage.parent = scroll1.content [scroll1로서 스크롤되는 콘텐츠는 Mpage그룹입니다. ]
scroll1.scrollHorizontal = false [ 가로 스크롤은 불가능합니다.]
scroll2 = ScrollComponent.wrap(sketch.circle) [ 2번째 스크롤 영역은 그룹 circle입니다.]
scroll2.parent = sketch.Mpage [ (매우 중요) scroll2에 속한 콘텐츠는 Mpage에 속해있습니다. -> 영역을 잡아 주고, 계층을 정의 내리기 때문에 매우 중요한 코드입니다.]
scroll2.content.draggable.propagateEvents = false [ 콘텐츠가 fixed 됩니다.]
scroll2.scrollVertical = false [ 영역 내에서 상하 스크롤이 불가합니다. ]
scroll2.y =470 [scroll2 콘텐츠의 위치는 Y=470입니다. ]
scroll2.contentInset = bottom :200 [ scroll2 콘텐츠 아래 200의 여백을 만듭니다. ]
scroll3 = ScrollComponent.wrap(sketch.bottomBar) [ scroll3은 그룹 bottomBar의 콘텐츠입니다.]
scroll3.parent = sketch.Main.page [ scroll3은 스케치 파일의 Main에 속합니다.]
scroll3.content.draggable.propagateEvents = false [ 콘텐츠가 fixed 됩니다.]
scroll3.scrollVertical = false [ 영역 내에서 상하 스크롤이 불가합니다. ]
scroll3.scrollHorizontal = false [ 영역 내에서 좌우 스크롤이 불가합니다. ]
뚜둔!!!! 이걸 완료하려고... 며칠을 고민한 느낌입니다.ㅜㅜㅜ
양은 별로 안돼 보이지만... 엄청 인터넷/ 책을 뒤지고, 지인 찬스도 써보고 하며 답을 찾아내었습니다!! 1
1. scroll2번의 영역 해결하기! 지난번에 요소 앞에 흰색 박스가 생겨서 실제 구현하고자 한 깔끔한 느낌이 아녔는데요, 지난번에 언급했던 것처럼 요소의 뒤에 bg(스케치에서)를 깔아주었어요. 그러면 스크롤되는 영역이 bg의 크기와 같이 설정이 됩니다!! (일러스트처럼 요소를 select 했을 때 생기는 박스처럼 영역이 생기는 것과 같아요!)
2. 고정 영역 만들기!! 이건.. 정말... 코드를 하나도 빠트리지 말고, 그 의미를 파악해야 했던 것 같아요.. 제가 고정 영역을 최상위에 위치시키고자 저번에 파일에서 z :00 / bringToFront() / sentToBack() / 작성하는 순서 바꾸기 등 다양한 방법을 써봤었는데요... 결국에 해결된 것은 그룹에 속해 있다는 코드는 제대로 작성해야 했었던 것이었어요!!! scroll3.paren = sketch.Main.page 이런 것처럼 스크롤되는 레이어들의 소속을 정확하게 설정해 주어야 했던 것입니다!!!!!!
3. 전체 스크롤이 가능하게 하면서 footer 하단에 영역을 넣어주고 싶었는데.. 사실.. 이거 야매로 하였어요..ㅋㅋㅋㅋㅋㅋ 스케치에서 bg를 많이 넣어주니까.......ㅋㅋㅋㅋㅋㅋ 해당 페이지처럼 스크롤되더라고요...ㅋㅋㅋㅋ나중에 정말 정식으로 영역 넣어주는 것을 해결해 보아야겠습니다!!
저는... 저거 완성한 것만으로도 넘나 뿌듯하다능.. 흐흐 모두들 불금, 불주말 보내십시오~
