app开发好看的底部导航栏

底部导航栏是移动应用程序常见的一种布局形式，适用于展示应用的核心功能入口。与顶部导航栏相比，底部导航栏一般更能吸引用户的眼球，提高应用的易用性。在这篇文章中，我将介绍一种常用的实现底部导航栏的方法，以及如何让它看起来更加美观。

底部导航栏实现方法

实现底部导航栏最常见的方法是使用 Android 的 BottomNavigationView 控件。BottomNavigationView 是一个 Material Design 风格的控件，可以轻松地实现底部导航栏。它包含多个 TabItem，每个 TabItem 对应一个列表或页面，点击 TabItem 切换页面。

以下是 BottomNavigationView 布局文件的示例：

```xml

android:id="@+id/nav_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

app:menu="@menu/bottom_nav_menu" />

```

最重要的是要指定 app:menu 属性，它将指定 BottomNavigationView 的菜单项，如下所示：

```xml

```

这里的每个菜单项都对应着一个 TabItem，你可以根据自己的需求添加或删除菜单项。

接下来，在 Activity 的 onCreate() 方法中设置 BottomNavigationView 的监听器，以便在用户单击选项卡时更新显示的页面。

```java

final NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);

BottomNavigationView navView = findViewById(R.id.nav_view);

AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(

R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)

.build();

NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);

NavigationUI.setupWithNavController(navView, navController);

```

通过设置 Action Bar 和 Navigation Controller，可以使用户在点击菜单项时获得可预测的、一致的行为。

美化底部导航栏

默认情况下，BottomNavigationView 控件的样式是随系统的主题色调而改变的。如果你想让它看起来更加美观，可以通过以下方法美化底部导航栏。

1. 改变背景颜色

你可以使用 XML 样式表来改变 BottomNavigationView 的背景颜色。以下是一个简单的样式表的示例：

```xml

android:id="@+id/nav_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorPrimaryDark"

app:menu="@menu/bottom_nav_menu" />

```

在这个例子中，我们将底部导航栏的背景颜色设置为 colorPrimaryDark。

2. 自定义 TabItem 样式

你可以使用 XML 样式表来自定义 TabItem 的样式，包括 TabItem 上显示的图标和文本内容。以下是一个简单的样式表的示例：

```xml

```

在这个例子中，我们使用了一个选择器，根据是否被选中来改变 TabItem 上文本的颜色。

3. 添加图标阴影

如果你想要添加更多效果，你可以为 BottomNavigationView 中的 TabItem 添加阴影。你可以使用 XML 样式表或在代码中直接为 TabItem 添加阴影。以下是一个示例：

```xml

android:id="@+id/navigation_home"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/tab_selector"

android:padding="12dp"

app:icon="@drawable/ic_action_home"

app:label="@string/title_home"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent">

android:id="@+id/image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:adjustViewBounds="true"

android:layout_gravity="center"

android:padding="8dp"

app:srcCompat="@drawable/ic_home" />

android:id="@+id/name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="@string/tab_home"

android:textColor="@drawable/tab_text_selector"

android:textSize="12sp"

android:textStyle="bold"

app:fontFamily="@font/nunitosans_bold" />

android:id="@+id/badge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/badge_background"

android:visibility="invisible"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="@id/name"

app:layout_constraintBottom_toBottomOf="@id/name" />

```

在这个例子中，我们创建了一个自定义的 BottomNavigationItemView，其中包含一个带有阴影的 AppCompatImageView 和 MaterialTextView。

总结

在移动应用程序中实现底部导航栏不仅实用，而且容易实现。Android 提供的 BottomNavigationView 控件可以轻松实现常见的底部导航栏布局。通过美化底部导航栏，可以提高整个应用程序的可用性和用户体验。