見出し画像

【徒然iOS】気ままにUIKit89〜Tab Bar Item ボタンの画像やタイトルを好みに合わせて設定〜

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

をハイ、レッツゴ🕺

前準備

念の為、

  1. バックアップ

をやってから本題へ💃

ま、こんな感じで🤖

本題

タブバーアイテムとは、

Tab Bar(以下、タブバー)に配置するボタンやタイトルを持つ部品

⒈とりあえず、新規でタブありのビューを追加〜〜〜

前回、前々回と、こっちの方が楽〜〜〜🕺っと、タブバーコントローラを紹介してるから、
そっちで紹介するね〜〜〜〜

選んで〜〜〜
新規で配置〜〜〜
Attributeのメニュー

念の為、

もう一個ビューを追加して、タブバーを配置してみて、、、
項目は、一致してるから問題なさげ〜〜〜〜

では恒例の、

⒉一覧表

てな感じらしい🤖

設定項目のときは毎回だけど、自分で動かして体感して欲しいので、
今回もコードのところだけやってく〜〜〜〜

Image

⒈コード組み込み

//
//  TestTabBarController.swift
//
import UIKit
class TestTabBarController: UITabBarController{
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        //レンダリングモードをAlwaysOriginalでボタンの画像を登録する。
        tabBar.items![0].image = UIImage(named: "day.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![1].image = UIImage(named: "evening.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![2].image = UIImage(named: "night.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        //選択中のアイテムの画像はレンダリングモードを指定しない。
        tabBar.items![0].selectedImage = UIImage(named: "day.png")
        tabBar.items![1].selectedImage = UIImage(named: "evening.png")
        tabBar.items![2].selectedImage = UIImage(named: "night.png")
    }
}

を参考にコード組み込み〜〜〜〜

class TabBarItemSettingsController: UITabBarController{
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        //レンダリングモードをAlwaysOriginalでボタンの画像を登録する。
        tabBar.items![0].image = UIImage(named: "ちゃん丸")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
        tabBar.items![1].image = UIImage(named: "pinImage")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
        tabBar.items![2].image = UIImage(named: "ナビゲーションバー背景")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
        //選択中のアイテムの画像はレンダリングモードを指定しない。
        tabBar.items![0].selectedImage = UIImage(named: "ちゃん丸")
        tabBar.items![1].selectedImage = UIImage(named: "pinImage")
        tabBar.items![2].selectedImage = UIImage(named: "ナビゲーションバー背景")
    }
}

⒉クラスをコントローラーに適用して、コード的に3つビューが入りそうなんでビューを繋ぐ〜〜〜

てな感じで〜〜〜

⒊シミュレータで実行

出来てるね👀

ブラッシュアップ

後半のコードをコメントアウトすると〜〜〜
てな感じになる〜〜〜

さらに、

てな感じで、タイトルを設定する〜〜
てな感じで、名前も出せる〜〜〜〜
てな感じで各ビューにタブアイテムに設定したのと同じイメージを配置しておくと〜〜〜
分かりやすくなったけど、
確かにさっきコメントアウトしたレンダリング指定なしをした方が
分かりやすいかもしれないね👀
コメントアウトを無しにして〜〜〜
どこを選択してるかがわかるね〜〜〜〜

ま、ここまでやるんなら、

セグメントコントローラ

コイツな

でやった方がいいんじゃねーか🤔
とも思うんだけどね、、、

さてと、後は、恒例の地球儀ボタンを追加して

てな感じで〜〜〜

記事公開後、

ハイ、完了💃
実機も問題無し🕺

今回のコード(まとめ)

class TabBarItemSettingsController: UITabBarController{
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        //レンダリングモードをAlwaysOriginalでボタンの画像を登録する。
        tabBar.items![0].image = UIImage(named: "ちゃん丸")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
        tabBar.items![0].title = "ちゃん丸"
        tabBar.items![1].image = UIImage(named: "pinImage")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
        tabBar.items![1].title = "ダンサー"
        tabBar.items![2].image = UIImage(named: "ナビゲーションバー背景")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
        tabBar.items![2].title = "木の板"
        //選択中のアイテムの画像はレンダリングモードを指定しない。
        tabBar.items![0].selectedImage = UIImage(named: "ちゃん丸")
        tabBar.items![1].selectedImage = UIImage(named: "pinImage")
        tabBar.items![2].selectedImage = UIImage(named: "ナビゲーションバー背景")
    }
    @IBAction func webButton(_ sender: Any) {
        let url = URL(string: tabBarItemSettingsController)
        let safariView = SFSafariViewController(url: url!)
        present(safariView, animated: true)
    }
}

Apple公式

さて、次回は

をレッツゴする🕺

この記事が気に入ったらサポートをしてみませんか?