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

Windows10 IoT CoreでWindowsアップデートの自動実行を停止する

Manage IoT Core device updates このリンクにアップデートコントロール

記事を読む

no image

Microsoft.Expression.Encoderで動画のフレーム画像を取得

動画ファイルから指定したフレーム画像を取得する。 Microsoft.Expression.Enco

記事を読む

no image

【iPhoneアプリ】背景画像を設定する

ImageResourceにBg.pngという背景画像を登録しておく 背景を設定するタイミング

記事を読む

【iPhoneアプリ】リリース手順〜審査完了後〜

前回からの続き。 中身が無いアプリだったのでリジェクトされると思いきや 審査に通ってしま

記事を読む

no image

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

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

記事を読む

IntelliTestはどこまでカバーしてくれるのか

私はレガシーな開発環境・案件が多かったのですが、 この頃、ユニットテストを利用する機会が増えてきま

記事を読む

App Service Linux (Docker) 環境で、コンテナ内の Nginx のログをAzureポータルから確認

何も設定しない場合はSSHでアクセスしてログ参照する 通常はコンテナ内の /var/log/ngi

記事を読む

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

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

記事を読む

no image

This project references NuGet package(s) that are missing on this computer.

.nugetフォルダが設定されているソリューションから一部プロジェクトのみを抜き出すと発生する。 N

記事を読む

no image

SmallBasicで拡張ライブラリを使用する

こんにちは。 teratailにて以下の質問に遭遇しまして。 small basic の 拡

記事を読む

Message

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

PAGE TOP ↑