Xamarin.FormsのTabbedPageでバッジを表示する

公開日: : 最終更新日:2016/11/03 Blog, Microsoft , , , , ,

iOSのタブバーはNative側でバッジ機能があるのだが、Androidにはそもそもバッジが無いらしい。
カスタムレンダラーで頑張って作ってみようと思ったら既にあった…。

GitHub : xamarin-forms-tab-badge
License : MIT
※プレリリース(2016/10/31)

NuGetで取得

  • ソリューションエクスプローラーでソリューションを右クリックし、ソリューションの NuGet パッケージの管理(N)を選択
  • プレリリースを含めるにチェック
  • Plugin.Badgeを検索し、全プロジェクトにインストール

iOS側のレンダラー登録

xxx.iOSの/Properties/AssemblyInfo.csに以下を追加

【余談】
XF標準のTabbedPageTabbedRendererを継承したBadgedTabbedPageRendererを指定することでXFは標準コントロールのままでネイティブ側の動きだけをカスタマイズできるの知らなかった。
XF側も継承コントロール必須だと思ってた。

Android側のレンダラー登録

Android側もAndroid用のレンダラーを登録
xxx.Droidの/Properties/AssemblyInfo.csに以下を追加

Forms側で使う

  • TabbedPageはXF標準のものでOK

  • 各ページに設定されたPlugin.Badge.Abstractions.TabBadge.BadgeTextがバッジのテキストとして表示される。

  • TabBadgeBadgeColorでバッジの色を指定

  • 空文字またはnullでバッジを非表示にできる(※現在iOSは空文字だとクリアされずに空バッジが表示されるっぽい
    Issue挙げたら速攻対応してくれた【2016/11/03追記】

※ChildrenがNavigationPageなのは深い意味はない。

実行結果

  • Android
    badge-droid

  • iOS
    badge-ios

関連記事

no image

UWPでMicrosoft.OData.Clientを使用する時、LINQ式でエラー

UWPからは非同期メソッドを実行する必要があるので、通常はExecuteAsyncをコールするが、

記事を読む

no image

No registered resource provider found for location ‘Japan East’ and API version ‘2.0’ for type ‘servers’.

Visual Studio から Azure Web Apps をデプロイするときに発生したエラーの

記事を読む

【ストアアプリ】トースト通知の基本

Windowsストアアプリ開発での基本。 トースト通知について投稿します。 Pack

記事を読む

no image

UWP+IoT Coreのシリアル通信メモ

Windows10 IoT + Raspberry Pi を始めようとしているのだが、どうもセンサー

記事を読む

Minnow Board Turbot + Windows 10 IoT Core をSSD上で動作させる

MinnowBoard は SATAが搭載されているので、SSDなどが利用できる。 通常はSDカード

記事を読む

【WPF/XAML】セパレータを縦にする

<Window x:Class="VerticalSeparator&q

記事を読む

no image

‘System.Windows.Navigation.BaseUriHelper’ のタイプ初期化子が例外をスローしました。

作成した.NETアプリケーション(WPF)が起動しない。 今回は構成ファイル(app.config)

記事を読む

Visual Studio から Android SDK Managerが起動できない

Android SDKやエミュレーターイメージのアップデートを行いたい場合にAndroid SDK

記事を読む

no image

UWPでOSバージョン番号の取得

Windows.System.Profile.AnalyticsInfo.VersionInfo.D

記事を読む

AdMob,Nendメディエーション時の優先順位

先日リリースしたアプリでは勉強を兼ねて、 AdMob+Nendでのメディエーション広告を実装し

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