Posted at

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

More than 1 year has passed since last update.

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


作りたかったもの

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

Simulator Screen Shot - iPhone 8 - 2018-06-10 at 00.40.39.png


起こっていた現象


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

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

Simulator Screen Shot - iPhone 8 - 2018-06-10 at 00.41.43.png

パラメータを与えるインスタンスを間違えていたのが原因。

詳細は以下のとおりである。正解と間違いを比較して並べておく


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のタブアイコンが表示されない

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

Simulator Screen Shot - iPhone 8 - 2018-06-10 at 00.42.26.png

これは画像を保存する場所を正しく理解していなかったことが原因だった。

結論から述べると、以下の画像のようにiOS向けプロジェクトの中のResourceフォルダに入れておけばいい。

スクリーンショット 2018-06-10 0.38.30.png

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


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

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

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

解決した今でこそすぐ理解できるが、

最初からクロスプラットフォームで作ることしか考えておらず、

詰まっていたときはこんなふうに思っていた。

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

そこで全OS共通部にフォルダを作ってしまったのが運の尽き。

ずぶずぶと1週間ほど費やしてしまうことに…

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


まとめ


  • TabbedPageのタブバー表示情報は、子要素に追加するオブジェクトそのものに与える

  • TabbedPageのアイコンはiOSしか使わないので、iOSプロジェクト内のResourceフォルダに格納