Android-Anleitung zur Verwendung von BottomNavigationView

Vorwort

Bezüglich einiger Fragen zu BottomNavigationView werde ich heute einen ausführlicheren Artikel zur Zusammenfassung veröffentlichen, in der Hoffnung, Ihnen weiterzuhelfen.

Tipp: Im Folgenden finden Sie den Text dieses Artikels. Die folgenden Fälle dienen als Referenz

1. BottomNavigationView zum ersten Mal kennenlernen

Gemeinsame Eigenschaften:

• app:itemTextColor Die Farbe des Textes. Sie können die ausgewählten und nicht ausgewählten Farben über den Selektor steuern

• app:itemIconTint Die Farbe des Symbols. Sie können die ausgewählten und nicht ausgewählten Farben über den Selektor steuern

• app:itemIconSize-Symbolgröße, Standard 24dp

• app:iteamBackground Hintergrundfarbe, der Standardwert ist die Farbe des Themas

• app:itemRippleColor Die Farbe der Wasserwellen nach dem Klicken

• app:itemTextAppearanceActive Legt bei Auswahl den Textstil fest

• app:itemTextAppearanceInactive Legen Sie den Standardtextstil fest

• app:itemHorizontalTranslationEnabled Das Element bewegt sich horizontal selected, wenn

• app:elevation steuert den Schatten oben im Steuerelement

• app:labelVisibilityMode Textanzeigemodus

• app:menu gibt die Menü-XML-Datei an (in diese werden Text und Bilder geschrieben)

Beim Erstellen eines neuen Projekts in Android Studio wählen viele Freunde diese Art von Aktivität im Modul wie folgt aus.

Das Wirkungsdiagramm des Projektbetriebs lautet wie folgt:

2. Der Farbschlüssel in BottomNavigationView implementiert die Codeanalyse (Beispiel)

Wie wird die Farbe definiert?

Der Schlüsselcode lautet wie folgt (Attribute in XML abrufen):

 ColorStateList backgroundTint =
        MaterialResources.getColorStateList(
            context, a, R.styleable.BottomNavigationView_backgroundTint);
    DrawableCompat.setTintList(getBackground().mutate(), backgroundTint);

    setLabelVisibilityMode(
        a.getInteger(
            R.styleable.BottomNavigationView_labelVisibilityMode,
            LabelVisibilityMode.LABEL_VISIBILITY_AUTO));
    setItemHorizontalTranslationEnabled(
        a.getBoolean(R.styleable.BottomNavigationView_itemHorizontalTranslationEnabled, true));

    int itemBackground = a.getResourceId(R.styleable.BottomNavigationView_itemBackground, 0);
    if (itemBackground != 0) {
    
    
      menuView.setItemBackgroundRes(itemBackground);
    } else {
    
    
      ColorStateList itemRippleColor =
          MaterialResources.getColorStateList(
              context, a, R.styleable.BottomNavigationView_itemRippleColor);
      setItemRippleColor(itemRippleColor);
    }

Es ist deutlich zu erkennen, dass ColorStateList eine Schlüsselrolle spielt und das Farbproblem durch die Verarbeitung der eingehenden Parameter gelöst werden kann.

3. Beginnen Sie mit der Lösung des Problems

1. So ändern Sie die Symbolfarbe

Hier sind zwei Lösungen
, die in XML gelöst werden müssen :
Erstens: Erstellen Sie eine neue selector_color-Datei und legen Sie die Farben der beiden Zustände fest

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#63F7DE" android:state_checked="true"  />
    <item android:color="@android:color/black" android:state_checked="false"/>
</selector>

Rufen Sie diese Datei dann in BottomNavigationView auf

app:itemIconTint="@color/selector_color"

In der Java-Datei gelöst:
Übergeben Sie eine benutzerdefinierte ColorStateList.
und übergeben Sie es als Parameter an die Ansicht

navView.setItemIconTintList();

2. So stellen Sie sicher, dass sich die Farbe des Symbols beim Klicken nicht ändert

Rufen Sie setItemIconTintList in Java auf und übergeben Sie den Parameter einfach als leer

navView.setItemIconTintList(null);

3. So stellen Sie sicher, dass sich die Schriftgröße beim Klicken nicht ändert

Stellen Sie die folgenden zwei Werte in der Dimensionsdatei auf die gleiche Größe ein

    //防止字体出现变大效果
    <dimen name="design_bottom_navigation_active_text_size">10dp</dimen>
    <dimen name="design_bottom_navigation_text_size">10dp</dimen>

4. Wenn Ihr Symbol mehrfarbig ist

Rufen Sie setItemIconTintList in Java auf. Der übergebene Parameter ist leer

navView.setItemIconTintList(null);

Legen Sie dann die Zeichenauswahl im Element des Bildstatus fest, beispielsweise wie folgt

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_home_black_24dp" android:state_checked="true"  />
    <item android:drawable="@drawable/ic_home_black_false_24dp" android:state_checked="false"/>
</selector>

Rufen Sie abschließend diese Datei im Menü auf. Beispieldateiname: ic_home

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

Um Zeit zu sparen, wird nur der erste geändert. Der Effekt ist wie folgt

5. Ich möchte keine ActionBar

1. Löschen Sie die Zeile paddingTop in XML

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

2. Löschen Sie die folgende Zeile in Java

NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);

3. Stellen Sie den APP-Stil auf NoActionBar ein

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Viertens. Zusammenfassung

Dies ist das Ende dieses Artikels über die Android-Anleitung zur Verwendung von BottomNavigationView

Nachdruck: http://www.dedeyun.com/it/m/100919.html