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

Question

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

到目前为止我已经尝试了什么。

首先我从 design 下载了一个矢量可绘制背景并将其设置为 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，一个不可见的可以使 BottomAppBar 弯曲成您想要的方式，另一个（实际的）并将其放置在您需要放置的位置，这是一个例子


        <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>

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

Native Android -> How to create custom curved bottom navigation

android

android-layout

bezier

android-bottomappbar

android-bottomnavigationview