原生 Android -> 如何创建自定义弧形底部导航

Question

这是我的设计师为我们的项目制作的导航。底部导航的高度为70dp。

到目前为止我已经尝试过的。

首先，我从设计中下载了一个矢量可绘制背景并将其设置为 BottomNavigationView 的背景

<com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_gravity="bottom"
                app:labelVisibilityMode="labeled"
                app:itemIconTint="@drawable/bnv_tab_item_foreground"
                app:itemTextColor="@drawable/bnv_tab_item_foreground"
                android:id="@+id/bottom_nav"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                app:menu="@menu/menu_bottom_main"
                android:background="@drawable/background_bottom_navigation"/>

结果

正如您所看到的，曲线不如设计中的那么好。由于不同的 Android 屏幕尺寸，这种方法永远不会起作用。

我的第二次尝试是基于 Phillip Lackner 的教程 https://www.youtube.com/watch?v=x6-_va1R788&t=830s

我将 BottomNavigationView 放在 BottomAppBar 内。然后我创建了 FloatingActionButton 并将其layout_anchor属性设置为BottomAppBar

<com.google.android.material.bottomappbar.BottomAppBar
                app:fabCradleRoundedCornerRadius="20dp"
                android:backgroundTint="@color/blue_menu2"
                android:id="@+id/bottom_app_bar"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="56dp">
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    app:labelVisibilityMode="labeled"
                    app:itemIconTint="@drawable/bnv_tab_item_foreground"
                    app:itemTextColor="@drawable/bnv_tab_item_foreground"
                    android:id="@+id/bottom_nav"
                    app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
                    android:layout_marginEnd="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@android:color/transparent"
                    app:menu="@menu/menu_bottom_main" />
            </com.google.android.material.bottomappbar.BottomAppBar>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:scaleType="center"
                app:maxImageSize = "56dp"
                android:id="@+id/home_floating_button"
                app:layout_anchor="@id/bottom_app_bar"
                android:layout_width="56dp"
                android:layout_height="80dp">
            </com.google.android.material.floatingactionbutton.FloatingActionButton>

结果

正如你所看到的，曲线不够“深”。BottomAppBar 有属性 fabCradleVerticalOffset 但不幸的是你不能输入负值。

是否可以使用贝塞尔曲线尝试在底部导航中绘制自定义形状。我还没有尝试过。我不确定它是否适用于这个特定的底部导航设计。https://proandroiddev.com/how-i-drew-custom-shapes-in-bottom-bar-c4539d86afd7

如何创建这个弯曲的底部导航？

Answer 1

BottomAppBar我认为如果不进行一些修改就无法实现这一目标。我可以建议你使用 2 个 FAB，一个不可见的 FAB 可以按照你想要的方式获得弯曲BottomAppBar，另一个（实际的 FAB）并将其放置在你需要放置的位置，这里是一个例子

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottom_app_bar"
                app:fabCradleMargin="15dp"
                app:fabCradleVerticalOffset="10dp"
                app:fabCradleRoundedCornerRadius="10dp"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:layout_gravity="bottom"
                android:backgroundTint="#0000FF"
                app:layout_constraintTop_toTopOf="parent">

            </com.google.android.material.bottomappbar.BottomAppBar>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/home_floating_button"
                android:layout_width="58dp"
                android:layout_height="40dp"
                android:alpha="0"
                android:scaleY="2"
                android:scaleType="center"
                app:layout_anchor="@id/bottom_app_bar" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/home_floating_button2"
                android:layout_width="58dp"
                android:layout_height="80dp"
                android:scaleType="center"
                android:layout_marginBottom="25dp"
                app:layout_anchorGravity="center"
                app:layout_anchor="@id/bottom_app_bar"
                app:maxImageSize="56dp"/>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>