NavigationView实现侧滑效果

最新推荐文章于 2021-12-27 17:03:10 发布

原创最新推荐文章于 2021-12-27 17:03:10 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#NavigationView #侧滑 #group分组 #沉浸式状态栏 #侧滑关闭

Android 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在Android中使用NavigationView组件实现侧滑菜单效果，并结合DrawerLayout和fragment实现布局切换。同时，文章详细讲解了如何设置透明沉浸式状态栏，以及利用group分组在菜单中添加下划线效果。通过实例代码展示了MainActivity的实现过程，包括菜单点击事件监听及关闭侧滑菜单的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NavigationView是design包下的一个组件使用前导design包 compile 'com.android.support:support-vector-drawable:25.3.1'

NavigationView与drawlayout一起实现侧滑效果，如果有必要还可以fragment一起连用实现点击侧滑列表中的项更改布局。下面是实现效果

这里的状态栏是透明的，这种被叫做沉浸式，不过关于沉浸式有两种说法，沉浸式就是完成占满嘛。所以有的人认为沉浸式状态栏就是状态栏完全被隐藏了，还有的人认为状态栏透明也是沉浸式，关于这没有官方说法，毕竟沉浸式这个词都不是官方的。这里就暂且算是沉浸式。沉浸式状态栏的设计我的方法比较简单。就是style文件中把状态栏背景设透明，<item name="colorPrimaryDark">#00000000</item> 然后需要沉浸式的布局里面的根布局加上这么一句android:fitsSystemWindows="true"。

关于NavigationView实现侧滑，其实也就是将这个控件放在drawerlayout里面，然后android:layout_gravity="start" 设置左边侧滑，app:headerLayout="@layout/nv_head"设置头部布局。app:menu="@menu/nv_menu" 设置菜单布局。类文件里面添加各个事件监听就可以了。

提醒一下，如果要有下划线效果，在菜单文件中使用group分组就行了。使用详解在代码里面

主布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:fitsSystemWindows="true"
    tools:context="com.example.design2.MainActivity">
    <!--android:fitsSystemWindows="true"-->
    <!--将调整系统窗口布局以适应你自定义的布局-->

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="24sp"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nv_head"

        app:menu="@menu/nv_menu">
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

nv_head.xml头部布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#22cccf">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

</LinearLayout>

nv_menu.xml菜单布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/g1">
        <item android:id="@+id/g1_i1"
            android:title="一组一号"
            android:icon="@mipmap/ic_launcher" />
        <item android:id="@+id/g1_i2"
            android:title="一组二号"
            android:icon="@mipmap/ic_launcher"/>
    </group>
    <group android:id="@+id/g2">
        <item android:id="@+id/g2_i1"
            android:title="二组一号"
            android:icon="@mipmap/ic_launcher"/>
        <item android:id="@+id/g2_i2"
            android:title="二组二号"
            android:icon="@mipmap/ic_launcher"/>
    </group>

</menu>

类文件

public class MainActivity extends AppCompatActivity {

    public TextView textView;
    public NavigationView navigationView;
    //定义一个drawerlayout用于关闭侧滑菜单。
    public DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView= (TextView) findViewById(R.id.textView);
        drawerLayout= (DrawerLayout) findViewById(R.id.container);

        navigationView= (NavigationView) findViewById(R.id.nv);
        //获取头部布局
        View headview=navigationView.getHeaderView(0);
        ImageView img= (ImageView) headview.findViewById(R.id.img);
        //设置图标颜色为原始颜色，不设置则为灰色
        navigationView.setItemIconTintList(null);
        //菜单的点击事件
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.g1_i1:
                        textView.setText(item.getTitle());
                        break;
                    case R.id.g1_i2:
                        textView.setText(item.getTitle());
                        break;
                    case R.id.g2_i1:
                        textView.setText(item.getTitle());
                        break;
                    case R.id.g2_i2:
                        textView.setText(item.getTitle());
                        break;
                }
                //侧滑菜单关闭
                drawerLayout.closeDrawer(Gravity.START);
                return true;
            }
        });
    }