使用自定义图标时，增加导航底部视图中所选图标的高度 android？

Question

拜托，我想像这样在 android 中为底部导航视图使用自定义图标。选中时如何更改图标位置？当他们被选中时，他们会上升一点。您是创建一个带有一定边距的选定图标，还是有办法在 android 中设置高度？不过这张图片来自 flutter 库。我想在 Android Java 项目中重现它。或者找一个实现它的库

Answer 1

您可以使用选择器来完成此操作。为此，您需要两个单独的图像： 1）当 state selected 为 true 时表示您选择的图像 2) 默认表示没有选择图标。

XML

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
          android:drawable="@drawable/YOUR SELECTED IMAGE">

    </item>
    <item android:drawable="@drawable/YOUR DEFAULT IMAGE"></item>

</selector>

然后将此选择器用作底部导航视图的每个图像图标的可绘制对象。您可以根据需要在选择器 a/c 中添加其他属性。

Answer 2

在您的 bottomNavigationView.setOnNavigationItemSelectedListener 中，为每个按下的图标调用该动画方法 animateBottomIcon(int itemIndex, boolean isChecked)。

</p> <pre><code> BottomNavigationView bottomNav; BottomNavigationMenuView menuView; public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { bottomNav.setClipChildren(false); bottomNav.setClipToPadding(false); bottomNav.setClipToOutline(false); menuView.setClipChildren(false); menuView = (BottomNavigationMenuView) bottomNav.getChildAt(0); } private void animateBottomIcon(int itemIndex, boolean isChecked) { final View view = menuView.getChildAt(itemIndex).findViewById(com.google.android.material.R.id.icon); ObjectAnimator translateUpAnimator = ObjectAnimator.ofFloat(view, "translationY", 0, (float) (-(bottomNav.getHeight() / 2))).setDuration(500); if(!isChecked) { translateUpAnimator.start(); } if(currentItemIndex != -1) { final View currentView = menuView.getChildAt(currentItemIndex).findViewById(com.google.android.material.R.id.icon); ObjectAnimator translateDownAnimator = ObjectAnimator.ofFloat(currentView, "translationY", 0, (float) (-(bottomNav.getHeight() / 2))).setDuration(500); if (!isChecked) { translateDownAnimator.reverse(); } } }

通常菜单图标会被 BottomNavigation 截断以避免使用：android:clipChildren="false" 在布局的根视图中，在 java class 中，在 onCreateView 中():

bottomNav.setClipChildren(false); bottomNav.setClipToPadding(false); bottomNav.setClipToOutline(false);

最重要的是在您的 menuItem 上，因为它是您的图标项的父项。 menuView.setClipChildren(false);。

记得给你的底部导航视图一个固定的高度。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:itemIconSize="54dp"
    app:elevation="12dp"
    app:labelVisibilityMode="unlabeled"
    app:menu="@menu/menu_bottom_nav">[![enter image description here][1]][1]

Answer 3

更新： 图书馆就在这里 https://github.com/Kwasow/BottomNavigationCircles-Android

我偶然发现了你的问题并创建了一个受设计启发的自定义 android 导航栏。

导航栏如下所示：

它的代码位于此处：https://github.com/Kwasow/Archipelago/blob/main/app/src/main/java/com/github/kwasow/archipelago/views/CustomBottomNavigation.kt

bg_green_circle.xml 可绘制对象如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="24dp"
        android:height="24dp"/>
    <solid android:color="#6CB86A"/>
</shape>

我将来可能会把它变成一个包，但它仍然需要一些工作。如果发生这种情况，我会更新 post。

使用自定义图标时，增加导航底部视图中所选图标的高度 android？

Increase height of selected icon in navigation bottom view android when using custom icon?

java

android

bottomnavigationview