导航菜单的设计在移动端应用中是非常重要的，它提供了用户与应用之间全新的交互体验。而 Android Material Design 中为我们提供了一个很好的导航菜单的设计解决方案，即 NavigationView。使用 NavigationView 实现侧滑菜单，在 UI，交互和效果的呈现上都能给用户带来更好的体验。
基础知识
在使用 NavigationView 之前，我们需要对 DrawerLayout （抽屉布局）有所了解。DrawerLayout 是一个继承自 ViewGroup 的布局类，通常被用来实现侧滑菜单，它可以让应用在屏幕的左侧或者右侧部分隐藏一个导航菜单，并可以通过手势滑动或者程序控制让其显示和消失。相对应的，它的主要内容则可以通过 Fragment 或者 View 作为嵌入的容器来填充。
NavigationView 的使用
NavigationView 依赖于 DrawerLayout 的基础上，是一个提供侧滑导航的布局组件，主要用于在侧滑列表中展示导航、用户、设置等模块。实现 NavigationView 的步骤主要有以下几步：
依赖库的导入
在 app build.gradle 文件中加入以下依赖：
implementation 'com.google.android.material:material:1.2.1'
在布局文件中添加 DrawerLayout 和 NavigationView
在布局文件中加入 DrawerLayout 和 NavigationView，DrawerLayout 中嵌套最外层为 NavigationView，内部则可以填充具体的菜单列表和主要内容展示区域。
// javascriptcn.com 代码示例
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 主界面布局 -->
<FrameLayout
android:id="@+id/layout_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</androidx.drawerlayout.widget.DrawerLayout>可以看到 NavigationView 用了 app:menu 来设置菜单项，同时用 app:headerLayout 设置头部布局，菜单项中可以通过代码或者 XML 来设置图标、文本等相关参数。
通过代码或者 XML 来实现菜单项的点击响应
navView.setNavigationItemSelectedListener(item -> {
// 根据 item 获得其 id 进行逻辑的处理
// ...
// 关闭侧滑菜单栏
drawerLayout.closeDrawer(GravityCompat.START);
return true;
});// javascriptcn.com 代码示例
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_item_1"
android:icon="@drawable/ic_android_black_24dp"
android:title="Nav item 1" />
<item
android:id="@+id/nav_item_2"
android:icon="@drawable/ic_android_black_24dp"
android:title="Nav item 2" />
</group>
</menu>示例代码
下面是一段实现 NavigationView 的示例代码：
// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
private NavigationView navView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawerLayout = findViewById(R.id.drawer_layout);
navView = findViewById(R.id.nav_view);
// 监听菜单项的点击事件
navView.setNavigationItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.nav_item_1:
// do something
break;
case R.id.nav_item_2:
// do something
break;
}
// 关闭侧滑菜单栏
drawerLayout.closeDrawer(GravityCompat.START);
return true;
});
}
}// javascriptcn.com 代码示例
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_item_1"
android:icon="@drawable/ic_android_black_24dp"
android:title="Nav item 1" />
<item
android:id="@+id/nav_item_2"
android:icon="@drawable/ic_android_black_24dp"
android:title="Nav item 2" />
</group>
</menu>总结
使用 NavigationView 实现侧滑菜单，可以提供更好的用户交互体验。同时，在使用 NavigationView 的时候，还需要结合 DrawerLayout 来实现完整的效果。最终代码可以根据具体的业务需求来进行开发和优化，让用户可以更好地使用我们的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b90847d4982a6eb555858