Segmented Controls

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views.

세그먼트 컨트롤은 두 개 이상의 세그먼트로 구성된 선형 세트입니다. 각 세그먼트는 상호 배타적인 버튼으로 작동합니다. 컨트롤 내에서 모든 세그먼트의 너비는 동일합니다. 버튼과 마찬가지로 세그먼트에는 텍스트나 이미지가 포함될 수 있습니다. 세그먼트 컨트롤은 종종 다른 뷰를 표시하는 데 사용됩니다. 예를 들어 지도에서 세그먼트 컨트롤을 사용하면 지도, 대중 교통 및 위성뷰 간에 전환 할 수 있습니다.

Limit the number of segments to improve usability. Wider segments are easier to tap. On iPhone, a segmented control should have five or fewer segments.

유용성을 높이기 위해 세그먼트 수를 제한하십시오. 더 넓은 세그먼트는 탭하기가 더 쉽습니다. iPhone에서 세그먼트 컨트롤에는 세그먼트가 다섯 개 이하 여야합니다.

Try to keep segment content size consistent. Because all segments have equal width, it doesn’t look great if content fills some segments but not others.

세그먼트 컨텐츠 크기를 일관되게 유지하십시오. 모든 세그먼트의 너비가 같기 때문에 컨텐츠가 일부 세그먼트를 채우지 않고 다른 세그먼트를 채우면 보기에 좋지 않습니다.

Avoid mixing text and images in a segmented control. Although individual segments can contain text or images, mixing the two in a single control can lead to a disconnected and confusing interface.

세그먼트 컨트롤에서 텍스트와 이미지를 혼합하지 마십시오. 개별 세그먼트에 텍스트나 영상이 포함될 수 있지만, 두 개의 인터페이스를 단일 컨트롤로 혼합하면 인터페이스가 분리되고 혼동이 발생할 수 있습니다.

Position content appropriately in a custom segmented control. If you change the background appearance of a segmented control, make sure content still looks good and doesn’t appear misaligned.

사용자 지정 세그먼트 컨트롤에 컨텐츠를 적절히 배치하십시오. 세그먼트 컨트롤의 배경 모양을 변경할 경우, 컨텐츠가 여전히 좋아보이고 정렬되지 않게 나타나진 않는지 확인하십시오.

For developer guidance, see UISegmentedControl.

Segmented Controls - Controls - iOS - Human Interface Guidelines - Apple Developer