swift,pickerView:ドラムロールの選択をさげるコードがわかりません。完了ボタンを作成したいです。(ストーリーボードは使用してません)

Question

ドラムロールの選択肢で動物の名前をタップすると、その動物の名前が表示され選択肢が閉じるコードを作りたいのですが、下にあるコードでは選択した動物の名前は表示できますが選択肢が消えません。
右上に完了ボタンを作成し、そのボタンをタップするとドラムロールが消えるようにしたいです。

今回はストーリーボードは使わず、コードのみで作成してます。

どなたかお時間がある時に教えていただきたいです。
よろしくお願いします。

import UIKit
 
 class ViewController: UIViewController , UIPickerViewDelegate, UIPickerViewDataSource {
    
    var pickerView = UIPickerView()
    
    var label = UILabel()
    
    let dataList = [
        "いぬ","ねこ","くま","うさぎ",
        "ライオン"   ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        pickerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 300)
        
        pickerView.center = self.view.center
        
        pickerView.delegate = self
        pickerView.dataSource = self
        
        let yPosition = pickerView.frame.origin.y
        label.frame = CGRect(x: 0, y: yPosition - 100, width: self.view.frame.width, height: 100)
        
        label.numberOfLines = 2
        label.text = "動物の種類"
        label.textAlignment = NSTextAlignment.center
        
        self.view.addSubview(pickerView)
        self.view.addSubview(label)
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
   
    func pickerView(_ pickerView: UIPickerView,
                    numberOfRowsInComponent component: Int) -> Int {
        return dataList.count
    }
    
    func pickerView(_ pickerView: UIPickerView,
                    titleForRow row: Int,
                    forComponent component: Int) -> String? {
        
        return dataList[row]
    }
    
    func pickerView(_ pickerView: UIPickerView,
                    didSelectRow row: Int,
                    inComponent component: Int) {
        
        label.text = dataList[row]
    }
    
}

Comments

[TsukubaDepot]

> ドラムロールの選択肢で動物の名前をタップすると、その動物の名前が表示され選択肢が閉じるコードを作りたいのですが、

念のため確認ですが、「タップ」というのは次のどちらになるのでしょうか。
1. ドラッグでPickerView を操作し終えたあとに消したい
2. 移動し終えた後、その項目をタップしたら消したい
のどちらになるのでしょうか。

[naka-1234]

すみません、詳しく書き忘れました。
ご質問ありがとうございます。
選択肢をタップして、例えばうさぎと表示されたら、ドラムロールの左上の完了ボタンをタップするとドラムロールが閉じるようにしたいです。
よろしくお願いします。

[naka-1234]

何度もすみません、左上ではなく右上です。

Answer 1

PickerView に直接ツールバーを追加（addSubView）できれば良いのですが、それはできないようなので、一度 UIVew を生成し、そこにツールバーとピッカービュー両方を入れた後、view に追加する方法で実現できそうです。

• Done Toolbar on UIPickerView

細かい点はコード中のコメントを参考にしてみてください。

import UIKit

class ViewController: UIViewController , UIPickerViewDelegate, UIPickerViewDataSource {
    
    var pickerWithButtonView: UIView!
    // 中略
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // MARK: PickerView, ToolBar 両方の高さを定義しておく
        let pickerViewHeight = CGFloat(300)
        let toolBarHeight = CGFloat(35)
        let pickerWithButtonViewHeight = pickerViewHeight + toolBarHeight

        //　MARK: PickerView と ToolBar の両方を表示するビューを生成する
        pickerWithButtonView = UIView(frame: CGRect(x: 0, y: view.frame.height / 2, width: view.frame.width, height: pickerWithButtonViewHeight))

        // MARK; ツールバーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: pickerWithButtonView.frame.width, height: toolBarHeight))
        let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        // done ボタンを押すと、done() が呼ばれる
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(done))
        // [doneItem, spaceItem] の順にすれば [Done] が左側に来る
        toolbar.setItems([spacelItem, doneItem], animated: true)
        // UIViewに追加する
        pickerWithButtonView.addSubview(toolbar)

        // MARK: PickerView の生成
        // ToolBar の高さの分だけ、Y座標を上げる（表示を下げる）
        pickerView.frame = CGRect(x: 0, y: toolBarHeight, width: pickerWithButtonView.frame.width, height: pickerViewHeight)
        
        pickerView.delegate = self
        pickerView.dataSource = self
        // UIViewに追加する
        pickerWithButtonView.addSubview(pickerView)
        
        //
        let yPosition = pickerWithButtonView.frame.origin.y
        label.frame = CGRect(x: 0, y: yPosition - 100, width: self.view.frame.width, height: 100)
        
        label.numberOfLines = 2
        label.text = "動物の種類"
        label.textAlignment = NSTextAlignment.center
        
        // ToolBar 付きのピッカービューを表示させる
        self.view.addSubview(pickerWithButtonView)
        self.view.addSubview(label)
    }
    
    // [Done] を押した時の処理
    @objc func done() {
        // pickerWithButtonView を親ビューから取り除く
        pickerWithButtonView.removeFromSuperview()
    }
    // 後略
}

ちなみに、[Done]ボタンは右上でも左上でもどちらでも可能です。

##追記

pickerWithButtonView の Y 軸方向の原点を変更すれば、pickerWithButtonView を縦方向に移動させることが可能です。

たとえば、現在はスクリーンサイズの中央を原点にしていますが、

        pickerWithButtonView = UIView(frame: CGRect(x: 0, y: view.frame.height / 2, width: view.frame.width, height: pickerWithButtonViewHeight))

下端（つまり、スクリーンサイズの高さ）からpickerWithButtonView分だけ上に戻った位置にすれば見切れることはなくなるかと思います（その分、上方向の余白は少なくなります）。

        pickerWithButtonView = UIView(frame: CGRect(x: 0, y: view.frame.height - pickerWithButtonViewHeight, width: view.frame.width, height: pickerWithButtonViewHeight))

あるいは、コードで拘束を設定するのが、端末間のスクリーンサイズに左右されずいいかもしれません。

Comments

[naka-1234]

回答ありがとうございます！
完了ボタンできました。
ただ、完了ボタンのツールバーとドラムロールの選択肢の部分が離れてしまい、選択肢だけ画面下に隠れてしまいました。
もしよろしければ、追加で教えてはいただけないでしょうか？
本当に助かりました。
ありがとうございます。

[TsukubaDepot]

回答に追記しましたので参考にしてみていただければと思います。

[naka-1234]

何度もすみません。
ありがとうございます。