Swift BottomNavigationBar で特定のItemだけ画像で表示するやり方

Question

いつもお世話になっております。

表題の件で分からないため本件を立てております。
特定のItemだけ画像で表示しようとしていて、色々調査した結果レンダリングモードというUIImageの表示の仕方を変更すれば実現できそうだと思い、実装したのですがうまく反映されていません、、

公式サイトは以下です。
https://developer.apple.com/documentation/uikit/uiimage/renderingmode

念のため申し上げますと、bottomnavigationbarはGoogleが提供しているマテリアルデザインを採用しています。
詳細は以下です。
https://material.io/develop/ios/components/bottomnavigation

下記が実際に記述しているコードです。storyboardは何もいじっておりません。

viewController

import UIKit
import MaterialComponents.MaterialBottomNavigation
import MaterialComponents
import IconFontStack

class ViewController: UIViewController {
    
    let bottomNavBar = MDCBottomNavigationBar()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        viewDidLoadNavigation()
        
    }
    
     func viewDidLoadNavigation() {
        
        let size = bottomNavBar.sizeThatFits(view.bounds.size)
        
        let bottomNavBarFrame = CGRect(x: 0,y: view.bounds.height - size.height,width: size.width,height: size.height)
        
        bottomNavBar.frame = bottomNavBarFrame
        
        let homeItem = UITabBarItem(
            title: "Home",
            image: UIImage(icon: .googleMaterialDesign(.home), size: CGSize(width: 40, height: 40)),
            tag: 0)
        let messagesItem = UITabBarItem(
            title: "問題の画像",
            image: UIImage(named: "register_icon")?.withRenderingMode(.alwaysOriginal),
            tag: 1)
        messagesItem.badgeValue = "8"
        let favoritesItem = UITabBarItem(
            title: "Favorites",
            image: UIImage(icon: .fontAwesome(.starO), size: CGSize(width: 40, height: 40)),
            tag: 2)
        favoritesItem.badgeValue = ""
        let readerItem = UITabBarItem(
            title: "Reader",
            image: UIImage(icon: .fontAwesome(.signIn), size: CGSize(width:40, height: 40)),
            tag: 3)
        readerItem.badgeValue = "88"

        let birthdayItem = UITabBarItem(
            title: "ic_birthday",
            image: UIImage(icon: .googleMaterialDesign(.accountCircle), size: CGSize(width:40, height: 40)),
            tag: 4)
        birthdayItem.badgeValue = "888+"
        bottomNavBar.items = [homeItem, messagesItem, favoritesItem, readerItem, birthdayItem]
        bottomNavBar.selectedItem = homeItem
        
        view.addSubview(bottomNavBar)

    }


}

実際の画面

よろしくお願いします！

追記

ずっと黒・グレイでitemが表示されていたので、tintColorが悪さしてるんじゃないかと思って色々調べていたらライブラリの初期値が黒とグレイでした、、
このデフォルト値をOverrideでnilに出来ますでしょうか？
自分がやったこととしてはtintColorDidChange()を使って変更しようとしてもnilが渡せませんでした。

上記が関係しているかは、分かりませんがどんな意見でもいいのでご教授いただければと思います。

Comments

[tsuki01]

現在の問題としては、画像設定しても全て塗りつぶされて（四角いグレー状態で）表示されるということでしょうか？
また、画像はどの様なものを利用していますでしょうか？
※ファイル形式（png、jpg）、ファイルサイズ（width、height）

[ludolf]

ご質問ありがとうございます！

はいtsuki01さんが仰る通り画像そのものの色を表示しようとした際にすべて塗りつぶされてしまう現象に悩んでおります。
色んな参考サイトで画像をそのまま表示するには、レンダリングを使用して表示するのが基本らしいのでやってみたのですが、必ず塗りつぶされてしまいます、、
後日色々調べていると何も色を指定していなければtintcolorがついてしまうという記事を見つけ、nilを入れ込むことにより解決できるという記事をみたので追記した経緯になります。

Answer 1

2020.8.13追記

完全な解決方法とはなりませんが、追加調査分を共有情報として追記させて頂きます。
※かなり「無理やりやってみた」感がありますので、おすすめも動作保証も出来ないですが。。

１、「MDCBottomNavigationItemView.m」クラス内にて、RenderingModeが"AlwaysTemplate"で設定されている
以下二つのメソッド内で RenderingMode が設定されているので、ViewController側で指定しても反映されていないのかもしれない（？）
なので、以下メソッド内の RenderingMode 指定部分を無理やり変更すれば問題を回避できる可能性あり。
・(void)setImage:(UIImage *)image
・(void)setSelectedImage:(UIImage *)selectedImage

２、ViewController側でのRenderingMode設定を工夫すると、以下の様にそれっぽい（画像の元の色を）表現できる
「bottomNavBar.items」変数に各Itemが入っているので、各Itemに対してRenderingModeを再指定すると以下の様に表示可能になる。（ライオンの画像を出してます）
※上：選択時、下：未選択時

---

以下は実現したい内容と異なっていたため、以下回答は無視してください

~~コメントにも質問記載しましたが、以下の様なことを実現したいということでしょうか。
もし認識が違っていたらスルーしてください。
~~

---

~~
もっと良い方法があるかもしれませんが、上記に関しては、処理を以下の様にしたら対応できました。
対応点としては、「画像ファイル指定箇所の修正」、「UIImageのextension追加」の2点になります。
※画像のサイズ指定部分は、参考サイト からのコピペになります。
~~

import UIKit
import MaterialComponents.MaterialBottomNavigation
import MaterialComponents
import IconFontStack

class ViewController: UIViewController {

