AndroidのBottomNavigationViewにバッジを追加することはサポートされていません。
番号付きのバッジをBottomNavigationViewの特定のタブに追加するにはどうすればよいですか。サードパーティのライブラリなしでネイティブに実行する必要があります。
MvvmCrossでXamarinネイティブを使用しています。
---注---
バッジはすぐにサポートされます。ただし、これは実際にタブにカスタムビューを追加する場合に役立ちます。
BottomNavigationViewでレイアウトを作成
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:local="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<FrameLayout
Android:id="@+id/tabsRootFrameLayout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:layout_above="@+id/tabsRootBottomNavigation" />
<Android.support.design.widget.BottomNavigationView
Android:id="@+id/tabsRootBottomNavigation"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
Android:background="@Android:color/white"
local:menu="@menu/root_bottom_navigation_menu"
local:itemIconTint="@color/bottom_navigation_selector"
local:itemTextColor="@color/bottom_navigation_selector"
local:elevation="16dp" />
</RelativeLayout>
メニュー:root_bottom_navigation_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<item
Android:id="@+id/tab_search"
Android:enabled="true"
Android:icon="@drawable/search_icon"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/tab_profile"
Android:enabled="true"
Android:icon="@drawable/profile_icon"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/tab_my_car"
Android:enabled="true"
Android:icon="@drawable/car_icon"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/tab_notifications"
Android:enabled="true"
Android:icon="@drawable/bell_icon"
app:showAsAction="ifRoom" />
</menu>
バッジのレイアウトを作成:component_tabbar_badge.axml
<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:padding="@dimen/margin_tiny">
<TextView
Android:id="@+id/notificationsBadgeTextView"
Android:layout_width="16dp"
Android:layout_height="16dp"
Android:layout_gravity="top|center_horizontal"
Android:layout_marginLeft="10dp"
Android:layout_marginStart="10dp"
Android:background="@drawable/notification_red_dot"
Android:gravity="center"
Android:textColor="@color/white"
Android:textSize="9dp" />
</FrameLayout>
Red Dot Background:notification_red_dot.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">
<solid
Android:color="@color/red" />
<size
Android:width="10dp"
Android:height="10dp" />
</shape>
下部ナビゲーションにバッジレイアウトを追加
private void SetNotificationBadge()
{
_bottomNavigation = FindViewById<BottomNavigationView>(Resource.Id.tabsRootBottomNavigation);
var notificationsTab = _bottomNavigation.FindViewById<BottomNavigationItemView>(Resource.Id.tab_notifications);
View badge = LayoutInflater.From(this).Inflate(Resource.Layout.component_tabbar_badge, notificationsTab, false);
_notificationBadgeTextView = badge.FindViewById<TextView>(Resource.Id.notificationsBadgeTextView);
notificationsTab.AddView(badge);
}
Bind Badge Text
var set = this.CreateBindingSet<TabsRootActivity, TabsRootViewModel>();
set.Bind(_notificationBadgeTextView).To(vm => vm.UnreadNotificationsCount);
set.Apply();
結果
これはあなたをもっと助けます
参照: 下部のナビゲーションバーのアイコンの上にバッジを表示
サポートライブラリのボトムナビゲーションバーを使用する場合、メニュー項目にバッジ/通知を表示するのは非常に複雑です。ただし、それを実行するための簡単な解決策があります。など https://github.com/aurelhubert/ahbottomnavigation
このライブラリは、ボトムナビゲーションバーのより高度なバージョンです。また、このコードスニペットを使用するだけで、メニュー項目にバッジを設定できます。
bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);
サードパーティのライブラリを使用したくない場合は問題ありません
詳細を確認してください 下部のナビゲーションバーのアイコンの上にバッジを表示