サトリクのこだわりのモノ紹介

【Swift5】Segmented Controllerの使い方〜超初心者にもわかるようにたくさん画像を使っています。〜

サトリク

どうもサトリクです。

この記事では、SegmentedControllerについて、解説していきたいと思います。

Segmented Controllerとは

segmentedControllerの画像

Segmented Controllerセグメンテッド コントローラーとは、このボタンのことです。

Segmented Controlは、複数の項目から一つだけを有効にできるボタンです。いくつかの選択肢の中から一つだけ選択してもらいたいときに便利なボタンです。

Segmented Controllerのガイドライン

iOSのガイドラインを引用します。

項目の数

項目の数は、5個以下にしましょう。少なければ少ないほど一つの項目の幅が大きくなり、タップしやすくなります。なるべく項目数を減らして使いやすくしましょう。

項目数が不適切、適切がな画像

項目の名前

項目の名前をつけるときは、それぞれに一貫性を保ってつけましょう。一つの項目が幅にいっぱいいっぱいで、そのほかは、スカスカだと見栄えがよくありません。

項目に一貫性がない、一貫性がある画像

項目の画像

項目には、画像を埋め込むことができますが、画像とテキストは混在させないでください。うまく動かなくなる危険性があります。

外観の変更

Segmented Controllerは、ある程度の外観を変更できます。適切な配色にしましょう。また、文字の位置も適切にしましょう。

項目が見づらい、見やすい画像

サトリク

上記のガイドラインは、以下の公式サイトを引用しています。

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.

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.

引用元:Apple Developer-“Segmented Controls – Controls – iOS – Human Interface Guidelines”

Segmented Controllerの実装方法

使い方はわかるけどカスタマイズの仕方がわからないかたは、スキップ

では、簡単な、Segmented Controllerを使ったアプリを作成しましょう!

完成形

今回作成する簡単なアプリは、こんな感じです。

プロジェクト作成

まずは、プロジェクトを作成します。

STEP.1
プロジェクトを作成する

Create a new Xcode project

Create a new Xcode projectを選択しましょう。

STEP.2
SingleViewAppを選択する

Single View Appを選択

①Single View Appを選択しましょう。

②Nextを選択しましょう。

STEP.3
プロジェクトの設定

プロジェクトの初期設定

以下のように、設定してください。

Prouct Name Sample Segmented Control
Team 任意
Organization Name 任意
Organization Identifier 任意
Language Swift
User Interface Storyboard
STEP.4
保存するフォルダを選択

保存するフォルダを選択

プロジェクト作成完了

storyboardの実装

次に、storyboardのレイアウトを作成します。

STEP.1
Main.storyboardを選択

Main.storyboardを選択

左の項目のMain.storyboardを選択しましょう

STEP.2
Segmented Controlを配置

①右上のプラスボタンか、command + shift + Lで、オブジェクトウィンドウを出します。

②オブジェクトウィンドウから、Segmented Controlを選択し、ViewControllerにドラッグ&ドロップしましょう。

STEP.3
Labelを配置

同じく、オブジェクトウィンドウを出して、Labelをドラッグ&ドロップしましょう。

STEP.4
Segmentsを3にする

Segmentsを3にする画像

①Segmented Controlを選択する

②Segmentsを3にする

STEP.5
タイトルを変更する

タイトルを変更する

Segmented Controlのタイトルを変更しましょう。

今回は、フルーツにします。

SegmentでSegment 0を選択して、Titleをりんごに変更しましょう。

次に、SegmentでSegment 1を選択して、Titleをバナナに変更しましょう。

最後に、SegmentでSegment 2を選択して、Titleをぶどうに変更しましょう。

STEP.6
Segmentedの幅を広げる

SegmentedControlの幅を広げる

Segmented Controlの幅が狭く、文字がはまらないので、幅を広げましょう。

Segmented Controlの端をドラッグするだけで広げることができます。

STEP.7
Labelも同じように広げる

Labelも同じように広げる画像

Labelも同じように広げます。

STEP.8
Labelを中央揃えにする

②中央揃えにする

Labelを選択して、右側のAlignmentを中央揃えにしましょう。

STEP.9
ストーリーボードとコードを2分割

ストーリーボードとコードを2分割する

control + option + command + enterを押して、ストーリーボードとコードを二つに分けます。

右上ので、必要のないウィンドウは閉じましょう。

STEP.9
segmentedControlをコードに接続

controlを押しながら17行目と18行目の間にドラッグ&ドロップしましょう。

そうすると、以下のような小さなウィンドウが出てきます。

STEP.9
タイトル

 

UISegmentedControlを選択する画像

①NameにactionSegmentedControlと入力

②TypeをUIDrgmentedControlを選択

③Connect

STEP.9
Labelをコードに接続

controlを押しながら、12行目と13行目の間にドラッグ&ドロップ

controlを押しながら、12行目と13行目の間にドラッグ&ドロップしましょう。

STEP.9
Outlet設定

Labelをコードに接続

①NameにtextLabelと入力

②Connect

現状のコード
ストーリーボードのレイアウト完了

コードの実装

次はコードの実装です。

の中に以下のように処理を書いてください。

シミュレーターで実行

command + rで実行してみてください。

タブを切り替えるごとに、文字が変わるようになっているはずです!

SegmentedControllerをカスタムしてみる

次は、SegmentedControllerの色を変えてみましょう。

まずは、カスタムできるように、準備(宣言)しましょう。

STEP.1
Segmented Controllerを接続

Segmented Controllerを接続'

controlを押しながら、textLabelの下にドラッグ&ドロップしましょう。 

STEP.2
Outletの設定

Outletの設定

NameをsampleSegmentedControlにしてConnectをクリックしてください。

これでカスタム準備完了です。

の中に、記述していきます。

選択している項目の背景を変える

 

文字色を変える

枠線をつけて、枠線に色をつける

サトリク

どうですか?うまくいきましたか?

僕がよく使うのは、選択している背景の色を変えるカスタムです。

テーマカラーを入れるとよりおしゃれなデザインになりますね!

まとめ

この記事では、SegmentedControlleの使い方について開設しました。

うまくできたでしょうか。

他にも、色々なSwiftの記事を書いているので、読んでみてください!

 

ブランドはじめました

エンジニアの心をくすぐるようなデザイン

購入はこちらから