    let bottomNavBar = MDCBottomNavigationBar()

    override func viewDidLoad() {
        super.viewDidLoad()

        viewDidLoadNavigation()
    }

     func viewDidLoadNavigation() {

        let size = bottomNavBar.sizeThatFits(view.bounds.size)

        let bottomNavBarFrame = CGRect(x: 0,y: view.bounds.height - size.height,width: size.width,height: size.height)

        bottomNavBar.frame = bottomNavBarFrame

        let homeItem = UITabBarItem(
            title: "Home",
            image: UIImage(icon: .googleMaterialDesign(.home), size: CGSize(width: 40, height: 40)),
            tag: 0)
        let messagesItem = UITabBarItem(
            title: "問題の画像", // ↓以下行を変更
            image: UIImage(named: "animal")?.imageResize(sizeChange: CGSize(width: 40, height: 40)),
            tag: 1) 
        messagesItem.badgeValue = "8"
        let favoritesItem = UITabBarItem(
            title: "Favorites",
            image: UIImage(icon: .fontAwesome(.starO), size: CGSize(width: 40, height: 40)),
            tag: 2)
        favoritesItem.badgeValue = ""
        let readerItem = UITabBarItem(
            title: "Reader",
            image: UIImage(icon: .fontAwesome(.signIn), size: CGSize(width:40, height: 40)),
            tag: 3)
        readerItem.badgeValue = "88"

        let birthdayItem = UITabBarItem(
            title: "ic_birthday",
            image: UIImage(icon: .googleMaterialDesign(.accountCircle), size: CGSize(width:40, height: 40)),
            tag: 4)
        birthdayItem.badgeValue = "888+"
        bottomNavBar.items = [homeItem, messagesItem, favoritesItem, readerItem, birthdayItem]
        bottomNavBar.selectedItem = homeItem

        view.addSubview(bottomNavBar)

    }
}

// extention追加
// 参考URL：https://stackoverflow.com/questions/24709244/how-do-set-a-width-and-height-of-an-image-in-swift/40212757
extension UIImage {

    func imageResize (sizeChange:CGSize)-> UIImage{

        let hasAlpha = true
        let scale: CGFloat = 0.0 // Use scale factor of main screen

        UIGraphicsBeginImageContextWithOptions(sizeChange, !hasAlpha, scale)
        self.draw(in: CGRect(origin: CGPoint.zero, size: sizeChange))

        let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
        return scaledImage!
    }
}

Comments

[ludolf]

ご回答ありがとうございます！

「実際の画面」が分かりずらく申し訳ございません、、
PNG画像でシルエットのみ表示するのではなく画像をそのまま表示したいです。
materialデザインの推奨項目にフッタータブメニューはフッターの背景・itemのアクティブ時・非アクティブ時の計3色までを使用することと記述されていたので、画像をそのまま表示した際に2色以上の場合もあるので、もともと塗りつぶしモードしかできないのではないかと考えてもおります。

ライブラリで本件を解決するのは難しいでしょうか？

余談ですが、上の人に画像で表示するのは非推奨ですと伝えているのですが、どうしてもその画像を表示させて目立たせたいということで無理に画像を表示しようとさせています、、泣

[tsuki01]

やりたいことと、余談に関して理解しました。
的外れな回答をしてしまい申し訳ありませんでした。。

普通のTabBarControllerであれば、質問者様が記載していたレンダリングモードで指定できるのかもしれませんが、こちらのライブラリに関してはパッと回答が分からない状態となります。
お役に立てず、重ねてお詫び申し上げます。

※また追記部分のtintColorですが、以下の様な記載をすれば色の変更は出来ますが"nil"には出来なさそうでした。
let bottomNavBar = MDCBottomNavigationBar()
bottomNavBar.selectedItemTintColor = UIColor.clear // nilを設定するとコンパイルエラー（ライブラリ側の処理を直接変更するしかない？）

[ludolf]

>お役に立てず、重ねてお詫び申し上げます。

いえいえとんでもないです汗
誰も回答してくれず、寂しかったのでどんな回答でも嬉しいです！

＞普通のTabBarControllerであれば、質問者様が記載していたレンダリングモードで指定できるのかもしれませんが
上記ですがとても有力な情報ですありがとうございます！
あるアプリで画像を表示しているアプリがあったのですが、やはりそちらでは普通のTabBarControllerを使用していましたか、

＞※また追記部分のtintColorですが、以下の様な記載をすれば色の変更は出来ますが"nil"には出来なさそうでした。
そうですよね、自分もnilを入れてみたのですが、nilを入れるなと怒られました、
clearを実装すると選択された項目が何も表示しなくなりました。
やはりライブラリを直接触らないと実現出来なさそうですよね、、

原因が確信できたのでベストアンサーにしたいと思います！

[tsuki01]

完全に解決していないのに、ベストアンサーを頂いて申し訳ないくらいです。
回答に一応追記しましたが、RenderModeが反映されないのは、ライブラリ内の以下が原因かもしれませんね。何かスッキリとした解決方法が見つかりましたら、是非追記をお願いしたいです。

・「MDCBottomNavigationItemView.m」クラス内にて、RenderingModeが"AlwaysTemplate"で設定されている。

[ludolf]

上記見ました！

＞「MDCBottomNavigationItemView.m」クラス内にて、RenderingModeが"AlwaysTemplate"で設定されている。

そこでしたかー汗
tintColorを入れ込んでいるところをnilにしてみたんですが、全てUIColor.Clearになってしまいすごく悩んでいました。結局templateになって単色にしかできなかったんですね、
上記でできました、大変助かりました^^
勝手ながらフォローしております今後ともよろしくお願いします！