iOSアプリでキーボードの「次へ」ボタンを使ってテキストフィールドを順番に移動する方法

iOSアプリ開発において、複数のテキストフィールドが画面に配置されている場合、キーボードの「完了」や「次へ」ボタンをタップするたびに、次のテキストフィールドへ自動的にフォーカスを移動させたいケースはよくあります。本記事では、この機能を実現するためのロジックを、実際のプロジェクト例を通じてわかりやすく解説します。

プロジェクトのセットアップ

まず、以下の手順でXcodeプロジェクトを準備しましょう。

1. 新しいプロジェクトを作成し、ビューコントローラーのストーリーボード上に4つのテキストフィールド（UITextField）をドラッグ＆ドロップで配置します。
2. 各テキストフィールドを1つずつ選択し、アトリビュートインスペクタ（Attribute Inspector）からtagプロパティをそれぞれ「1」「2」「3」「4」に設定します。このタグ番号が、フィールド間の移動順序を決定します。
3. 同じくアトリビュートインスペクタで、Return Keyの項目を「Done」に設定します。
4. 4つのテキストフィールドすべてに対してアウトレット（Outlet）を作成し、ViewControllerクラスに接続します。

アウトレットの定義

ViewControllerクラス内に、以下のようにアウトレットを宣言します。

@IBOutlet weak var tf1: UITextField!
@IBOutlet weak var tf2: UITextField!
@IBOutlet weak var tf3: UITextField!
@IBOutlet weak var tf4: UITextField!

UITextFieldDelegateへの準拠

次に、ViewControllerクラスをUITextFieldDelegateに準拠させる拡張（extension）を作成し、テキストフィールドのリターンキーが押されたときに呼ばれる「textFieldShouldReturn」メソッドを実装します。

extension ViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool { }
}

デリゲートの設定

viewDidLoad()メソッド内で、各テキストフィールドのdelegateをselfに設定します。これにより、キーボードイベントをViewController側で受け取れるようになります。

override func viewDidLoad() {
    super.viewDidLoad()
    self.tf1.delegate = self
    self.tf2.delegate = self
    self.tf3.delegate = self
    self.tf4.delegate = self
}

フォーカス移動ロジックの実装

ここが本記事の核心部分です。textFieldShouldReturnメソッド内に、以下のコードを追加します。

let nextTag = textField.tag + 1
let nextTF = textField.superview?.viewWithTag(nextTag) as UIResponder!
if nextTF != nil {
    nextTF?.becomeFirstResponder()
} else {
    textField.resignFirstResponder()
}
return false

処理の流れ：

• 現在フォーカスされているテキストフィールドのタグ番号に「+1」した値を、次のタグとして取得します。
• そのタグ番号を持つビューをsuperviewから検索し、次のテキストフィールドとして取得します。
• 次のテキストフィールドが存在する場合は、「becomeFirstResponder()」を呼び出してフォーカスを移動します。
• 最後のフィールド（次のタグが存在しない場合）は、「resignFirstResponder()」を呼び出してキーボードを閉じます。

完成版のViewControllerコード

以上の実装をすべてまとめると、ViewControllerクラス全体は以下のようになります。

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var tf1: UITextField!
    @IBOutlet weak var tf2: UITextField!
    @IBOutlet weak var tf3: UITextField!
    @IBOutlet weak var tf4: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.tf1.delegate = self
        self.tf2.delegate = self
        self.tf3.delegate = self
        self.tf4.delegate = self
    }
}
extension ViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        let nextTag = textField.tag + 1
        let nextTF = textField.superview?.viewWithTag(nextTag) as UIResponder!
        if nextTF != nil {
            nextTF?.becomeFirstResponder()
        } else {
            textField.resignFirstResponder()
        }
        return false
    }
}

動作確認

Xcodeとシミュレータでの実行結果は以下の画像のとおりです。「完了」ボタンをタップするたびに、タグ番号の順序に従って次のテキストフィールドへフォーカスが移動し、最後のフィールドではキーボードが閉じることが確認できます。

この手法を使えば、フォーム入力画面などでユーザーがスムーズに項目間を移動できるようになり、UXの向上につながります。テキストフィールドの数が増減しても、tag番号を正しく設定しておけば同じロジックで対応可能です。