Display-Abzeichen auf der Oberseite der unteren Navigationsleiste auf das Symbol

Implementierte ich die untere navigation Blick in meine app und ich habe geschaut, wo jeder zur Anzeige von Abzeichen auf der Oberseite des icons, wie diese
Ich Frage mich, ob dies auch möglich zu implementieren. Jede Hilfe ist willkommen.
Danke.

InformationsquelleAutor der Frage heisenberg91 | 2017-03-08

18

Beim verwenden der support-Bibliothek Unteren Navigationsleiste, seine Recht komplexe zeigen ein Abzeichen/Anmeldung auf Menüpunkte.
Allerdings gibt es einfache Lösungen, um es getan. Wie
https://github.com/aurelhubert/ahbottomnavigation

Diese Bibliothek ist die erweiterte version der Unteren Navigationsleiste. Und man kann ein Abzeichen auf der Menü-Punkt einfach mit diesem code-snippet.
```
bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);
```
Und Sie erhalten Folgendes Ergebnis

InformationsquelleAutor der Antwort Noman Rafique

Wenn Sie nur wollen, zu einem Lager BottomNavigationView und keine third-party-lib ist hier, wie ich es getan habe:

BottomNavigationMenuView bottomNavigationMenuView =
            (BottomNavigationMenuView) navigationView.getChildAt(0);
    View v = bottomNavigationMenuView.getChildAt(3); 
    BottomNavigationItemView itemView = (BottomNavigationItemView) v;

    View badge = LayoutInflater.from(this)
            .inflate(R.layout.notification_badge, bottomNavigationMenuView, false);

    itemView.addView(badge);

Dann hier die layout-Datei:

<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">

    <TextView
        android:id="@+id/notifications.badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/notification_badge"
        android:gravity="center"
        android:padding="3dp"
        android:text="9+"
        android:textColor="@color/white"
        android:textSize="11sp" />
</FrameLayout>

Dann finden Sie einfach TextView von id und text.
@drawable/notification_badge ist nur ein Kreis-shape drawable

InformationsquelleAutor der Antwort Tinashe

Basis auf @Tinashe Antwort, ich möchte die badge-Karte wie unten-ohne-Nummer:
Display-Abzeichen auf der Oberseite der unteren Navigationsleiste auf das Symbol

code:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
        //position = 2
        addBadge(POSITION_HISTORY)
    }

    /**
     * add badge(notification dot) to bottom bar
     * @param position to get badge container
     */
    @SuppressLint("PrivateResource")
    private fun addBadge(position: Int) {
        //get badge container (parent)
        val bottomMenu = navigation.getChildAt(0) as? BottomNavigationMenuView
        val v = bottomMenu?.getChildAt(position) as? BottomNavigationItemView

        //inflate badge from layout
        badge = LayoutInflater.from(this)
                .inflate(R.layout.badge_layout, bottomMenu, false)

        //create badge layout parameter
        val badgeLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(badge?.layoutParams).apply {
            gravity = Gravity.CENTER_HORIZONTAL
            topMargin = resources.getDimension(R.dimen.design_bottom_navigation_margin).toInt()

            //<dimen name="bagde_left_margin">8dp</dimen>
            leftMargin = resources.getDimension(R.dimen.bagde_left_margin).toInt()
        }

        //add view to bottom bar with layout parameter
        v?.addView(badge, badgeLayout)
    }

badge_layout.xml (badge_size=12dp)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/badge_size"       
    android:layout_height="@dimen/badge_size"
    android:background="@drawable/new_notification" />

und drawable hintergrund new_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="100dp"/>
    <solid android:color="#F44336"/>
</shape>

InformationsquelleAutor der Antwort vuhung3990

Als @zxbin Antwort. Sie können überprüfen, BadgeView und versuchen folgenden code

BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(this);
navigation.setSelectedItemId(R.id.navigation_store);
BottomNavigationMenuView bottomNavigationMenuView =
        (BottomNavigationMenuView) navigation.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(4); //number of menu from left
new QBadgeView(this).bindTarget(v).setBadgeNumber(5);

Quelle von meine Kernaussage

InformationsquelleAutor der Antwort Agi Maulana

2

Können Sie BadgeView;

"Oder" Suche im github.

InformationsquelleAutor der Antwort zxbin

Können Sie versuchen, auf diese Weise:

Setzen Sie ein TextView innerhalb der BottomNavigationView für die Zählung (BottomNavigationView ist ein FrameLayout):

    <android.support.design.widget.BottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu">
        <TextView android:id="@id/bottomMenuSelectionsNumber" style="@style/bottomMenuSelectionsNumber"/>
    </android.support.design.widget.BottomNavigationView>

Und style Sie wie folgt:

<style name="bottomMenu">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/toolbarHeight</item>
    <item name="android:layout_gravity">center|bottom</item>
    <item name="android:background">@color/colorThird</item>
    <item name="itemBackground">@drawable/tabs_ripple</item>
    <item name="itemIconTint">@drawable/bottom_menu_item_color</item>
    <item name="itemTextColor">@drawable/bottom_menu_item_color</item>
    <item name="menu">@menu/bottom_menu</item>
</style>

<style name="bottomMenuSelectionsNumber">
    <item name="android:text">@string/bottomMenuSelectionsNumber</item>
    <item name="android:textSize">@dimen/appSecondFontSize</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:layout_width">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_height">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_gravity">right|bottom</item>
    <item name="android:layout_marginRight">@dimen/bottomMenuSelectionsNumberMarginR</item>
    <item name="android:layout_marginBottom">@dimen/bottomMenuSelectionsNumberMarginB</item>
    <item name="android:gravity">center</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:background">@drawable/bottom_menu_selections_number_bg</item>
</style>

Und bottom_menu_selections_number_bg:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="@dimen/cornerRadius"/>
</shape>

InformationsquelleAutor der Antwort Arash

0

Verwenden der support-Bibliothek BottomNavigationView ist schwierig. Eine einfache Lösung ist die Verwendung von externen Komponenten.
Ein einfach zu handhaben ist: https://github.com/roughike/BottomBar
Die Prüfung der Dokumentation es ist so einfach wie:
```
BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);

//Remove the badge when you're done with it.
nearby.removeBadge/();
```
InformationsquelleAutor der Antwort Fran

-1

Verwenden die gleiche Idee wie @Tinashe, hier ist der wesentliche Teil für die Umsetzung in Xamarin.Android.

    _bottomNavigation = FindViewById<BottomNavigationView>(Resource.Id.tabsRootBottomNavigation);
    var notificationsTab = _bottomNavigation.FindViewById<BottomNavigationItemView>(Resource.Id.tab_notifications);
    _notificationBadgeView = LayoutInflater.From(this).Inflate(Resource.Layout.component_tabbar_badge, null, false);
    _notificationBadgeTextView = _notificationBadgeView.FindViewById<TextView>(Resource.Id.notificationsBadgeTextView);
    notificationsTab.AddView(_notificationBadgeView);

Für eine vollständige Auflistung besuchen Sie: Android BottomNavigationView mit Abzeichen

InformationsquelleAutor der Antwort c.lamont.dev

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.