BottomNavigationView mit mehr als 3 Elementen: Der Tab-Titel wird ausgeblendet

85

Ich verwende BottomNavigationView mit der Android Support Desing Library 25. Wenn ich jedoch die Registerkarten wechsle, wird der Titel der anderen Registerkarte ausgeblendet. Es gibt jedoch kein Problem mit dem Ausblenden der tatsächlichen unteren Navigationsansicht. Aber meins versteckt sich.

MyBottomNavigation

Aber ich möchte, dass es so aussieht. Irgendeine Idee dazu? Was vermisse ich?

ActualBottomNavigation

Hier ist mein Code:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.yunus.ototakip.MainActivity">

<FrameLayout
    android:id="@+id/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/bottom_navigation"
    android:layout_alignParentTop="true">
</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/beyaz"
    app:itemTextColor="@color/beyaz"
    app:menu="@menu/bottombar_menu" />

bottom_bar_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
 <item
android:id="@+id/bb_menu_arac"
android:enabled="true"
android:icon="@drawable/icon_car"
android:title="@string/araclarim"
app:showAsAction="ifRoom" />
 <item
android:id="@+id/bb_menu_yakin"
android:enabled="true"
android:icon="@drawable/icon_yer"
android:title="@string/yakinimdakiler"
app:showAsAction="ifRoom" />
  <item
android:id="@+id/bb_menu_yaklasan"
android:enabled="true"
android:icon="@drawable/icon_takvim"
android:title="@string/yaklasanlar"
app:showAsAction="ifRoom" />

<item
    android:id="@+id/bb_menu_ipucu"
    android:enabled="true"
    android:icon="@drawable/icon_ipucu"
    android:title="@string/ipuclari"
    app:showAsAction="ifRoom" />
 </menu>
android  bottombar 
— Yunus Haznedar
quelle
hast du es versucht app:showAsAction="alwaysstattifRoom
— Yassine BELDI
Ich habe es versucht, aber es versteckt sich immer noch
— Yunus Haznedar
1
— Yassine BELDI
1
@ YunusHaznedar, wenn Element mehr als 3 ist, dann wird Text immer verbergen ...
— Shashank Verma
1
Hey, @DanXPrado, danke, dass du die Lösung geteilt hast. Ich habe Ihre Antwort als akzeptiert markiert. Viel Spaß beim Codieren.
— Yunus Haznedar

Antworten:

137

Die Lösung mit Reflection funktioniert nicht mehr, da das Feld mShiftingMode entfernt wurde.

Es gibt jetzt eine einfache Möglichkeit: Verwenden Sie die Support Library 28 und fügen app:labelVisibilityMode="labeled"Sie sie einfach Ihrer BottomNavigationViewXML-Deklaration hinzu.

Ich hoffe es hilft.

— Danilo Prado
quelle
Arbeiten wie ein Champion, aber wie macht man es kreisförmig scrollbar?
— Shylendra Madda
@ShylendraMadda Ich schlage vor, dass Sie dies als neue Frage veröffentlichen, da es nicht mit dieser Frage zusammenhängt.
— Danilo Prado
1
Wie ist das nicht das Standardverhalten ... Ich habe ein paar Stunden mit App verschwendet: showAsAction, android: sichtbar, android: aktiviert und eine Reihe anderer Hacks. Vielen Dank!
— Dänischer Khan
93

AKTUALISIEREN

removeShiftMode () wird nicht mehr benötigt, da wir in der Support-Bibliothek 28.0.0-alpha1 jetzt Labels hinzufügen können .

In XML:

<android.support.design.widget.BottomNavigationView
    app:labelVisibilityMode="labeled" />

Für programmgesteuerte Änderungen:

mBottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);

Damit dies funktioniert: Aktualisieren Sie die Design-Support-Bibliothek auf 28.0.0-alpha1

Hier ist eine gute Lektüre

FÜR ÄLTERE UNTERSTÜTZUNGSBIBLIOTHEK:

in Ihrem. bottom_bar_menu.xmlÄndern Sie das showAsActionAttribut

<item android:id="@id/menu_item"
android:title="text"
android:icon="@drawable/drawable_resource_name"
android:showAsAction="always|withText" />

in build.gradle:

compile 'com.android.support:design:25.3.1'

UNTEN NAVIGATIONSANSICHT MEHR ALS 3 EINZELTEILE: Verwenden Sie die removeShiftMode()Methode

im BottomNavigationViewHelper.javaEinsatz:

import android.annotation.SuppressLint;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import java.lang.reflect.Field;

    public class BottomNavigationViewHelper {
        @SuppressLint("RestrictedApi")
        public static void removeShiftMode(BottomNavigationView view) {
            BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
            try {
                Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
                shiftingMode.setAccessible(true);
                shiftingMode.setBoolean(menuView, false);
                shiftingMode.setAccessible(false);
                for (int i = 0; i < menuView.getChildCount(); i++) {
                    BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                    //noinspection RestrictedApi
                    item.setShiftingMode(false);
                    // set once again checked value, so view will be updated
                    //noinspection RestrictedApi
                    item.setChecked(item.getItemData().isChecked());
                }
            } catch (NoSuchFieldException e) {
                Log.e("BottomNav", "Unable to get shift mode field", e);
            } catch (IllegalAccessException e) {
                Log.e("BottomNav", "Unable to change value of shift mode", e);
            }
        }
    }

