Swift・UIBarButtonItemのtitleを変更する。

• facebook

こんにちは、オフィス狛 技術部のpinoです。

この度、初めてiOSアプリの開発に携わることができました。

まだまだ勉強中の身ですが、今回は「UIBarbuttonItemのtitleを変更する方法」について紹介したいと思います！

方法

早速ですが、UIBarbuttonItemのtitle変更方法です。

    private func setBarButtonItem() {
        // UIBarbuttonItemのactionを設定
        let button = UIBarButtonItem(title: "タイトル", style: .plain, target: self, action: #selector(self.buttonTapped(_:)))
    }
 
    @objc func buttonTapped(_ sender: UIBarButtonItem) {
        // 変更後のタイトルを設定
        sender.title = "変更後のタイトル"
    }

タップ時の処理でUIBarButtonItemを引数にとって、
(仮引数名がsenderの場合)sender.title = "hoge"としてあげることでtitleの変更ができます。

...思いのほか、すごく簡単でしたね！
せっかくなので、ここからはこのtitle変更を活かしたものを作ってみたいと思います。

作るもの

以下のようなものを作っていきます。

1. ・画面真ん中にTextFieldを配置
2. ・TextField押下でキーボード表示。このキーボードの上にUIToolbarを配置
3. ・UIToolbar上に並んでいるUIBarButtonItemタップで、キーボードタイプを切り替え

UIBarbuttonItemのtitle変更は、「UIBarButtonItemタップ」で発火するようにしてみます。

準備

Interfaceに「Storyboard」を選択して、プロジェクトを作成します。

画面真ん中にTextFieldを置いて、Keyboard Typeを「Number Pad」にしておきます。

ViewControllerで、TextFieldにUIToolbarを追加します。

ViewController.swift

import UIKit
 
class ViewController: UIViewController {
 
    @IBOutlet weak var sampleTextField: UITextField!
 
    override func viewDidLoad() {
        super.viewDidLoad()
        self.setToolbar()
    }
    
    private func setToolbar() {
 
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
 
        let inputSwitchButton = UIBarButtonItem(title: "英数字入力に切り替え", style: .plain, target: self, action: nil)
        let space = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
 
        toolbar.items = [space, inputSwitchButton]
 
        self.sampleTextField.inputAccessoryView = toolbar
    }
}

ここまでで、「英数字入力に切り替え」というtitleのUIBarButtonItemが表示されるようになりました。

UIBarbuttonItemのtitle変更

UIBarButtonItemタップ時の処理を定義します。

ViewController.swift

import UIKit
 
class ViewController: UIViewController {
 
    @IBOutlet weak var sampleTextField: UITextField!
    // 中略
    private func setToolbar() {
 
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
 
        let inputSwitchButton = UIBarButtonItem(title: "英数字入力に切り替え", style: .plain, target: self, action: #selector(self.inputSwitchButtonTapped(_:)))  // 🍀変更
        let space = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
 
        toolbar.items = [space, inputSwitchButton]
 
        self.sampleTextField.inputAccessoryView = toolbar
    }
 
    // 🍀追加
    @objc func inputSwitchButtonTapped(_ sender: UIBarButtonItem) { 
        sender.title = "数字入力に切り替え"
    }
}

inputSwitchButtonTapped()を定義して、その中でtitleの変更を行うようにしました。

さらに、inputSwitchButtonの#selectorに inputSwitchButtonTapped()を設定することで、
ボタンタップ時にtitleが「数字入力に切り替え」へと変更されるようになります。

ここまでで、実際の動きは以下のようになります。

１回タップした後は、特に変化がありませんね。

今回はtitleと一緒にKeyboard Typeも変更したいので、inputSwitchButtonTapped()を以下のように修正します。

    @objc func inputSwitchButtonTapped(_ sender: UIBarButtonItem) {
        // キーボードが表示されたままだとKeyboard Typeの変更が反映されないのでフォーカスを外す
        self.sampleTextField.resignFirstResponder()
        
        // 🍀以下の分岐を追加
        if self.sampleTextField.keyboardType == .numberPad {
            sender.title = "数字入力に切り替え"
            self.sampleTextField.keyboardType = .namePhonePad
        } else if self.sampleTextField.keyboardType == .namePhonePad {
            sender.title = "英数字入力に切り替え"
            self.sampleTextField.keyboardType = .numberPad
        }
        
        // Keyboard Typeを切り替えた後に再度フォーカスする
        self.sampleTextField.becomeFirstResponder()
    }

（フォーカスのつけ外しについては、コメントの通りです）
現在のKeyboard Typeを判定して、titleとKeyboard Typeが切り替わるようにしました。

完成！

完成形は、以下のようになります。

以上、UIBarbuttonItemのtitleを変更する方法について紹介しました。
参考になるとうれしいです。

ios , Swift