【Swift】UIPickerViewの使い方!選択された値を取得する方法

この記事からわかること

  • Swift/UIKitUIPickerView実装方法と使い方
  • 選択時に処理を実行するには?
  • UIPickerViewDelegateUIPickerViewDataSourceとは?

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

SwiftのUIKitで選択可能なピッカービューを構築するUIPickerViewについてまとめていきます。

公式リファレンス:UIPickerView

【Swift UI】Pickerの例

UIPickerView

@MainActor  class UIPickerView : UIView

UIPickerViewUILabelなどと同じUIViewを継承しているUI部品の1つ複数の選択肢から項目を選択できるビューを構築できるクラスです。

おすすめ記事:【Swift/UIKit】UIViewクラスとは?使い方やプロパティまとめ

実装の手順

今回はStoryboardを使用した実装方法です。

  1. StoryboardからUIを配置
  2. UIPickerViewのアウトレット変数を定義
  3. 表示させる項目を定義(dataSource)
  4. デリゲートを指定(delegate)

おすすめ記事:【Swift】delegate(デリゲート)とは?使い方とメリット

実装するにはUITableViewなどと同様にdataSourcedelegateを設定する必要があります。そのためにViewControllerクラスにはUIPickerViewDelegateUIPickerViewDataSourceプロトコルの準拠が必要になります。

おすすめ記事:【Swift UIKit】UITableViewの使い方!リストビューの実装方法

必要となるデリゲートメソッド

2つのプロトコルに準拠させたことでPickerViewを構築するために必要なデリゲートメソッドを呼び出せるので、任意の値や処理を渡してピッカービューの設定をします。最低限必要になるのは以下の3つのメソッドです。

import UIKit

class ViewController: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource {
      
    // 列数 :UIPickerViewDataSource
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        //
    }
    
    // 行数 :UIPickerViewDataSource
    func pickerView(_ pickerView: UIPickerView,numberOfRowsInComponent component: Int) -> Int {
      // 
    }
    
    // 最初に選択状態にする行データ :UIPickerViewDelegate
    func pickerView(_ pickerView: UIPickerView,titleForRow row: Int,forComponent component: Int) -> String? {
      //
    }
}

公式リファレンス:UIPickerViewDelegate
公式リファレンス:UIPickerViewDataSource

Storyboardでの実装方法

実際にStoryboardを使用してPickerViewを実装する方法を見ていきます。

流れ

  1. StoryboardからUIを配置
  2. ViewControllerクラスに各プロトコルを準拠
  3. アウトレット変数の定義
  4. Storyboard(またはviewDidLoad内)から変数とdelegateなどを紐付け
  5. 元データとなる配列を用意
  6. 必要なデリゲートメソッドを定義
【Swift】UIPickerViewの使い方!選択された値を取得する方法 【Swift】UIPickerViewの使い方!選択された値を取得する方法
import UIKit

class ViewController: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource {
    
    // アウトレット変数を定義して紐付け
    @IBOutlet  var pickerView: UIPickerView!
    
    let sourceList  = ["HTML","CSS","PHP","JavaScript","Swift"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // コードで紐付けする場合
        // pickerView.delegate = self
        // pickerView.dataSource = self
    }
    // 列数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    // 列数
    func pickerView(_ pickerView: UIPickerView,numberOfRowsInComponent component: Int) -> Int {
      return sourceList.count
    }
    
    // 最初に選択状態にする行データ
    func pickerView(_ pickerView: UIPickerView,titleForRow row: Int,forComponent component: Int) -> String? {
      return sourceList[row]
    }
}

選択された際に処理を実行する

ピッカーから値を選択された際に任意の処理を実行させるためにはpickerView(_:didSelectRow:inComponent:)を使用します。

func pickerView(_ pickerView: UIPickerView,didSelectRow row: Int,inComponent component: Int){
    print(sourceList[row])
}

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index