[iOS] Human Interface Guidelines - Views - Scroll Views 정리

안녕하세요 Hani입니다.

이번에는 HIG의 Views - Scroll Views에 대하여 다뤄볼 거예요. ☺️

 

 

 

Scroll View

 

Scroll View는 자신의 크기보다 더 큰 컨텐츠를 볼 수 있도록 만들 수 있어요.

다양한 제스쳐를 통해 상호작용이 가능하고 paging도 가능하답니다. ☺️

 

물론 지켜야 할 사항들도 있겠죵?

 

 

 

Support zoom behavior appropriately.

pinch나 double-tap을 이용한 zoom을 지원할 땐 얼마나 zoom in-out이 될지 max/min 값을 설정해야 해요.

컨텐츠의 크기가 너무 커지거나 작아지면 어색하기 때문에 🥺 

 

 

Consider showing a page control element when a scroll view is in paging mode.

Scroll View의 isPagingEnabled 프로퍼티를 true로 두면

사용자가 스크롤할 때 Scroll View의 bounds 단위로 컨텐츠를 볼 수 있습니다.

 

paging mode를 이용할 땐 page control(사진의 하늘색 부분)을 보여줘서

컨텐츠가 얼마나 있고, 현재 어느 컨텐츠를 보고 있는지 확인할 수 있도록 만들어줘야 해요.

 

 

Don’t place a scroll view inside of another scroll view.

Scroll View 안에 또 다른 Scroll View를 넣으면 제어하기 어려운 UI가 만들어집니다.

금지 🚨

 

 

In general, display one scroll view at a time.

Scroll View는 한 번에 하나만 보여주기를 권장합니다.

 

만약 Scroll View를 한 화면에 두 개 보여주고 싶다면

두 Scroll View의 scroll 방향을 서로 다르게 해서 각 Scroll View가 다른 gesture에 반응하도록 만드세욥.

 

---

References

https://developer.apple.com/design/human-interface-guidelines/ios/views/scroll-views/

https://developer.apple.com/design/human-interface-guidelines/ios/controls/page-controls/