[iOS - HIG] 48. Page Controls

Page Control

• indicator image를 통해서 flat 목록 페이지를 표출
  • 스크롤되는 indicator row는 사용자가 원하는 페이지를 찾기 위해 목록을 탐색하는데 도움

• 인터렉션 - swipe: 왼쪽에서 오른쪽으로 미는 동작 or 오른쪽에서 왼쪽으로 미는 동작
  • scrubbing 중 페이지 전환에 애니메이션을 삽입을 지양: 사용자들이 매우 빠르게 scrub할 수 있으며, 애니메이션이 들어가면 산만한 시각적 영향

swipe

• 인터렉션 - scrub: page control을 꾹 누른 후 다른 페이지로 이동

scrub

Page Control의 indicator 스타일 3가지

• Automatic: 사용자가 control과 상호작용 할때만 배경을 표시
  • page control이 현재 화면의 기본 탐색 control이 아닌 경우 사용

Automatic

• Minimal: .automatic과 동일하게 배경이 존재하지 않지만, scrub해도 배경이 표출되지 않는 속성
  • 현재 page의 위치만 표시하고 scrubbing 중 시각적 피드백을 제공할 필요가 없는 경우 사용

pageControl.backgroundStyle = .minimal

• Prominent: 항상 배경을 표시
  • page control이 현재 화면의 기본 탐색 control인 경우에만 사용

• pageControl은 사용자들이 관용적으로 익숙한 곳에 배치: 가로형태이며 화면 하단 가운데에 배치

Indicator image 커스텀

• 디폴트로 주어진 pageControl의 Indicator image는 점 글리프 사용

• 이미지 변경은 pageControl.setIndicatorImage(:forPage:) 사용

let myImage = UIImage(systemName: "star")
pageControl.setIndicatorImage(myImage, forPage: 1)

• custom image는 단순하고 명확한 의미를 담고 있는 SF symbol 사용
• PageControl에서 서로 다른 Indicator image를 두 개 이상 표출을 지양
  • 여러개의 이미지를 사용하면 지저분하게 보이는 영향

좌: 두 가지만 custom이미지를 넣어서 일관된 경험 부여

• Indicator image에 색상을 지정하는 것을 지양: 시스템이 자동으로 indicator 색상을 지정하는것이 현재페이지 와의 대비를 높일 수 있는 가장 좋은 방법