Native Android -> 如何创建自定义弯曲底部导航答案

【问题标题】：Native Android -> How to create custom curved bottom navigationNative Android -> 如何创建自定义弯曲底部导航
【发布时间】：2022-01-16 08:52:12
【问题描述】：

这是我的设计师为我们的项目制作的导航。底部导航的高度为 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

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

【问题讨论】：

标签： android android-layout bezier android-bottomappbar android-bottomnavigationview

【解决方案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>

【讨论】：