Nennen Sie es mit:

BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);
BottomNavigationViewHelper.removeShiftMode(bottomNavigationView);

Dadurch wird die Shift-Animation des Titeltextes deaktiviert und die Anzeige des Textes ermöglicht.

— rafsanahmad007
quelle
2
Nein, es versteckt sich immer noch. Ich versuchte "immer" und "immer | mit Text"
— Yunus Haznedar
1
Einer Ihrer Artikeltitel ist groß. Wird die Ansicht eines anderen blockiert? versuchen Sie es mit kleinen Titeln und zeichnbaren Bildern ..
— rafsanahmad007
1
siehe diese Zeile auf dem Tutotrial, dem Sie folgenIt’s important to note that the maximum number of items we can display is 5. This may change at any point, so it’s important to check this by using the getMaxItem() method provided by the BottomNavigationView class rather than hard-coding the value yourself.
— rafsanahmad007
1
tolle Antwort, danke
— Hamza Abdullah
2
Die Reflection-Lösung funktioniert ziemlich gut com.android.support:design:25.4.0, schlägt jedoch fehl com.android.support:design:26.1.0, sodass ich das Ziel-SDK und die Version der Abhängigkeiten ein wenig zurücksetze.
— Evi Song
10

Nach dem Scannen des Quellcodes von BottomNavigationView finde ich

mShiftingMode = mMenu.size() > 3;

In der Zeile 265 von BottomNavigationMenuView.java bedeutet dies, dass bei einer Menügröße von mehr als 3 der Tabulatortitel ausgeblendet wird. Wenn Sie also den Tab-Titel anzeigen möchten, müssen Sie nur den Code aus dem Build abrufen und nach unten wechseln.

mShiftingMode = mMenu.size() > 5;

PS: BottonNavigationView Die maximale Anzahl der Registerkarten muss zwischen 3 und 5 liegen. Sie können Code auf BottomNavigationViewNew abrufen Geben Sie hier die Bildbeschreibung ein

— ScuAdam
quelle
Ich habe meine eigene CustomBottomView, die BottomNavigationView erweitert. Gibt es eine Möglichkeit, diese Eigenschaft stattdessen festzulegen?
— JPM
1
Ich sehe nicht die Zeile von "BottomNavigationMenuView", die ungefähr das Limit von 3 Registerkarten enthält. Vielleicht hat sich der Code geändert?
— Android-Entwickler
8

Erstellen Sie die Klasse BottomNavigationViewHelper

import android.annotation.SuppressLint;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.util.Log;
import java.lang.reflect.Field;
public class BottomNavigationViewHelper {
    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
if(menuView.getChildCount()<6)
           {
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
         }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

Anruf 

    BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);
    BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
— Ram krishna
quelle
1
Es hat SuppressLint, die RestrictAPI Annoation Problem lösen
— Code4j
3

Kotlin-Erweiterungsfunktion:

@SuppressLint("RestrictedApi")
fun BottomNavigationView.removeShiftMode(){
    val menuView = this.getChildAt(0) as BottomNavigationMenuView
    try {
        val shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")
        shiftingMode.isAccessible = true
        shiftingMode.setBoolean(menuView, false)
        shiftingMode.isAccessible = false
        for (i in 0 until menuView.childCount) {
            val item = menuView.getChildAt(i) as BottomNavigationItemView
            item.setShiftingMode(false)
            // set once again checked value, so view will be updated
            item.setChecked(item.itemData.isChecked)
        }
    } catch (e: NoSuchFieldException) {
        e.printStackTrace()
        Timber.tag("BottomNav").e( e, "Unable to get shift mode field")
    } catch (e: IllegalAccessException) {
        Timber.tag("BottomNav").e( e, "Unable to change value of shift mode")
    }
}
— jpardogo
quelle
Danke mein Herr. Sehr geschätzt.
— Yunus Haznedar
1
item.setShiftingMode(false)ist jetztitem.setShifting(false)
— Sim
2

Ich habe so ziemlich die Antwort rafsanahmad007 verwendet , aber sie in Kotlin übersetzt. Lassen Sie es mich für die zukünftigen Wanderer teilen

@SuppressLint("RestrictedApi")
fun BottomNavigationView.disableShiftMode() {
    val menuView = this.getChildAt(0) as BottomNavigationMenuView
    try {
        val shiftingMode = menuView::class.java.getDeclaredField("mShiftingMode")
        shiftingMode.setAccessible(true)
        shiftingMode.setBoolean(menuView, false)
        shiftingMode.setAccessible(false)
        for (i in 0..(menuView.childCount - 1)) {
            val item = menuView.getChildAt(i) as BottomNavigationItemView
            item.setShiftingMode(false)
            // set once again checked value, so view will be updated
            item.setChecked(item.getItemData().isChecked())
        }
    } catch (e: NoSuchFieldException) {
        Timber.e("Unable to get shift mode field")
    } catch (e: IllegalAccessException) {
        Timber.e("Unable to change value of shift mode")
    }
}
— Karma Maker
quelle
1
Diese Lösung ist nicht mehr gültig, die akzeptierte Lösung ist korrekt von @DanXPrado
— jpardogo
Danke, dass du mich informiert hast
— Karma Maker
0

