• 2023/10/24
• 4分

【Swift/UIKit】ActionSheetPicker_3_0の使い方！ピッカーシートを簡単に実装

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

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

posted withアプリーチ

環境

• Xcode：14.3.1
• iOS：17.0
• Swift：5.8.1
• UIKit

ActionSheetPicker_3_0とは？

公式リファレンス：ActionSheetPicker_3_0

ActionSheetPicker_3_0はSwift/Objective-Cで使用できるピッカーシートを実装できるライブラリです。ActionSheetPickerではUIPickerView + UIActionSheetを使ってピッカーシートを定義しており、開発者は表示させたいデータや完了時の処理などを渡すだけで簡単に実装することが可能になっています。

導入方法

ActionSheetPicker_3_0ではCarthage/Swift Package Manager/Cocoa Podsで導入可能になっています。Cocoa Podsではpod 'ActionSheetPicker-3.0'を追加してpod installを実行します。

PodFile
pod 'ActionSheetPicker-3.0'

使用する際にはimport文を忘れずに追加しておきます。

import ActionSheetPicker_3_0

導入完了後に最新のXcodeでビルドを試みるとFile not found: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphonesimulator.aというエラーが発生します。これはMinimum Deploymentsが低いことが原因なのでCocoa PodsのActionSheetPickerのMinimum Deploymentsを11.0などにあげることで解消します。

ピッカーシートの実装方法

シンプルなピッカーを実装するにはActionSheetStringPickerを使用します。静的メソッドのshowメソッドの引数にタイトルやピッカー対象の値などを渡します。ピッカー対象の値は配列形式で渡せば文字列でも数値でもOKです。

@IBAction  func showStringPicker(_ sender: Any ){
    ActionSheetStringPicker.show(withTitle: "月",        // タイトル
                                  rows: Array(1...12),   // ピッカー対象の値
                                  initialSelection: 0,   // 初期値
                                  doneBlock: nil,        // Doneボタン押下時の処理
                                  cancel: nil,           // キャンセルボタン押下時の処理
                                  origin: self.view)     // ピッカーを表示したいビュー
}

ボタンのアクションの中に上記のように仕込めばボタンタップ時に以下のように下からピッカーシートが表示されるようになります。

完了ボタン押下時の処理を実装する

完了ボタン押下時の処理を実装したい場合はActionSheetStringPickerの場合はActionStringDoneBlock型のクロージャを定義します。引数から対象のピッカーと値、インデックスを取得することが可能です。

@IBAction  func showStringPicker(_ sender: Any ){
    let doneBlock: ActionStringDoneBlock = {
        picker, indexes, values in
        print("values = \(values)")
        print("indexes = \(indexes)")
        print("picker = \(picker)")
        return
    }
    
    ActionSheetStringPicker.show(withTitle: "月",
                                  rows: Array(1...12),
                                  initialSelection: 0,
                                  doneBlock: doneBlock,
                                  cancel: nil,
                                  origin: self.view)
}

日付ピッカーを実装する

日付ピッカーを実装するにはActionSheetDatePickerを使用します。静的メソッドのshowを使用せずともインスタンスを作成してからshowメソッドで表示させることも可能です。これは日付ピッカーだからではなく全てに該当します。

@IBAction  func showDatePicker(_ sender: Any) {
    let datePicker = ActionSheetDatePicker(title: "Select Date",
                                            datePickerMode: .date,
                                            selectedDate: Date(),
                                            doneBlock: { picker, value, index in
        if let selectedDate = value as? Date {
            let formatter = DateFormatter()
            formatter.dateFormat = "yyyy-MM-dd"
            let formattedDate = formatter.string(from: selectedDate)
            print("Selected date: \(formattedDate)")
        }
        return
    },
                                            cancel: nil,
                                            origin: self.view)
    datePicker?.show()
}

マルチピッカーを実装する

単体のピッカーではなく複数の値を選択できるマルチピッカーを実装するにはActionSheetMultipleStringPickerを使用します。引数のrowsには入れ子になった配列を渡すことが可能になり、initialSelectionには入れ子になっている分の初期値を渡します。

@IBAction  func showMultipleStringPicker(_ sender: Any ){
    
    let doneBlock: ActionMultipleStringDoneBlock = {
        picker, indexes, values in
        print("values = \(values)")
        print("indexes = \(indexes)")
        print("picker = \(picker)")
        return
    }
    
    let rows = [
        ["Swift", "Kotlin", "Dart"],
        ["iOS", "Android", "Web"]
    ]
    ActionSheetMultipleStringPicker.show(withTitle: "OS",
                                          rows: rows,
                                          initialSelection: [2, 2],
                                          doneBlock: doneBlock,
                                          cancel: nil,
                                          origin: self.view)
    
}

完了ブロック内で受け取れる値valuesなどを配列で値が格納されるようになります。

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

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