【iphoneアプリ開発_初心者必見】UIPickerViewの基礎・基本

UIPickerViewの基礎・基本

生年月日や情報を簡単に選択できる
ドラムロールは汎用性が高いので，ぜひ参考になればと思います

UIPickerViewの基礎・基本
人気の記事！
1) ドラムロールを作ってみよう
2)日付を選んでみよう
3)日付クラスに関して
- 参考リンク
最後に！！
- 皆さんから人気がある記事
- まとめ記事

1) ドラムロールを作ってみよう

UI部品からPicker Viewを選択し，MainStoryBoardに配置しよう

ViewController.swift

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{
    
    //部品の接続
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var pickerView: UIPickerView!
    
    let dataList = [
        "本田","山葉","鈴木","川崎"
    ]
    
    // UIPickerViewの列の数
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    // UIPickerViewの行数(リストの数)
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataList.count
    }
    
    // UIPickerViewの最初の表示
    func pickerView(_ pickerView: UIPickerView,
                    titleForRow row: Int,
                    forComponent component: Int) -> String? {
        
        return dataList[row]
    }
    // UIPickerViewのRowが選択された時の挙動
    func pickerView(_ pickerView: UIPickerView,didSelectRow row: Int,inComponent component: Int) {
        //ラベルの文字を変更
        label.text = dataList[row]
        
    }

    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Delegate設定
        pickerView.delegate = self
        pickerView.dataSource = self
        
        // ViewContorller 背景色
        self.view.backgroundColor = UIColor(red: 0.12, green: 1.0, blue: 0.94, alpha: 1.0)
        // PickerView のサイズと位置
        pickerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 300)
        pickerView.backgroundColor = UIColor(red: 0.69, green: 0.93, blue: 0.9, alpha: 1.0)
        
        // PickerViewはスクリーンの中央に設定
        pickerView.center = self.view.center
        // Label 位置はPickerViewより150上に設定、高さを２行表示分とる
        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 = "バイクの\n販売メーカー"
        
        // フォントサイズを大きく
        label.font = UIFont.systemFont(ofSize: 36)
        // テキストを中央寄せにする
        label.textAlignment = NSTextAlignment.center
        
    }
}

2)日付を選んでみよう

UI部品から Date Picker を選択し，MainStoryBoardに配置しよう
MainStoryBoard

ViewController

import UIKit

class ViewController: UIViewController{
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var Picker: UIDatePicker!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let calendar = Calendar.current
        let date = Date()
        
        // let today = calendar.startOfDay(for:date) 日付の始まり（当日の午前0時0分0秒）を取得
        
        /*Dateが今日か、明日か、昨日か、週末かを判別できます。
        let isToday = Calendar.current.isDateInToday(date)
        let isTomorrow = Calendar.current.isDateInTomorrow(date)
        let isYesterday = Calendar.current.isDateInYesterday(date)
        let isWeekend = Calendar.current.isDateInWeekend(date)
        */
        //let am = calendar.amSymbol(date)
        
        let tomorrow = calendar.date(byAdding: .day,value: 1, to: calendar.startOfDay(for:date))
        label.text = "\(String(describing: tomorrow))"
        
    }
    @IBAction func GetDate(_ sender: Any) {
        label.text = "\(Picker.date)"
        
    }
    
}