Dies funktioniert bei mir in API 26:

 navigation = (BottomNavigationView) view.findViewById(R.id.bottom_navigation);


     try{disableShiftMode(navigation);}catch(Exception ew){}

Nehmen Sie diese Methode in Ihrer Aktivität oder Ihrem Fragment vor, in der Sie Folgendes aufrufen möchten:

 @SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            item.setShiftingMode(false);

            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {

    } catch (IllegalAccessException e) {

    }
}
— Istiyak
quelle
0

Sie können dies verwenden, um sowohl Text als auch Symbole in BottomNevigationView für 3 bis 5 Elemente anzuzeigen und die Verschiebung zu beenden.

 app:labelVisibilityMode="labeled"

In BottmNevigationView für 5 Elemente treten jedoch Probleme beim Schneiden von Langtext auf. Dafür habe ich eine gute Lösung gefunden, um das Verschieben von Text zu stoppen, sowie Symbole für BottomNevigationView. Sie können auch das Verschieben von Text und Symbolen in BottomNevigationView beenden. Hier finden Sie Snipshots des Codes.

1. Fügen Sie diese Codezeile wie gezeigt in BottomNevigationView hinzu 

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="@dimen/seventy_dp"
    android:layout_semitransparent="true"
    android:background="@color/colorBottomNev"
    android:showAsAction="always|withText"
    app:itemIconTint="@drawable/bottom_navigation_colors"
    app:itemTextColor="@drawable/bottom_navigation_colors"
    app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"
    app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"
    app:menu="@menu/bottom_navigation_menu"
    app:labelVisibilityMode="labeled"/>

2. Fügen Sie Menüelemente wie folgt hinzu: -

 <?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/action_catalogue"
        android:icon="@drawable/catalogue"
        android:title="@string/catalogue"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_contracts"
        android:icon="@drawable/contract"
        android:title="@string/contracts"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_prospects"
        android:icon="@drawable/prospect"
        android:title="@string/prospects"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_performance"
        android:icon="@drawable/performance"
        android:title="@string/performance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_advance"
        android:icon="@drawable/advance"
        android:title="@string/advance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

</menu>

3. Fügen Sie diesen Stil in die Datei style.xml ein:

 <style name="BottomNavigationViewTextStyle">
            <item name="android:fontFamily">@font/montmedium</item>
            <item name="android:textSize">10sp</item>
            <item name="android:duplicateParentState">true</item>
            <item name="android:ellipsize">end</item>
            <item name="android:maxLines">1</item>
        </style>

4) Fügen Sie diese in den Ordner Dimen ein

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>
</resources>

Ich habe Hilfe von diesem Link und Link erhalten. Sie können auch Hilfe erhalten, indem Sie diese Links studieren. Dies hilft mir sehr. Ich hoffe, dies hilft Ihnen auch. Vielen Dank....

— Rahul Kushwaha
quelle
0

schnell behoben einfach App hinzufügen: labelVisibilityMode = "label" in xml

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_navigation_color_selector"
    app:itemTextColor="@drawable/bottom_navigation_color_selector"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/menu_bottom_navigation" />

Hinweis

  implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'
— Mujahid Khan
quelle
0

Eine Sache zu beachten, obwohl es in diesem Fall nicht gilt.

Dieses Muster kann verwendet werden, wenn Sie zwischen 3 und 5 Ziele der obersten Ebene haben, zu denen Sie navigieren können.

Gehen Sie wie folgt vor, damit der Symboltitel angezeigt werden kann:

  1. Stellen Sie sicher, dass Ihr XML-Menüelement (bottom_navigation_menu) wie folgt strukturiert ist: -

    <item
    android:id="@+id/action_home"
    android:enabled="true"
    android:icon="@drawable/ic_action_home"
    android:title="HOME"
    app:showAsAction="ifRoom"/>

<item
    android:id="@+id/action_favourites"
    android:enabled="true"
    android:icon="@drawable/ic_action_favourite"
    android:title="FAVOURITES"
    app:showAsAction="ifRoom"/>

<item
    android:id="@+id/action_basket"
    android:enabled="true"
    android:icon="@drawable/ic_action_basket"
    android:title="BASKET"
    app:showAsAction="ifRoom"/>

  2. Fügen Sie der BottomNavigationView-Code- App Folgendes hinzu : labelVisibilityMode = "label"

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/white"
    app:itemIconTint="@android:color/black"
    app:itemTextColor="@android:color/black"
    app:menu="@menu/bottom_navigation_menu"
    app:labelVisibilityMode="labeled"/>

— George
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.