1

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

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

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

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

よろしくお願いします。

IMG_0638.JPG

1 件の回答 1

1

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

SelectionField.swift UITextFieldのサブクラス

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
    }

}

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

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]
    }

}

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

3
  • さん、ありがとうございます!!!私のイメージしたものがまさに、といった感じでした。ひとつひとつのコードを理解し、自分なりにカスタマイズしたいと思いますm(_ _)m なお、「SelectionField.swift」のInitializeの際のsetupを削除し、Storyboard上でTextFieldを貼り付け、IBOutletで接続し(customField1, customField2とでもして)、ViewController内のviewDidLoad内で、削除したsetupのコードのようなカタチでcustomField1およびcustomField2の中に入る配列を定義したらうまくいきました!
    – kogax
    Commented 2015年5月12日 8:09
  • なお、お時間ありますときに、 ①Storyboardで、TextFieldを画面に貼り付ける ② ViewControllerへ接続する:「@IBOutlet weak var customField: SelectionField!」 ③viewDidLoad内で、customField.items = ["Spring1", "Summer1", "Fall1", "Winter1"]のようなカタチでセットできる方法があれば教えて頂けたら嬉しいですm(_ _)m ご丁寧にありがとうございます。本当に勉強になりました。
    – kogax
    Commented 2015年5月12日 8:12
  • 時間があってもやりません。あしからず。
    – Harawo
    Commented 2015年5月12日 8:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。