스크롤 뷰

Scrolling Views

수평 스크롤 동작을 디자인에 추가하기

스크롤 뷰는 오리가미에서 쉽게 만들 수 있고 매우 유연합니다. 기본적인 메신저 프로토타입을 만들어 스크롤을 사용하는 방법을 배워보겠습니다. 튜토리얼 파일을 다운로드 해서 같이 따라해 보세요.

설정

튜토리얼 파일을 열어보면 Navigation Bar 아래에 List라는 레이어가 설정되어 있고 레이어 패널에 Tab Bar 있음을 있습니다. List 레이어가 상단에 고정되어 있고 Navigation Bar 바로 아래에 배치된 것을 체크해 놓으세요.

스크롤 상호작용 추가

다른 유형의 상호작용처럼 Scroll을 레이어에 추가할 수 있습니다. List 레이어 위로 마우스를 이동하고 Touch 버튼을 클릭하면 수직 스크롤이 필요하므로 메뉴에서 Scroll Y를 선택합니다.

origamikorea_scrolling view01

List 레이어는 이제 스크롤 가능한 것에서 기대해 볼만한 모든 동작 (: velocity rubber banding ) 가지고 스크롤 있습니다.

origamikorea_scrolling view02

뷰어 내에서 List 레이어를 스크롤 해보세요.

스크롤 추가하기

Scroll 인터랙션을 레이어에 추가하면 포지션이 0으로 재설정되고 navigation Bar 화면에서 잘려보일 겁니다. Navigation Bar 레이어를 숨겨보면 List 레이어가 Navigation Bar 아래가 아닌 화면 위에 배치되어 있음을 있습니다.

다른 문제는 스크롤의 맨 아래에 있습니다. 이 프로토타입은 Tab Bar가 있음을 고려하지 않았습니다. 이 스크롤은 Tab Bar 아래에 포함되어야 합니다.

List Scroll Navigation Bar Tab Bar 사이 공간에 포함시켜야 합니다. 이는 Group 레이어를 가지고 할 수 있습니다.

레이어 버튼 (⇧⌘N) 클릭해서 Group 추가하고 선택하세요. Group Navigation Bar Tab Bar 아래에 배치되어 있는지 확인하는걸 잊지마세요.

origamikorea_scrolling view03

시각적 정렬

새 Group 레이어에 Color Fill을 임시로 추가하여 얼마나 많은 공간을 차지하고 있는지 또는 어디쯤에 위치하는지를 확인하는 데 유용할 때가 있습니다. 새 레이어(+) 버튼 (⇧⌘N)을 클릭하고 Color Fill 레이어를 추가합니다. Color Fill 레이어를 Group 안으로 이동시키세요.

origamikorea_scrolling view04

Color Fill 일시적으로 Group 들어가 있어야하는 이유는 Group 콘텐츠만 보일 Group 자신의 상태가 보이지 않기 때문입니다.

이제 숨겼던 Navigation Bar 다시 보이게 합니다.

컨테이너 조정하기

Group의 레이어 크기는 기본적으로 디바이스 화면과 동일한 크기입니다. 이 경우 화면의 너비는 List의 내용과 딱 맞습니다. 그러나 높이에는 약간의 조정이 필요합니다.

우리가 원하는 높이는 디바이스 화면 높이에서 Navigation Bar 레이어 높이 (64.5) Tab Bar 레이어 높이 (49) 값입니다.

Group 레이어를 선택하세요. 레이어 패널 안의 Size H 속성에 667-49-64.5를 입력하고 리턴 키()를 누릅니다.

origamikorea_scrolling view05

새로운 Size H 값으로 553.5 됬음을 있습니다.

컨테이너 정렬하기

뷰어에서 List (Color Fill 아래)가 새 높이 값과 완벽하게 정렬되어 있지 않음을 확인할 수 있습니다. 이는 여전히 Group이 화면 중앙에 고정되어 있기 때문입니다.

Group의 앵커Anchor를 화면 상단으로 변경하세요. 그런 다음 Group Y 포지션Position을 Navigation Bar 높이 (64.5)로 변경하세요. 이제 Group (및 Color Fill)이 프로토타입에 완벽하게 정렬되어 있는 것을 볼 수 있습니다.

origamikorea_scrolling view07

앵커 위치를 화면 상단으로 변경했기 때문에 Y 포지션Position이 화면 상단에서부터 측정되고 있습니다.

컨테이너 정리하기

그룹이 올바르게 배치되었으므로 임시 Color Fill을 삭제하고 List 레이어를 Group 내부로 드래그해 놓으면 됩니다.

origamikorea_scrolling view08

이제 프로토타입을 뷰어에서 확인해 보세요. 목록이 맨 위 Navigation Bar와 아래쪽 Tab Bar 사이에서 깔끔하게 작동되는지도 확인합니다.

원문: http://origami.design/tutorials/common-interactions/Scrolling-Views.html


연관된 Examples 콘텐츠

 

Scrolling Views

메신저 대화 스크롤 하기