TabbedPageのタブにアイコンが表示されない、そもそもタブが表示されない

6045 ワード
VisualStudio Xamarin.Forms Xamarin Xamarin.iOS C# C# テキストリンク

Xamarinを触り始めて、初めて詰まりに詰まったわりにあっさり解決したのでメモして置くことにします。

作りたかったもの

以下の画像のようにしたかった。

起こっていた現象

TabbedPageのタブそのものが表示されない

以下の画像のような現象が起きていた。

パラメータを与えるインスタンスを間違えていたのが原因。
詳細は以下のとおりである。正解と間違いを比較して並べておく

correct.cs
    public partial class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
            InitializeComponent();
            this.Children.Add(new NavigationPage(new MyContentPage1())
            {
                Title = "Tab1"
                Icon = "icon1.png"
            });
            this.Children.Add(new NavigationPage(new MyContentPage2())
            {
                Title = "Tab2"
                Icon = "icon2.png"
            });
        }
    }
wrong.cs
    public partial class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
            InitializeComponent();
            this.Children.Add(new NavigationPage(new MyContentPage1()
            {
                Title = "Tab1"
                Icon = "icon1.png"
            }));
            this.Children.Add(new NavigationPage(new MyContentPage2()
            {
                Title = "Tab2"
                Icon = "icon2.png"
            }));
        }
    }

よーーく見ると、TitleとIconのパラメータを与える先が異なってしまっていることが分かる。
(正解の方はTabbedPageの直下になるNavigationPageのほうにパラメータが与えられているが、間違いの方はその中にあるContentPageの方にパラメータが与えられてしまっている。)

TabbedPageのタブアイコンが表示されない

以下の画像のような現象が起きていた。

これは画像を保存する場所を正しく理解していなかったことが原因だった。
結論から述べると、以下の画像のようにiOS向けプロジェクトの中のResourceフォルダに入れておけばいい。

ファイルの命名規則などはこの後出てくる参考サイトに書いてあるので割愛する。

どんな経緯で詰まってしまったのか

今回このコードを書くにあたり特に参考にさせていただいたのが以下のサイトである。

TabbedPage と NavigationPage を組み合わせて使うには

解決した今でこそすぐ理解できるが、
最初からクロスプラットフォームで作ることしか考えておらず、
詰まっていたときはこんなふうに思っていた。

「Resourceフォルダってどこに作ればいいの？」

そこで全OS共通部にフォルダを作ってしまったのが運の尽き。
ずぶずぶと1週間ほど費やしてしまうことに…

タブバーにアイコン使うのはiOSだけなんだからよくよく考えれば当然のことなのであった。

まとめ

  • TabbedPageのタブバー表示情報は、子要素に追加するオブジェクトそのものに与える
  • TabbedPageのアイコンはiOSしか使わないので、iOSプロジェクト内のResourceフォルダに格納