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

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

android layout height width 909    来源:    2025-03-25

实现底部导航栏中间按钮平滑凸起效果

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

方法一:使用自定义View和属性动画

<!-- 布局文件示例 -->
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <!-- 背景 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"/>

    <!-- 中间凸起按钮 -->
    <ImageView
        android:id="@+id/center_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ic_add"
        android:background="@drawable/circle_background"
        android:elevation="8dp"
        android:translationY="-20dp"/>

    <!-- 其他导航按钮 -->
    <!-- ... -->
</RelativeLayout>
// 添加点击动画
centerButton.setOnClickListener(v -> {
    ObjectAnimator scaleX = ObjectAnimator.ofFloat(v, "scaleX", 1f, 1.2f, 1f);
    ObjectAnimator scaleY = ObjectAnimator.ofFloat(v, "scaleY", 1f, 1.2f, 1f);
    AnimatorSet set = new AnimatorSet();
    set.playTogether(scaleX, scaleY);
    set.setDuration(300);
    set.start();
});

方法二:使用Material Design的FloatingActionButton

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_nav_menu"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center|bottom"
    android:layout_marginBottom="16dp"
    android:src="@drawable/ic_add"
    app:elevation="8dp"/>

方法三:使用自定义Shape和动画

  1. 创建凸起形状的drawable (res/drawable/raised_button.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <size android:width="60dp" android:height="60dp"/>
</shape>
  1. 在布局中使用:
<ImageView
    android:id="@+id/center_button"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:src="@drawable/ic_add"
    android:background="@drawable/raised_button"
    android:elevation="8dp"/>

方法四:使用CoordinatorLayout和Behavior

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

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="8dp"
        app:fabCradleRoundedCornerRadius="8dp"
        app:fabCradleVerticalOffset="8dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_nav_menu"/>
    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottom_app_bar"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意事项

  1. 确保为凸起按钮添加足够高的elevation值以产生阴影效果
  2. 考虑使用translationY属性将按钮向上移动
  3. 为平滑过渡添加适当的动画效果
  4. 在点击时考虑添加缩放或颜色变化反馈
  5. 测试不同API级别的兼容性

以上方法可以根据项目需求选择最适合的实现方式,Material Design组件提供了最原生的支持,而自定义View则提供了最大的灵活性。