【swiftの基本】XcodeにあるSegmented Controlの使い方をマスター！
「Xcodeのsegmented controlってどうやって使うんだろう〜？使い方をサンプルつきで教えてほしい！」
そういった悩みを解決します
記事コンテンツ
- Segmented Controlとは
- XcodeでSegmented Controlを使い方を学ぶ！
- Segmented Controlの細かい設定をしてみる！
Iosでアプリを作りたくてswiftを勉強しているのですが、
サンプルとして作成していたアプリのSegmented Controlに少しつまずきました。
なので、色々と調べてSegmented Controlをまとめましたので紹介していきます！
Segmented Controlとは
最近よく見かけるようになったSegmented Control。
直接見ればすぐ分かると思いますが、名前を聞いただけではあまりピンとこないかもしれません。
なので、念のため、Segmented control(セグメントコントロール)を説明すると、
区分ごとにボタンのようなものが直線で連なっていて、横に移動して使う機能です。
用途は表示させたい画像や内容を変えたいときに使います。
XcodeでSegmented Controlの使い方を学ぶ！
Segmented Controlの使い方や設定を理解するために実際に使っていきます。
僕の開発環境は以下です。
Xcode：Xcode 11.4
Swift：Swift５
では、いきましょう！
ステップ１：プロジェクト作成
Xcodeを開いて、「Single View App」を選択し、「next」押して進みます。
Product Nameなど情報を入力し、User Interfaceは「Story board」を選んでおきましょう！
必要な情報を入力後、「next」で押します。
ステップ２：Main.storyboardを開く
プロジェクト作成後、Main.storyboardができてきることを確認して開きます。
中央にiphoneのViewが出現します。画像はiphone11。
ステップ３：Segmented ControlやLabelの配置
Segmented Controlを配置していきます。
画面右上の「＋」を押下し、検索バーが表示されるので「segmented Control」と検索。
検索してSegmented Controlを見つけたら、ドラッグアンドドロップでViewに置きます。
Labelも上記の手順同様に配置します。
Uiパーツを置くだけだとシンプルすぎるので、
セグメントを増やしたり、文字や大きさを変えてみましょう！
変更はthe Attributes inspectorにてできます。
最初にセグメントを増やしてみます。
右側のSegmetnsで「２」が設定されていますが、ここに「３」を入力。
すると、Viewの「Second」の隣に空白ができ増えました。
次は区分内の文字を変えたいのでTitleに注目します。
デフォルトで「First」がいますが、削除して「Dog」を入力。
すると、画面側のセグメントも「Dog」になります。
「Second」の方も変えたいので、SegmentでSegment 1を選択。
Titleのデフォルトの「Second」を削除し、「Cat」を入力します。
そして、Segment ２を選択し、「Pig」に書き換えましょう。
セグメント全体のサイズが小さめだったので、左右に引っ張って大きさ変更。
次はLabelを変更します。
Labelを選択した状態でthe Attributes inspector開き、textに絵文字の「🐶」を入力。
最初は表示が小さいので、Fontのサイズを50に変更。
ステップ４：Segmented Controlをコードと紐付ける
Segmented Controlとコードを紐づけるために、
Adjust Editor Optionsからassistantを開きます。
画面とコードが並んだところで、option+ドラッグでUiパーツをコードに紐付けします。
Connetionが「outlet」であることを確認しNameを入力後、「connect」を押す。
「🐶」を選択し、コードと紐付ける。
上記と同様の手順で設定しConnectします。
再度Segmented Controlを選択しファンクションを作成するのですが、ちょっと注意が必要です。
注意すべき点はConnectionが「Action」であることと、Typeを「UISegmentedControl」にすること。
あとはNameを入力しconnectすれば紐付け完了ですね。
ステップ５：コードを実装
Segmented Controlを動かしときに、動物の画像がかわるように処理を書いていきます。
画面のセグメントが変更されたときにIndexをもらい、
switc文をつかってそれぞれの画像を表示するよう分けてます。
サンプルコード：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var segmentedControl: UISegmentedControl!
@IBOutlet weak var textLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func tapSegmentedControl(_ sender: UISegmentedControl) {
switch sender.selectedSegmentIndex{
case 0:
textLabel.text = "🐶"
break
case 1:
textLabel.text = "🐱"
break
case 2:
textLabel.text = "🐷"
break
default:
break
}
}
}ステップ６：simulatorでsegmented Contorolを試す
では、実際にsimulatorで動作確認してみましょう！
「Command + R」でビルドしてランします。
初期表示はこんな感じ↓
そして、Catに移動するとちゃんとネコの画像が出てますね！
「Pig」に移動した時もブタの画像になっていたため、問題なさそうです。
想定する結果になっていてちょっと安心しました。笑
Segmented Controlの細かい設定をしてみる！
Segmented Controlが正常に動くまでできたので、他の設定も変えてみてください！
今回はカンタンでよく使うであろう、
選択している部分の色を変更や背景色をかえてみます。
セレクトしている部分の色変更
選択されている部分の色の変更は、まず画面右側のSelected Tintをクリック。
そうすると、たくさんの種類の色が出てくるのでどれかを選びます。
見やすい色だと思い、「System Teal Color」に変更。
Command+Rを実行。
ちゃんとセレクトされている部分の色が変わってるのがわかります。
セグメントの背景色を変更
次は背景色を変えてみましょう！
画面右の下のほうにBackgroudがありますよね。
クリックして色の一覧が表示されるので、好きな色を選びます。
System Teal Colorを設定してみます。
すると、今度は選択されている部分ではなく、背景色のみ色が変わりました。
Command+Rを実行。
シュミレーターも背景色がSystem Teal Colorに変わっているため問題ないですね。
今回は画面で色の変更を行いましたが、コードを書いて色を変えることもできます。
また、ios13だとは背景色を白に変更しようとしても、
どうしても微かなグレーが残ってしまいます。
これは仕様らしいのでしょうがないかと…
どうしても変更したい場合はコードで無理やり変える人もいるみたいです。
これで以上。最後まで読んでいただきありがとうございました！