수평 스크롤

Horizontal Scrolling

수평으로 이동하는 페이지 커루셀 만들기

가끔 페이지별로 또는 커루셀로 스크롤이 됐으면 할 때가 있습니다. 페이징 된 스크롤을 사용하여 스크롤 Scrolling Views에서 배운 것을 기반으로 페이스북 이벤트 프로토타입을 제작해 보겠습니다. 함께 할 예제 파일을 다운로드 해주세요.

설정

예제 파일에서 시작한다면 파일 안에 이미 만들어져 있는 소스를 한번 보겠습니다. 각각 같은 너비와 10 포인트씩 서로 동일한 거리를 두고 있는 5개의 카드로 구성된 커루셀이 있습니다. 그리고 이 5개의 카드 너비와 시작과 끝 부분에 10 포인트의 패딩을 모두 더한 너비를 가진 그룹 안에 위치해 있습니다.

origamikorea_horizontal views01

앵커 및 포지션 속성이 배치에 미치는 영향을 이해하려면 각 카드를 검사해 보세요.

스크롤 추가

다른 인터랙션처럼 스크롤을 추가해 봅시다. H-Scroll 그룹 레이어 위에 마우스 커서를 호버해서 Touch 버튼을 클릭하고 거기서 Scroll 옵션을 클릭합니다. 우리는 수평 스크롤을 만드려고 하니 Scroll X를 선택합니다.

origamikorea_horizontal views02

H-Scroll 그룹 레이어의 X 포지션 바로 연결되어 있는 Scroll 패치가 생성됬습니다.

origamikorea_horizontal views03

H-Scroll 그룹의 스크롤은 정상적으로 작동하긴 하지만 기본 스크롤 형식으로 설정되어 있습니다. 페이지 단위로 스크롤 하려면 X 인풋을 Free에서 Paging으로 변경해야 합니다.

origamikorea_horizontal views01

페이징Paging은 커루셀 및 수평 스크롤과 동의어입니다.

전폭full-width 페이징 스크롤의 경우에는 괜찮겠지만, 우리의 카드는 실제로 화면의 너비보다 작기 때문에 카드 또는 페이지의 하나가 얼마나 큰지 Scroll 패치에 정확하게 알려줘야 합니다.

스크롤을 세팅하기 위해서 Scroll Settings 패치를 추가해야 합니다. 패치 에디터를 더블 클릭 ()하고 Scroll Settings 입력해서 찾은 리턴키()) 누릅니다.

origamikorea_horizontal views05

Scroll Settings 패치의 아웃풋을 Scroll 패치의 Settings 인풋에 연결합니다.

origamikorea_horizontal views06

여기에는 수많은 설정이 있으며 보통은 이것을 다 사용하지 않아도 됩니다. 우선 Page Size 인풋을 개별 카드의 너비와 동일한 275로 변경합니다.

Page Padding 10으로 변경합니다. 이는 각 카드 사이의 패딩을 동일하게 적용해 줍니다. 이 프로토타입에서는 수직 스크롤을 적용할 수 없으므로 높이는 0에서 변경하지 않습니다.

origamikorea_horizontal views07

높이 값을 변경해도 이 프로토타입에는 영향을 미치지 않습니다.

이제 스크롤할 때, 카드는 한번 스와이프 또는 스크롤의 움직임을 가집니다. 첫 번째와 마지막은 측면에 정렬되고 가운데는 가운데에 맞춰집니다.

Android 이러한 애니메이션 입력보다 조금 엄격합니다. Rubber Band Tension 440, Rubber Band Friction 46으로 변경합니다.

origamikorea_horizontal views08

Scroll Settings 기본적으로 iOS 동작을 사용합니다.

스크롤 클립하기

오리가미의 스크롤링은 기본적으로고무 밴딩rubber banding’ 효과를 냅니다. 이것은 스크롤링과 iOS의 거의 모든 곳에서 볼 수 있지만, 우리가 작업하고 있는 프로토타입은 Android 플랫폼입니다. 그래서 스크롤의 시작과 끝에 드래그가 잡아 당겨지는 고무 밴딩의 효과가 없어야 합니다.

특정 경계 (시작 X 포지션 및 끝 X 포지션)에 스크롤을 포함해야 하며, 그 값을 포함하려면 Clip 패치를 사용해야 합니다.

패치 에디터를 더블 클릭 ()하고 Clip 입력해서 찾은 리턴키()) 누릅니다. H-Scroll Postion X 시작 값은 0입니다. 마지막 카드로 스크롤 해보면 -1075라는 값이 표시됩니다.

origamikorea_horizontal views09

마지막 카드에 위치한 Position X

Clip 패치 최대 값은 더 크기 때문에 0이어야 합니다. 마지막 카드는 다시 -1075입니다. 음수이고 따라서 0보다 작기 때문에 Clip Min의 값을 -1075로 지정합니다.

origamikorea_horizontal views10

새로운 값을 가진 Clip 패치

Scroll X 아웃풋을 Clip Value 인풋에 연결합니다. 그런 다음 Clip 아웃풋을 파란색 H-scroll Position 레이어 프로퍼티 패치 인풋에 연결합니다.

origamikorea_horizontal views11

패치간의 연결이 이와 같아야 합니다.

이 작업이 끝나면 다시 한번 스크롤 해보세요. H-Scroll 그룹의 시작과 끝에 해당하는 값 내에서 스크롤이 멈추게 되는 것을 볼 수 있습니다.

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


연관된 Examples 콘텐츠

 

Horizontal-Scrolling

Horizontal Scrolling

간단한 수평 스크롤링 커루셀 만들기