[Swift]UITextFieldを入力してる際の項目間の移動ができるボタンを作ってみた。

みなさんこんにちは。今日はSwiftのUITextFieldとUIButtonを使ってストーリーボードを使わず項目間の移動をすることができるボタンを作成していきます。

はじめに

スマートフォンアプリを使って複数項目以上を入力するときにいちいち改行してキーボード下げて、また次のTextFieldをタップしてっていうこの動作面倒に感じたことはありませんか？
僕は結構不便に感じていました。なので、今回は最近良く見かけるボタンを押すことで次の項目に移動できるボタンを作成していきます。

実装開始

準備段階

とりあえず今回使うUITextFieldを作成していきます。三つほど用意しましょう。

//起動している端末の画面サイズを取得する
    let screenSize: CGSize =    UIScreen.mainScreen().bounds.size
    let screenWidth = screenSize.width
    let screenHeight = screenSize.height

    let textField001 = UITextField(frame:CGRectMake(0,0,screenWidth/2,screenHeight/8))
    textField001.delegate = self
    textField001.backgroundColor = UIColor.redColor()
    textField001.layer.position = CGPoint(x:screenWidth/2 ,y:screenHeight/8)
    //TextFieldのタグ番号
    textField001.tag = 1
    self.view.addSubview(textField001)

    let textField002 = UITextField(frame: CGRectMake(0,0,screenWidth/2,screenHeight/8))
    textField002.delegate = self
    textField002.backgroundColor = UIColor.greenColor()
    textField002.layer.position = CGPoint(x:screenWidth/2 ,y:screenHeight/2)
    //TextFieldのタグ番号
    textField002.tag = 2
    self.view.addSubview(textField002)

    let textField003 = UITextField(frame: CGRectMake(0,0,screenWidth/2,screenHeight/8))
    textField003.delegate = self
    textField003.backgroundColor = UIColor.redColor()
    textField003.layer.position = CGPoint(x:screenWidth/2 ,y:screenHeight/1.5)
    //TextFieldのタグ番号
    textField003.tag = 3
    self.view.addSubview(textField003)

ポイント

ここでのポイントはTextFieldだけでなくほとんどのオブジェクトは オブジェクト名.tag で番号管理することができることです。
この部分は後から重要になってきますので忘れないでください。

項目移動をするボタンとそれを追加するViewを作成する

TextFieldを作成し終わった後は実際に項目移動をすることができるボタンとそれを追加するビューを作成していきます。

        //ボタンを追加するビュー
        let myKeyboard = UIView(frame: CGRectMake(0, 0, 320, 40))
        myKeyboard.backgroundColor = UIColor.lightGrayColor()

        //次の項目に移動するボタン
        let nextText = UIButton(frame: CGRectMake(50, 5, 30, 30))
        nextText.setTitle(">", forState: .Normal)
        nextText.layer.cornerRadius = 2.0
        //ボタンアクション
        nextText.addTarget(self, action: "onClickNext:", forControlEvents: .TouchUpInside)

        //ビューに追加する
        myKeyboard.addSubview(nextText)

        //前の項目に移動するボタン
        let prevText = UIButton(frame: CGRectMake(15, 5, 30, 30))
        prevText.setTitle("<", forState: .Normal)
        prevText.layer.cornerRadius = 2.0
        //ボタンアクション
        prevText.addTarget(self, action: "onClickPrev:" , forControlEvents: .TouchUpInside)

        //ビューに追加する
        myKeyboard.addSubview(prevText)

ボタンの実装

上記を入力し終わってもまだ、TextFieldにボタンは追加されていません、さらにボタンを押してもまだアクションがありません。
ここではボタンの押したときに起こるアクションと実際にボタンを実装していく作業を説明していきます。
先ほどの項目でボタンアクションを設定したと思います。なので、そのボタンを押したときの呼ばれる関数の中身を書いていきましょう

 func onClickNext(sender: UIButton){
        self.view.endEditing(true)
        switch now {
        case 1:
            textField002.becomeFirstResponder()
        case 2:
            textField003.becomeFirstResponder()
        case 3:
            textField001.becomeFirstResponder()
        default:
            print("テキストないです")
        }
    }

    func onClickPrev(sender: UIButton){
        self.view.endEditing(true)
        switch now {
        case 1:
            textField003.becomeFirstResponder()
        case 2:
            textField001.becomeFirstResponder()
        case 3:
            textField002.becomeFirstResponder()
        default:
            print("テキストないです")
        }

    }

ん？？？nowってなんだ？と思われ方これから説明していきますので、少々お待ちを。
ここで実装していることは先ほど作成したTextFieldのタグ番号を受け取ってそこから現在入力している項目がどこかを判断し、次の項目もしくは前の項目に移動しています。

