読者です 読者をやめる 読者になる 読者になる

swiftで入力フォームを作ってみた by web感覚

swift iPhoneアプリ開発

はじめに

やりたかったことは、webサイトでもよくある、テキストボックス、テキストエリア、セレクトボックスをiosアプリでも作りたかった

最初に考えたのが以下です。
テキストボックス : UITextField
テキストエリア:UITextView
セレクトボックス:?

セレクトボックスって何を使えばいいのか、、、ちょっとわからなかったので他のアプリを見てみると別ページへ移動してそこで選択項目がリスト表示されて選択すると元のページに戻る。っていう流れのアプリが多いみたいでした。

テキストエリア、テキストボックスについてはUITextFieldとUITextViewをそのまま使うだけっていう想定だったんですけど、実際つくると問題が、、、

画面下のテキストボックスを選択するとキーボードが出てきて見えなくなっちゃうんですね、、、
で、また調べてみるとみんなキーボードが表示されたら、スクロールビューを使ってスクロールさせて、、、とかやってるみたいです。web感覚でやってきたことが本当に通用にしないなぁと再実感しました。難しい、、、
で、結局。UITextField、UITextViewについても選択したら別ページを表示(UITextField、UITextViewだけがあるページ)して、入力が終わったら元のページに戻す。っていうセレクトボックスと同じような実装にしました。

実装(セレクトボックス)

SampleViewController.swift

class SampleViewController: UIViewController {

    // 選択値
    var selected = "選択してください"

    override func viewDidLoad() {
        super.viewDidLoad()

        self.setView()
    }

    func setView() {

        // プルダウンをボタンで実装
        var buttonSelect: UIButton = UIButton()
        buttonSelect.frame = CGRectMake(x, y, width, height)
        buttonSelect.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
        buttonSelect.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left
        buttonSelect.addTarget(self, action: "clickButtonSelect:", forControlEvents: .TouchUpInside)
        buttonSelect.setTitle(selected, forState: UIControlState.Normal)
        self.view.addSubview(buttonSelect)
    }

    // プルダウン(ボタン)がタップされたらプルダウン用の別画面を開く
    func clickButtonSelect(sender: UIButton) {
        var viewController: SelectViewController = SelectViewController()
        self.navigationController?.pushViewController(viewController, animated: true)
    }

    // プルダウン選択後に戻ってきたら、選択値を取得してviewを再描画します
    override func viewWillAppear(animated: Bool) {
        var appDelegate:AppDelegate = UIApplication.sharedApplication().delegate as! AppDelegate
        self.selected = appDelegate.params
        self.setView()
    }
}

SelectViewController.swift

class SelectViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // 選択項目
    var tableData = ["項目1", "項目2", ・・・]

    override func viewDidLoad() {
        super.viewDidLoad()

        // 普通の省略しますが、プルダウンの選択項目のUITableViewを追加します
    }

    // セルが選択されたときの処理を記述します
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

        // グローバル変数に選択値を保持
        var appDelegate:AppDelegate = UIApplication.sharedApplication().delegate as! AppDelegate
        appDelegate.selected = tableData[indexPath.row]

        // 元の画面に戻す
        self.navigationController?.popViewControllerAnimated(true)
    }
}

わかりやすく、viewもプルダウン1つだけですが基本はこんな感じで実装できるのではないでしょうか。
今回はプルダウンだけ実装してみましたが、UITextView、UITextFieldに関しても流れは同じようなかんじであまり複雑にならずに今回やりたかったことは実装できるかと思います

とはいえなんだかんだいろいろ面倒くさいですね、、、以上です