• 2024/4/17
• 3分

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

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

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

posted withアプリーチ

環境

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

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

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

おすすめ記事：【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) 
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。