func textFieldDidBeginEditing(textField: UITextField){
        now =  textField.tag
    }

DidBeginEditingはTextFieldが編集される際に呼び出される関数です。この関数によって現在入力しているTextFieldのタグ番号をnowに保存します。

ポイント

オブジェクト名.becomeFirstResponder()でキーボードを出し、編集中にすることができます。

TextFieldに作成したものを追加

ここまでくれば後は簡単です。作成したビューとボタンをTextFieldに追加してあげましょう。

    textField001.inputAccessoryView = myKeyboard
    textField002.inputAccessoryView = myKeyboard
    textField003.inputAccessoryView = myKeyboard

追加されるTextField.inputAccessoryView = 追加したいView でキーボードにボタンなどを追加することができます。

まとめ

今回はUITextFieldのtagを使って項目間の移動を実装しました。リターンを押すと次のUITextFieldに移動するようにしてもいいかもしれないですね。

完成版

    private var textField001: UITextField!
    private var textField002: UITextField!
    private var textField003: UITextField!
    private var now: Int!

    override func viewDidLoad() {
        super.viewDidLoad()

        now = 0
        self.view.backgroundColor = UIColor.whiteColor()

        let screenSize: CGSize = UIScreen.mainScreen().bounds.size
        let screenWidth = screenSize.width
        let screenHeight = screenSize.height

        let myKeyboard = UIView(frame: CGRectMake(0, 0, 320, 40))
        myKeyboard.backgroundColor = UIColor.lightGrayColor()

        let myButton = UIButton(frame: CGRectMake(300, 5, 70, 30))
        myButton.backgroundColor = UIColor.darkGrayColor()
        myButton.setTitle("完了", forState: .Normal)
        myButton.layer.cornerRadius = 2.0
        myButton.addTarget(self, action: "onClickMyButton:", forControlEvents: .TouchUpInside)
        myKeyboard.addSubview(myButton)

        let nextText = UIButton(frame: CGRectMake(55, 5, 30, 30))
        nextText.setTitle(">", forState: .Normal)
        nextText.layer.cornerRadius = 2.0
        nextText.addTarget(self, action: "onClickNext:", forControlEvents: .TouchUpInside)
        myKeyboard.addSubview(nextText)

        let prevText = UIButton(frame: CGRectMake(15, 5, 30, 30))
        prevText.setTitle("<", forState: .Normal)
        prevText.layer.cornerRadius = 2.0
        prevText.addTarget(self, action: "onClickPrev:", forControlEvents: .TouchUpInside)
        myKeyboard.addSubview(prevText)

        textField001 = UITextField(frame: CGRectMake(0,0,screenWidth/2,screenHeight/8))
        textField001.delegate = self
        textField001.backgroundColor = UIColor.redColor()
        textField001.layer.position = CGPoint(x:screenWidth/2, y:screenHeight/8)
        textField001.tag = 1
        textField001.inputAccessoryView = myKeyboard
        self.view.addSubview(my1)


        textField002 = UITextField(frame: CGRectMake(0,0,screenWidth/2, screenHeight/8))
        textField002.delegate = self
        textField002.backgroundColor = UIColor.greenColor()
        textField002.layer.position = CGPoint(x:screenWidth/2, y:screenHeight/2)
        textField002.tag = 2
        textField002.inputAccessoryView = myKeyboard
        self.view.addSubview(my2)


        textField003 = UITextField(frame: CGRectMake(0,0,screenWidth/2, screenHeight/8))
        textField003.delegate = self
        textField003.backgroundColor = UIColor.yellowColor()
        textField003.layer.position = CGPoint(x:screenWidth/2, y:screenHeight/1.5)
        textField003.tag = 3
        textField003.inputAccessoryView = myKeyboard
        self.view.addSubview(my3)

        // Do any additional setup after loading the view, typically from a nib.
    }

    func onClickMyButton(sender: UIButton){
        self.view.endEditing(true)
    }

    func textFieldReturn(textField: UITextField) -> Bool {
        self.view.endEditing(true)
        return false
    }

    func textFieldDidBeginEditing(textField: UITextField){
        now =  textField.tag
    }

  func onClickNext(sender: UIButton){
        self.view.endEditing(true)
        switch now {
        case 1:
            textField002.becomeFirstResponder()
        case 2:
            textField003.becomeFirstResponder()
        case 3:
            textField001.becomeFirstResponder()
        default:
            print("テキストないです")
        }
    }

    func onClickPrev(sender: UIButton){
        self.view.endEditing(true)
        switch now {
        case 1:
            textField003.becomeFirstResponder()
        case 2:
            textField001.becomeFirstResponder()
        case 3:
            textField002.becomeFirstResponder()
        default:
            print("テキストないです")
        }

    }