底部导航栏样式

Question

我有一个BottomNavigationView

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    app:itemTextColor="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    android:background="?android:attr/windowBackground"
    android:foreground="?attr/selectableItemBackground"
    app:itemIconTint="@android:color/white"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

当我在清单文件中使用默认的样式时，一切都正常：

<application
    android:name=".model.MyApp"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

当我像这样覆盖默认的styles

 <style name="base" parent="Theme.AppCompat.Light.NoActionBar" >
    <item name="android:background">@color/grey_dark_bg_md</item>
    <item name="android:textColor">@color/white</item>
</style>

和清单：

    <application
    android:name=".model.MyApp"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/base">
    <activity
        android

我遇到问题了。非活动底部导航图像被裁剪了。

样式出了什么问题？

- faq700

---

在 BottomNavigationView 中，您需要使用 android:layout_Weight = "1"。 - Ali

给底部导航设置固定高度。 - jigar savaliya

我认为首先您应该移除样式并检查是否仍存在相同的问题！ - Adil

这是一个很好的例子 - https://www.androidhive.info/2017/12/android-working-with-bottom-navigation/ - Adil

什么都没用，伙计们。 - faq700

Answer 1

您可以按照以下方式为BottomNavigationView设置样式：

1. 在styles.xml文件中声明自定义样式。

<style name="BottomNavigation">
    <item name="android:background">@color/indigo</item>
    <item name="itemBackground">@drawable/navigation_bar_item_bg</item>
    <item name="itemIconTint">@color/navigation_bar_txt_color</item>
    <item name="itemTextColor">@color/navigation_bar_txt_color</item>
    <item name="paddingStart">@dimen/bottom_navigation_padding</item>
    <item name="paddingEnd">@dimen/bottom_navigation_padding</item>
</style>

通过style属性将此样式应用于您的BottomNavigationView。

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu"
    style="@style/BottomNavigation"/>

- Quang Le

Answer 2

在您的xml布局文件中使用BottomNavigationView示例

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_menu"
            style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
            />

style属性可以设置为以下内容之一：

1. @style/Widget.MaterialComponents.BottomNavigationView
2. @style/Widget.MaterialComponents.BottomNavigationView.Colored`
3. @style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface
4. @style/BottomNavigation <!-- 这是您的自定义主题

在"themes.xml"文件中，您可以自定义底部导航栏样式。

 <style name="BottomNavigation">
        <item name="android:background">?attr/colorSurface</item>
        <item name="backgroundTint">@null</item>
        <item name="elevation">@dimen/m3_sys_elevation_level2</item>
        <item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
        <item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
        <item name="itemRippleColor">@color/mtrl_navigation_bar_colored_ripple_color</item>
        <item name="itemIconTint">@color/mtrl_navigation_bar_colored_item_tint</item>
        <item name="itemTextColor">@color/mtrl_navigation_bar_colored_item_tint</item>
        <item name="itemPaddingTop">@dimen/m3_bottom_nav_item_padding_top</item>
        <item name="itemPaddingBottom">@dimen/m3_bottom_nav_item_padding_bottom</item>
        <item name="android:minHeight">@dimen/m3_bottom_nav_min_height</item>
        <item name="enforceTextAppearance">true</item>
        <item name="enforceMaterialTheme">true</item>
        <item name="labelVisibilityMode">labeled</item>
    </style>

您可能需要通过将labelVisibilityMode属性值设置为unlabeled来隐藏标签

您可能需要添加文件res/color/bottom_navigation_tint.xml并使用此文件名设置属性itemIconTint、itemTextColor、itemTextAppearanceInactive、itemTextAppearanceActive以进行更改。

<item name="itemTextAppearanceInactive">@color/bottom_navigation_tint</item>
<item name="itemTextAppearanceActive">@color/bottom_navigation_tint</item>
<item name="itemIconTint">@color/bottom_navigation_tint</item>
<item name="itemTextColor">@color/bottom_navigation_tint</item>

文件 res/color/bottom_navigation_tint.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true" />
    <item android:alpha="0.6" android:color="?attr/colorOnPrimary" />
</selector>

- Đức Lê Công