要实现底部导航栏中间的平滑凸起效果,可以通过以下几种方式实现:
<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>
<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>
创建 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>
一些流行的库如:
- com.ismaeldivita.chipnavigation:chip-navigation-bar
- com.github.ittianyu:BottomNavigationViewEx
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)
) {
// 按钮内容
}
}
以上方法可以根据具体需求选择使用,Material Design 的 FloatingActionButton 方案是最简单且符合设计规范的实现方式。