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

Question

请，我想在 Android 中使用自定义图标作为底部导航视图，如下所示。选中后如何更改图标位置？当它们被选中时，它们会上升一点。你是否创建一个具有一定边距的选定图标，或者有没有办法在android中设置高度？不过这张图片来自 flutter 库。我想在 Android Java 项目中重现它。或者找到一个实现它的库

Answer 1

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

    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 类中的 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]