【SwiftUI入門】Toggleをカスタマイズできるようにする
この記事の目次
Toggleをカスタマイズするには
Toggleをカスタマイズするには、まずToggleStyleというプロトコルに準拠した構造体を作ります。
構造体を作るには
| struct 構造体の名前: ToggleStyle { func makeBody(configuration: Configuration) -> some View { 作りたいToggle } } |
といったように記述します。
この構造体を使うにはtoggleStyleというモディファイアを使って
| Toggle(“Toggleのラベル”, isOn: $bool型の変数) .toggleStyle(構造体の名前()) |
と記述します。
実際にやってみる
それでは、実際にやってみましょう。
SwiftUIのプロジェクトを作成してください。
今回は男性か女性かを選択できるToggleを作ろうと思います。
まずはToggleStyleに準拠した構造体を作ります。
ContentViewの下に
| struct GenderToggleStyle: ToggleStyle { func makeBody(configuration: Configuration) -> some View { HStack { Button { configuration.isOn.toggle() } label: { Text(“男性”) } .disabled(configuration.isOn) Button { configuration.isOn.toggle() } label: { Text(“女性”) } .disabled(!configuration.isOn) } } } |
と記述しましょう。
このコードはToggleStyleというプロトコルに準拠した
GenderToggleStyleという名前の構造体です。
ToggleStyleに準拠した構造体はmakeBodyという関数を作る必要があります。
この関数は戻り値に何らかのViewを取ります。
このViewが後にカスタマイズしたToggleとして表示されます。
引数にはConfiguration型のconfigurationを取ります。
この引数を使えばToggleのプロパティを取得できます。
例えば、configuration.isOnと記述することでToggleが現在ONなのかOFFなのか取得することができます。
次に、{ }の中にはToggleをカスタマイズする内容を入れます。
今回は、横に男性と女性を選べるボタンを配置したいので、HStackで囲っています。
左側には男性を選択できるボタンを配置します。
このボタンは見た目が男性というTextで
ボタンを押したら、toggleメソッドによってToggleのON / OFFが逆になります。
またdisabled(configuraion.isOn)と記述しているので、
ToggleがONの時は押せなくなります。
押せなくなっているときは選択されている状態とします。
次に、右側には女性のボタンを作成します。
ラベルの内容以外はほとんど同じですが、違う点としてはdisabledの引数です。
『!』がついているので、反対の意味になり、女性の場合はToggleがOFFの時に押せなくなります。
このように記述することで、常にどちらか一方だけが選択されているように見せることができます。
次に、このカスタマイズしたToggleを使ってみましょう。
まずはToggleで使うためのBool型の変数を作りましょう。
ContentViewの中に
| @State var isMan = true |
と記述しましょう。
この記述はisManという名前の
Bool型の変数を作るといった内容です。
初期値にはtrueを入れています。
また、@Stateがついているので、
構造体の中でも値を変更することができます。
それでは、カスタマイズしたToggleを使ってみましょう。
bodyの中の記述を
| Toggle(“Toggle”, isOn: $isMan) .toggleStyle(GenderToggleStyle()) |
と書き換えましょう。
この記述はToggleを作って、
そのToggleに対して、先ほど作ったGenderTogleStyleを適用するといった記述です。
GenderToggleStyleの適用はtoggleStyleモディファイアを使って記述しています。
このToggleはGendeToggleStyleで記述したToggleと同じになっているはずです。
プレビューで確認してみると、同じになっているのがわかりますね。
ボタンを押してみると、ちゃんと切り替わるはずです。
このようにしてToggleをカスタマイズすることができます。