21
19

More than 5 years have passed since last update.

【Swift4】キーボードの上にUIToolbarを実装する方法

Last updated at Posted at 2018-02-26

実行環境

【Xcode】Version 9.2
【Swift】Version 4.0.3

概要

iOSキーボードの上にツールバーを追加する方法のメモです。

方法

下準備

適当にUItextFieldを追加しておきます。
a.png

実装

ViewController.swift
class ViewController: UIViewController, UITextFieldDelegate {

    // textFieldのアウトレットを指定
    @IBOutlet weak var textField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        // ツールバーのインスタンスを作成
        let toolBar = UIToolbar()

        // ツールバーに配置するアイテムのインスタンスを作成
        let flexibleItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)
        let okButton: UIBarButtonItem = UIBarButtonItem(title: "OK", style: UIBarButtonItemStyle.plain, target: self, action: #selector(tapOkButton(_:)))
        let cancelButton: UIBarButtonItem = UIBarButtonItem(title: "CANCEL", style: UIBarButtonItemStyle.plain, target: self, action: #selector(tapCancelButton(_:)))

        // アイテムを配置
        toolBar.setItems([flexibleItem, okButton, flexibleItem, cancelButton, flexibleItem], animated: true)

        // ツールバーのサイズを指定
        toolBar.sizeToFit()

        // デリゲートを設定
        textField.delegate = self

        // テキストフィールドにツールバーを設定
        textField.inputAccessoryView = toolBar
    }

    // ボタンを押したときのメソッド
    @objc func tapOkButton(_ sender: UIButton){
        // キーボードを閉じる
        self.view.endEditing(true)
    }
    @objc func tapCancelButton(_ sender: UIButton){
        // テキストフィールドを空にする
        textField.text = ""
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}

完成形

スクリーンショット 2018-02-26 14.06.03.png

21
19
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
19