2024/4/17

【Swift UI/Apple Watch】Pickerの実装方法！緑色の枠の非表示方法と高さ調整

この記事からわかること

Swift UIでApple Watchアプリを開発する方法
Pickerの実装とデザイン
緑色の枠線を非表示にする方法
アイテムの背景色や高さを変更する方法

index

[open]

watchOSでピッカーを実装する方法
緑色の枠線を消したい場合
ピッカーアイテムの背景色を変更する
ピッカーアイテムの高さを変更する
別のスタイルに変更する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
watchOS：10.0
Swift：5.9
macOS：Sonoma 14.1

watchOSでピッカーを実装する方法

watchOSでピッカーを実装するには基本的にSwift UIのPicker構造体を使用して実装することができます。

struct ContentView: View {
    @State  private var selectedLang = "Swift"
    private let langs = ["Swift", "Kotlin", "Dart", "Objective-C", "Java"]
    
    var body: some View {
        VStack {
            Picker(selection: $selectedLang, label: Text("language")) {
                ForEach(langs, id: \.self) { lang in
                    Text(lang)
                }
            }
        }
    }
}

watchOSのPickerはデフォルトがWheelスタイルのデザインになっており、フォーカスが当たっている時に緑色の枠線が表示される状態になります。

緑色の枠線を消したい場合

デフォルトで表示されている緑色の枠線を消したい場合は現在モディファイアからは提供されていないようです。そのためlabelsHiddenでラベルを非表示にして、borderで黒色の枠線を重ねることで消すことができました。

Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(langs, id: \.self) { lang in
        Text(lang)
    }
}.labelsHidden()
    .border(Color.black, width: 5)

ピッカーアイテムの背景色を変更する

中のアイテムの背景色を変更するにはbackgroundモディファイアなどを使用してカスタマイズするだけです。

Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(langs, id: \.self) { lang in
        Text(lang)
            .frame(width: 200)
            .background(.cyan)
            .opacity(0.5)
    }
}.labelsHidden()
    .border(Color.black, width: 5)

ピッカーアイテムの高さを変更する

公式リファレンス：defaultWheelPickerItemHeightメソッド

iOS側のPickerには用意されていませんがwatchOS側にはピッカーアイテムの高さを変更できるdefaultWheelPickerItemHeightモディファイアが用意されています。これを使用することでピッカーアイテムの大きさを自由に変更することができます。

Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(langs, id: \.self) { lang in
        Text(lang)
            .frame(width: 200, height: 50)
            .background(.cyan)
            .opacity(0.5)
    }
}.defaultWheelPickerItemHeight(80)
    .labelsHidden()
    .border(Color.black, width: 5)

別のスタイルに変更する

Wheelスタイル以外に変更したい場合はFormで囲うかpickerStyle(.navigationLink)を指定することで以下のような別画面から選択形式のピッカーに変更することが可能です。

Form {
    Picker(selection: $selectedLang, label: Text("Language")) {
        ForEach(langs, id: \.self) { lang in
            Text(lang)
        }
    } // .pickerStyle(.navigationLink) 
}