class DatePickerKeyboard: UITextField {
    private var datePicker: UIDatePicker!
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commoninit()
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commoninit()
    }
    
    private func commoninit() {
        // datePickerの設定
        datePicker = UIDatePicker()
        datePicker.date = Date()
        datePicker.locale = Locale(identifier: "ja") //日本語に変更
        datePicker.addTarget(self, action: #selector(setText), for: .valueChanged)
        
        //datePicker.datePickerMode = .date
       
        // textFieldのtextに日付を表示する
        setText()
        inputView = datePicker
        inputAccessoryView = createToolbar() //アクセサリービューを読み込む
    }
    
    // キーボードのアクセサリービューを作成する
    private func createToolbar() -> UIToolbar {
        let toolbar = UIToolbar()
        toolbar.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: 44)
        let space = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: self, action: nil)
        space.width = 12
        let flexSpaceItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let todayButtonItem = UIBarButtonItem(title: "今日", style: .done, target: self, action: #selector(todayPicker))
        let doneButtonItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(donePicker))
        
        let toolbarItems = [flexSpaceItem, todayButtonItem, doneButtonItem, space]
        toolbar.setItems(toolbarItems, animated: true)
        
        return toolbar
    }
    
    // キーボードの完了ボタンタップ時に呼ばれる
    @objc private func donePicker() {
        resignFirstResponder()

    }
    // キーボードの今日ボタンタップ時に呼ばれる
    @objc private func todayPicker() {
        datePicker.date = Date()
        setText()
    }
    
    // datePickerの日付けをtextFieldのtextに反映させる
    @objc private func setText() {
        let f = DateFormatter()
        f.dateStyle = .long
        f.locale = Locale(identifier: "ja")
        text = f.string(from: datePicker.date)
        
    }
    
    // クラス外から日付を取り出すためのメソッド
    func getDate() -> Date {
        return datePicker.date
    }
    
    // コピペ等禁止
    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        return false
    }
    // 選択禁止
    /*override func selectionRects(for range: UITextRange) -> [Any] {
        return []
    }*/
    // カーソル非表示
    override func caretRect(for position: UITextPosition) -> CGRect {
        return CGRect(x: 0, y: 0, width: 0, height: 0)
    }
}

NextViewController

import UIKit

class NextViewController: UIViewController{

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var label3: UILabel!
    @IBOutlet weak var label4: UILabel!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let date0 = NSDate() //日付
        label.text = format(date: date0 as Date)
        let date1 = NSDate(timeInterval: 60*60*24*7, since: date0 as Date) //1週間後
        let date2 = NSDate(timeInterval: -60*60*24*7, since: date0 as Date) //1週間前
        let span = date1.timeIntervalSince(date2 as Date) // 1209600秒差
        let daySpan = span/60/60/24 // 14 (日)
        label2.text = String(daySpan) //日付差
        let isSameDay = Calendar.current.isDate(date1 as Date, inSameDayAs: date2 as Date) //同じ日付か判定
        
        let calendar = Calendar(identifier: .gregorian) // 西暦指定(和暦は.japanese)
        let date = calendar.date(from: DateComponents(year: 2016, month: 10, day: 1))
        // -> 2016年10月1日 0時0分
        let ad = calendar.date(byAdding: DateComponents(hour: 1, minute: 1), to: date!)
        // -> 2016年10月1日 1時1分
        label3.text = "\(String(describing: ad))" //date()をStringにして文章にする
        // 差の取得
        let sa = calendar.dateComponents([.day],from: date1 as Date, to: date2 as Date)
        
        label4.text = "\(String(describing: sa))"
    }
    
    func format(date:Date)->String{
        let format = DateFormatter() //フォーマット準備
        format.dateFormat = "yyyy年MM月dd日" //フォーマットの様式指定
        let strDate = format.string(from: date as Date) //フォーマットに日付のデータを入れる
        return strDate
    }
}

DatePickerKeyboardを参考にコードを書いてみよう
UITextField のサブクラスを作成
UIDatePicker 以外でUITextField の値を変更させたくない
キーボード入力時のカーソルやコピペ用UIを以下のコマンドを用いて無効
- canPerformAction
- selectionRects
- caretRect
datePicker.addTarget(self, action: #selector(setText), for: .valueChanged) を初期化時に起動
- UIDatePicker で日付を変更するたびにUITextField の値を変更させるため
ツールバーの「今日」ボタンを押下した時にdatePicker.date にDate() を設定
- ピッカーの値を現在日時に変更