插件窝 干货文章 底部导航栏中间的平滑凸起效果如何实现?

底部导航栏中间的平滑凸起效果如何实现?

android layout 凸起 height 894    来源:    2025-03-25

实现底部导航栏中间凸起效果的方法

要实现底部导航栏中间的平滑凸起效果,可以通过以下几种方式实现:

1. 使用自定义形状和布局

实现步骤:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- 背景视图 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/white"/>

    <!-- 凸起部分 -->
    <View
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/bottom_navigation"
        android:background="@drawable/circle_shape"/>

    <!-- 导航栏内容 -->
    <LinearLayout
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:orientation="horizontal">
        <!-- 导航项 -->
    </LinearLayout>
</RelativeLayout>

2. 使用 Material Design 的 FloatingActionButton

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主要内容 -->

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="16dp"
        app:fabSize="normal"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 使用自定义 Drawable 实现凸起效果

创建 nav_background.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>

    <item
        android:left="30dp"
        android:right="30dp"
        android:bottom="0dp"
        android:top="-30dp">
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

4. 使用第三方库

一些流行的库如: - com.ismaeldivita.chipnavigation:chip-navigation-bar - com.github.ittianyu:BottomNavigationViewEx

5. 使用 Jetpack Compose 实现

Box(modifier = Modifier.fillMaxWidth()) {
    // 底部导航背景
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .background(Color.White)
            .align(Alignment.BottomCenter),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        // 导航项
    }

    // 中间凸起按钮
    Box(
        modifier = Modifier
            .size(60.dp)
            .clip(CircleShape)
            .background(Color.White)
            .align(Alignment.TopCenter)
            .offset(y = (-20).dp)
    ) {
        // 按钮内容
    }
}

注意事项

  1. 确保凸起部分不会遮挡内容
  2. 考虑不同屏幕尺寸的适配
  3. 添加适当的阴影效果增强视觉层次
  4. 处理点击事件和状态变化

以上方法可以根据具体需求选择使用,Material Design 的 FloatingActionButton 方案是最简单且符合设计规范的实现方式。