Corredor

ウェブ、プログラミングの勉強メモ。

Swift iOS アプリで Storyboard を使った UITabBar の制御

Storyboard を使って UITabBar を配置し、タブバーのボタンごとに処理をさせてみた。

環境情報

Storyboard で UITabBar を配置する

まずは UITabBar を配置してみる。

Main.storyboard を開き、「Object Library」から「Tab Bar」を選択して画面にドラッグ & ドロップする。Tab Bar は適当に画面下部に配置しよう。

Tab Bar Item を編集する

Tab Bar の各アイコンのことは、Tab Bar Item と呼ぶ。

アイコンを増やしたい時は、Tab Bar を2回クリックすると、個別のアイテム UITabBarItem を選択できるので、Option を押しながら横にドラッグすると増殖させられる。

Tab Bar Item を選択して「Attributes Inspector」を選択すると、アイコンとラベル、バッジの表示内容などを変更できる。「System Item」からどれかを選ぶと、アイコンとラベルのテンプレが使える。

このあと個々の Tab Bar Item を区別するために、「Bar Item」にある「Tag」の数値を、アイテムごとに任意のモノに設定しておこう。

Tab Bar Item ごとに処理を振り分ける

Tab Bar Item ごとに処理を振り分けるには、ViewController を以下のように実装する。

class ViewController: UIViewController, UITabBarDelegate {
  // タブバー : Storyboard より Control を押下しながらドラッグし、参照を得る
  @IBOutlet var myTabBar: UITabBar!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // タブバーの処理のデリゲートを設定する
    myTabBar.delegate = self
  }
  
  // タブバーのボタンを押した時
  func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
    // item.tag の数値を見て押下されたボタンを判別する
    switch item.tag {
      case 1:
        // UITabBarItem 1 がタップされた
      case 2:
        // UITabBarItem 2 がタップされた
      case 3:
        // UITabBarItem 3 がタップされた
      default:
        print("どのボタンでもない")
    }
  }
}

なお、Swift の switchbreak を書く必要がない。逆にフォールスルーさせたい時は fallthrough と明示的に書いてやる。

他にも、myTabBar.items![0] のようにすれば、UITabBar から UITabBarItem を配列チックに取得できる。

選択しているアイテムをコード側で変更するには、myTabBar.selectedItem = myTabBar.items![1] のように実装する。

現場のためのSwift4 Swift4.1+Xcode9.3対応

現場のためのSwift4 Swift4.1+Xcode9.3対応