【问题标题】:BottomNavigation selected icon not displayed?未显示底部导航选择的图标?
【发布时间】:2019-09-09 12:24:00
【问题描述】:

我使用底部导航视图来显示我的菜单。 当我运行应用程序时,它不显示选定的图标和文本,请参见下图。(应用程序使用 svg(xml) 图像文件)

当 TextSize 的长度较大且 tab 大于 3 或 4 时进行切割 See this image for text cutting

这是我的代码 MainActivity xml 文件

 <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:labelVisibilityMode="labeled"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation"/>

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

导航菜单

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

<item
        android:id="@+id/navigation_medidate"
        android:icon="@drawable/ic_meditation_light"
        android:title="@string/str_meditade"/>

<item
        android:id="@+id/navigation_lessions"
        android:icon="@drawable/ic_lesson_light"
        android:title="@string/str_lessions"/>

<item
        android:id="@+id/navigation_sleep"
        android:visible="false"
        android:icon="@drawable/ic_sleep_light"
        android:title="@string/str_sleep"/>

<item
        android:id="@+id/navigation_cources"
        android:icon="@drawable/ic_course_light"
        android:visible="false"
        android:title="@string/str_courses"/>

导航监听器

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_cources -> {
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_lessions -> {
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_medidate -> {
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_sleep -> {
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

【问题讨论】:

  • 您必须添加两个可绘制对象,一个用于活动状态,第二个用于非活动状态。您的活动可绘制颜色是白色,这就是它没有显示在选定选项卡上的原因。
  • 感谢您的支持@Heisenberg

标签: android android-layout kotlin bottomnavigationview


【解决方案1】:

尝试为色调图标selector_navigation.xml 添加一个选择器。使用app:itemIconTint 属性。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/blue" />
<item android:color="@android:color/darker_gray"  />
</selector>

并设置为BottomNavigationView

 <android.support.design.widget.BottomNavigationView
                android:id="@+id/navigation"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="start"
                android:elevation="4dp"
                android:background="@color/white"
                app:itemTextColor="@color/darker_gray"
                app:menu="@menu/navigation"
                app:layout_behavior="BottomNavigationBehavior"
                app:itemIconTint="@drawable/selector_navigation" />

【讨论】:

    【解决方案2】:

    您可以修改选定或未选定选项卡的文本大小。在dimens.xml中添加以下代码

        <dimen name="design_bottom_navigation_text_size">11sp</dimen>
        <dimen name="design_bottom_navigation_active_text_size">12sp</dimen>
    

    其他自定义尺寸的代码如下

        <dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>
        <dimen name="design_bottom_navigation_active_item_min_width">96dp</dimen>       
        <dimen name="design_bottom_navigation_elevation">8dp</dimen>
        <dimen name="design_bottom_navigation_height">56dp</dimen>
        <dimen name="design_bottom_navigation_icon_size">20dp</dimen>
        <dimen name="design_bottom_navigation_item_max_width">96dp</dimen>
        <dimen name="design_bottom_navigation_item_min_width">56dp</dimen>
        <dimen name="design_bottom_navigation_margin">8dp</dimen>
        <dimen name="design_bottom_navigation_shadow_height">1dp</dimen>
        <color name="design_bottom_navigation_shadow_color">#14000000</color>
    

    【讨论】:

      【解决方案3】:

      需要在 onNavigation 点击​​列表器上返回“真”而不是假

      private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
          when (item.itemId) {
              R.id.navigation_home -> {
                  return@OnNavigationItemSelectedListener true
              }
              R.id.navigation_cources -> {
                  return@OnNavigationItemSelectedListener true
              }
              R.id.navigation_lessions -> {
                  return@OnNavigationItemSelectedListener true
              }
              R.id.navigation_medidate -> {
                  return@OnNavigationItemSelectedListener true
              }
              R.id.navigation_sleep -> {
                  return@OnNavigationItemSelectedListener true
              }
          }
          true
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2022-10-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-07-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多