10064


Xcode 6.3でiPhoneアプリを開発しています。

その中で、複数の値を入力させる画面があります。  
直接入力してもらうのではなく、こちらが用意した値の中から選ぶカタチの入力方法を実装したいです。

[このページ](http://qiita.com/osamu1203/items/6dedc01e3b975a0ceec4)を参考に少し修正し、  
1. TextFieldをクリック  
2. Modalで出現した複数の値から、タップで選択  
3. 最初のTextFieldに反映  
というやり方は実現できたのですが、これを1つのコンポーネントとして切り出し、選択肢を配列として渡せばすぐに同様のTextFieldが作成できるようなものを実装したいです。  
どのように作成したらよいか困っています。

イメージは、画像の通りなのですが、日本語・英語ともに検索してもなかなかいい解が見つかりませんので、サンプルコードなど教えて頂けたらとてもうれしいです。

よろしくお願いします。

![IMG_0638.JPG](https://qiita-image-
store.s3.amazonaws.com/0/1307/af0d68c6-0e41-9f77-edae-7e3fdf115659.jpeg)


CC BY-SA 3.0
2015-05-11T08:24:46.903
10037
2015-05-12T01:44:43.647
2015-05-11T09:57:57.063
7570
7570
question
swift iphone ios8
TextFieldへ入れる値を、Modalで候補を表示し選ばせる仕組みのカスタムクラス化


ある程度あなたの要望を取り入れたサンプルを作ってみました。完全におなじとはいきません。テキストフィールドをタップしたら、モーダルビューが開くのではなく、カスタムキーボードが開きます。これは、テキストフィールドをタップしたらキーボードが開くという、デフォルトの動作を抑止するのがわからなかったことと、ユーザインターフェイスとして、画面全部を覆うモーダルビューより、半分以上見えるカスタムキーボードのほうが、優れていると判断したためです。項目の選択には、ピッカービューを用いました。「Input」ボタンを押すと、テキストフィールドに選択項目を入力し、カスタムキーボードが閉じます。

**SelectionField.swift** UITextFieldのサブクラス

[code]

    import UIKit
    
    class SelectionField: UITextField {
        // プログラムでイニシアライズするとき
        override init(frame: CGRect) {
            super.init(frame: frame)
    
            setup()
        }
        // Storyboardから生成する時、こちらのイニシアライザが呼ばれる。
        required init(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
    
            setup()
        }
        // プログラム、Storyboardいずれから生成してもいいように、初期化処理を関数化しています。
        private func setup() {
            // カスタムキーボードを生成。
            let keyboardView = KeyboardView()
            // テキスト入力先を、じぶんに設定
            keyboardView.textInput = self
            // 選択項目を、配列で指定。
            keyboardView.items = ["Spring", "Summer", "Fall", "Winter"]
            // カスタムキーボードをkeyboardViewとする。
            self.inputView = keyboardView
        }
    
    }
    
[/code]

**KeyboardView.swift** カスタムキーボードのクラス

[code]

    import UIKit
    
    class KeyboardView: UIView, UIPickerViewDelegate, UIPickerViewDataSource {
        // 入力先のテキストフィールド
        var textInput: UITextField!
        // 選択項目の配列
        var items = [String]()
    
        private var pickerView: UIPickerView!
        // メインのイニシアライザ
        override init(frame: CGRect) {
            super.init(frame: frame)
            // Inputボタンの生成
            let theButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
            theButton.frame = CGRectMake(8.0, 4.0, 88.0, 36.0)
            theButton.setTitle("Input", forState: UIControlState.Normal)
            theButton.setTitleColor(self.tintColor, forState: UIControlState.Normal)
            theButton.showsTouchWhenHighlighted = true
            theButton.addTarget(self, action: "inputText:", forControlEvents: UIControlEvents.TouchUpInside)
            self.addSubview(theButton)
            // ピッカービューの生成
            pickerView = UIPickerView(frame: CGRectMake(0.0, 44.0, frame.size.width, 126.0))
            pickerView.delegate = self
            pickerView.dataSource = self
            self.addSubview(pickerView)
        }
        // コンビニイニシアライザ
        convenience init() {
            self.init(frame: CGRectMake(0.0, 0.0, 320.0, 178.0))
        }
        // このイニシアライザではなにもしないけど、requiredなので、実装しておく
        required init(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
        // Button Action
        func inputText(sender: AnyObject) {
            textInput.text = items[pickerView.selectedRowInComponent(0)]
            textInput.resignFirstResponder()
        }
    
        // PickerView Delegate and DataSource
        func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
            return 1
        }
    
        func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            return items.count
        }
    
        func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
            return items[row]
        }
    
    }
    
[/code]

まだ八分のできという感じですが、とりあえずこれで動きますので、参考にしてください。両swiftファイルをプロジェクトに追加したら、Storyboardで、テキストフィールドを貼り付け、クラスを`SelectionField`に変更するだけです。


CC BY-SA 3.0
2015-05-12T01:44:43.647
10064
2015-05-12T01:44:43.647
7362
10037
answer