如何更改选定的 BottomNavigationView 图标大小

Posted

技术标签:

【中文标题】如何更改选定的 BottomNavigationView 图标大小【英文标题】:How to change selected BottomNavigationView icon size 【发布时间】:2020-04-14 07:43:12 【问题描述】:

我正在使用本机 BottomNavigationView,并且我想将选定的图标大小更改为大于未选定的图标大小。 (exp.选定的图标 40dp,其他图标大小 20dp)。

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:scaleType="center"
        style="@style/Widget.Design.BottomNavigationView"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/navigation_menu" />

<item
    android:id="@+id/homePageFragment"
    android:icon="@drawable/selector_nav_home"
    android:orderInCategory="1"
    android:title="" />

<item
    android:id="@+id/discoverPageFragment"
    android:icon="@drawable/selector_nav_discover"
    android:orderInCategory="2"
    android:title="" />

<item
    android:id="@+id/qrPageFragment"
    android:icon="@drawable/selector_nav_qr"
    android:orderInCategory="3"
    android:title="" />

<item
    android:id="@+id/myAccountFragment"
    android:icon="@drawable/selector_nav_profile"
    android:orderInCategory="4"
    android:title="" />

<item android:drawable="@drawable/ic_bottom_navigation_profile" android:state_checked="true"/>

<item android:drawable="@drawable/ic_navigation_profile" android:state_checked="false"/>

【问题讨论】:

也许这可以帮助你:***.com/questions/41516568/… 我检查了那个问题,但是它改变了所有图标@DuyiLian 你可以使用大尺寸的 ic_bottom_navigation_profile 然后 ic_navigation_profile @NidhiSavaliya 它没有解决我的问题:( 【参考方案1】:

您可以像这样更改所选项目的文本大小:

styles.xml:

<style name="bottomNavigationView.Active" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">16sp</item>
</style>

bottom_navigation_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.bottomnavigation.BottomNavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomNavView"
    android:layout_
    android:layout_
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_nav_menu"
    app:labelVisibilityMode="labeled"
    app:itemIconSize="24dp"
    android:scaleType="center"
    app:itemTextAppearanceActive="@style/bottomNavigationView.Active" />

由于文本大小增加,所选项目的图标会抬起,整体上看起来所选元素的大小增加了:

like this

【讨论】:

【参考方案2】:

试试这个来改变所选项目的图标大小

override fun onNavigationItemSelected(item: MenuItem): Boolean 
    changeItemIconSize(item.itemId)
    return true
     

private fun changeItemIconSize(selectedItemId: Int) 
    val displayMetrics = resources.displayMetrics
    val menuView = bottomMenu.getChildAt(0) as BottomNavigationMenuView
    bottomMenu.itemIconSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24f, displayMetrics).toInt()
    val iconViewSelected =
        menuView.findViewById<View>(selectedItemId).findViewById<View>(com.google.android.material.R.id.icon)
    val layoutParams = iconViewSelected.layoutParams
    layoutParams.height =
        TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32f, displayMetrics).toInt()
    layoutParams.width =
        TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32f, displayMetrics).toInt()
    iconViewSelected.layoutParams = layoutParams

【讨论】:

以上是关于如何更改选定的 BottomNavigationView 图标大小的主要内容,如果未能解决你的问题,请参考以下文章

如何更改 Pyside 中选定的行背景颜色?

如何更改 TabLayout 选定选项卡的图标颜色?

CosmicMind/Material : 如何在 iOS 中更改 CheckButton 选定颜色

解雇后如何以编程方式更改UITabBar选定的索引?

如何更改选定的列表视图项目颜色

如何在swift 3的表格视图中仅更改选定行和未选定行的字体颜色和大小?