Segmented Controls

https://developer.apple.com/design/human-interface-guidelines/ios/controls/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.

セグメンテッドコントロールは、相互排他的なボタンとして機能する2つ以上のセグメントの一次元的なセットです。コントロール内では、すべてのセグメントの幅は同じです。ボタンと同様に、セグメントにはテキストやイメージを含めることができます。セグメンテッドコントロールは、さまざまなビューを表示するためによく使用されます。たとえば、マップでは、セグメンテッドコントロールを使用して、マップビュー、中継ビュー、およびサテライトビューを切り替えることができます。

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では、セグメント化されたコントロールは5つ以下のセグメントを持つ必要があります。

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.

セグメント化されたコントロールでテキストと画像を混在させないでください。 個々のセグメントにはテキストやイメージを含めることができますが、1つのコントロールにこれらを混在させると、関連がわからなくなり混乱する可能性があります。

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.