安卓工作室BottomNavigationView图标问题

Question

我在我的应用程序中使用了BottomNavigationView。 一切都很好，但是当我有超过3个项目时，点击后项目会移动。

我的意思是，选定的项目会得到更多的边框，其他未选择的项目会移开并粘在一起。

但是我的想法是实现一个导航菜单，就像Instagram一样。 如果我点击导航菜单中的一个项目，则所有项目都保持不动，而不会向左或向右移动。

我该怎么做呢？

- mosenco

Answer 1

实现BottomNavigationView有一个条件：当有超过3个项目时，使用shift模式。因此，要禁用此效果，您需要将此行代码添加到BottomNavigationView XML中。

app:labelVisibilityMode="labeled"

PS：您需要支持库28.0.0及以上版本

- ikerfah

Answer 2

首先，您应该将以下内容添加到尺寸文件中：

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

然后，对栏目中的每一项进行申请：

@SuppressLint("PrivateResource")
fun BottomNavigationView.fixSelectedItem(position: Int) {
    val bottomMenu = this.getChildAt(0) as? BottomNavigationMenuView
    val item = bottomMenu?.getChildAt(position) as? BottomNavigationItemView
    item?.let {
        val activeLargeLabel = it.findViewById<TextView>(com.google.android.material.R.id.largeLabel)

        if (activeLargeLabel != null && activeLargeLabel is TextView) {
            activeLargeLabel.setPadding(0, 0, 0, 0)
            activeLargeLabel.ellipsize = TextUtils.TruncateAt.END
        }
    }
}

注意: 在支持遗留库中，这些名称design_bottom_navigation_和com.google.android.material.R可能会有所不同。这是来自AndroidX的内容。

这是解决比例效果的解决方法。

- ardiien

Answer 3

您可以使用此功能在BottomNavigationView上显示3到5个项目的文本和图标，并停止移动。

 app:labelVisibilityMode="labeled"

但是，您将会面临一个问题，即在 BottomNevigationView 上为 5 个项目剪切长文本的问题。为此，我找到了一个很好的解决方案，可以停止 BottomNevigationView 的文本和图标移动。您也可以停止 BottomNevigationView 上文本和图标的移动。这里提供了代码的快照。

1. 将以下几行代码添加到 BottomNevigationView 中，如所示

<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. 添加菜单项如下：

 <?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.在style.xml文件中添加以下样式：

 <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) 将这些添加到 Dimen 文件夹中

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

我从这些链接和链接得到了帮助。你也可以通过学习这些链接来获得帮助。这对我很有帮助，希望对你也有所帮助。谢谢...

- Rahul Kushwaha

---

很好的复制黏贴，来自我的回答 ;) - ardiien

@YaroslavOvdiienko 不，先生，我没有复制它。我实际上是从我的文件中复制的。我忘记在这里添加这些步骤了。是的，这是克服这个问题的方法。 - Rahul Kushwaha