如何更改特定底部栏导航项的大小和形状

Question

我正在尝试实现此底部栏，该底部栏包含一个尺寸更大且形状不同于其他条目的项目。

是否有使用本机Bottom导航组件实现此目标的简便方法？我猜不是因为它似乎不符合Material Design规范。

否则，什么是最好的方法？我看到只有两种方法可以实现这一目标，但对我而言，没有一种方法可以信赖。

• 对于每个“小物件”，在图形对象的顶部添加一个透明条，以达到相机图标的大小。
• 实现一个5个项目的底部栏，中间带有一个“幽灵项目”，在上面可以放置其他组件。这将需要将此组件与底部栏杆耦合。

编辑

这是我通过增加Harshit和fmaccaroni建议的图标大小而获得的。

未选择项目时：

选择项目时：

优点：该图标大于其他图标

缺点：它仍然包含在底部栏中。此外，选择后它不会垂直居中

---

Answer 1

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:itemIconTint="@color/colorPrimary"
    app:itemTextColor="@android:color/black"
    app:menu="@menu/navigation"
    android:clipChildren="false">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_gravity="center"
        android:layout_marginBottom="8dp"
        app:elevation="6dp"
        android:scaleType="center" />
</android.support.design.widget.BottomNavigationView>

还添加 android:clipChildren="false" 到根布局

Answer 2

经过一些研究，我遇到了这个图书馆。他们没有提供我想要的东西，但他们在他们的一个样本中实现了这种行为，这非常接近我的需要。

这是我通过重用他们的想法得到的（仅在 API 23 上测试）：

<blockquote class="imgur-embed-pub" lang="en" data-id="a/0Oypk"><a href="//imgur.com/0Oypk"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

它看起来不错，但我不喜欢这个实现，因为底部导航现在分为两个组件。

这个想法是在底部栏的中间创建一个空项目，并在它的顶部添加一个浮动操作按钮，以创造它是底部栏的一部分的错觉。

这是我的底部栏和浮动导航按钮的布局：

<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="bottom"
    app:elevation="0dp"
    app:itemIconTint="@drawable/menu_item_selector"
    app:itemTextColor="@drawable/menu_item_selector"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/navigation_items" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:focusable="true"
    app:backgroundTint="@color/white"
    app:borderWidth="0dp"
    app:elevation="0dp"
    app:fabSize="mini"
    app:layout_constraintBottom_toBottomOf="@id/navigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/camera_icon" />

导航栏项目：

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
    <item
        android:id="@+id/action_around_me"
        android:icon="@drawable/ic_bottombar_around_me"
        tools:ignore="MenuTitle" />

    <item
        android:id="@+id/action_my_projects"
        android:icon="@drawable/ic_bottombar_projects"
        tools:ignore="MenuTitle" />

    <!-- Here is the trick -->
    <item
        android:id="@+id/empty"
        android:enabled="false"
        tools:ignore="MenuTitle" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_bottombar_notification"
        tools:ignore="MenuTitle" />

    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_bottombar_settings"
        tools:ignore="MenuTitle" />
</menu>

每次单击 FAB 按钮时，我都会禁用底部栏：

private void disableBottomBar() {
    Menu menu = navigationBar.getMenu();
    for (int i = 0; i < menu.size(); i++) {
        // The third item is a an empty item so we do not do anything on it
        if (i != 2) {
            menu.getItem(i).setCheckable(false);
        }
    }
}

与setCheckable(true)单击底部栏图标时相同。

希望这可以帮助。