SlidingPaneLayout,DrawerLayout,ActionBar,NavigationView 详解 <三> NavigationView，DrawerLayout 结合ActionB

关注

原创最新推荐文章于 2026-07-04 21:16:27 发布 1k 阅读 AI 写同款· GEO 优化 ›

Android SlidingPaneLayout实践可折叠设备在这里这一事实是无法回避的。在应用程序开发方面，它们带来了一些新的挑战。其中之一是可折叠设备的外形尺寸会根据折叠状态而变化。Android在设计上支持不同的外形尺寸，因此这很容易处理。但是，有一个新的Jetpack库可以使事情变得更容易：主要用例是不同的屏幕尺寸需要不同的用户体验。这方面的经典示例是列表/详细信息界面。列表和详细信息窗格在较大的显示器上并排显示。但列表窗格在较小的显示器上全屏显示。单击列表项后，将详细信息窗格全屏显示。阅读详情

NavigationView，DrawerLayout 结合ActionBar

参考：http://blog.youkuaiyun.com/Rodulf/article/details/50419899

代码：NavigationView和DrawerLayout的结合

这个结合主要分为两步：

0：实现DrawerLayout 和ActionBar的联动，在第二个子控件（就是NavigationView）里面添加一个参数android:layout_gravity="left|start"

1：NavigationView的设置。里面有两个重要的自有参数就是设置menu和headerLayout

具体步骤：

0：布局，里面最关键的就是android:layout_gravity="left|start"

注意NavaigationView 是design包里面的需要导入。

布局里面要要导入自定义的appNs，xmlns:app="http://schemas.android.com/apk/res-auto"

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView android:text="Hello World!"
            android:textSize="45sp"
            android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigationView"
        android:layout_gravity="left|start"
        app:menu="@menu/navigation_menu"
        app:headerLayout="@layout/layout_menu_header"/>

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

1：然后在主函数添加ActionBar，并且设置这个联动的设置：

    mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,0,0);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置显示为3条杠的形式
    mToggle.syncState();
    //看 源码 ActionBarDrawerToggle有 实现 Drawerlistener所以 可以添加
    mDrawerLayout.setDrawerListener(mToggle);

//ActionBar来控制DrawerLayout
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if(mToggle.onOptionsItemSelected(item)){
        return true;
    }
    return super.onOptionsItemSelected(item);
}

2：在res下面创建menu的文件夹，

然后在menu的文件夹下面创建navigation_menu文件

这个文件可以设置导航布局NavigationView的菜单栏，

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
<item android:id="@+id/menu_1" android:title="First" android:icon="@mipmap/ic_launcher" android:checked="true"/>
<item android:id="@+id/menu_2" android:title="Second" android:icon="@mipmap/ic_launcher"/>
<item android:id="@+id/menu_3" android:title="Third" android:icon="@mipmap/ic_launcher"/>
<item android:id="@+id/menu_exit" android:title="退出" android:icon="@mipmap/ic_launcher"/>
    </group>
    <item android:title="小分组">
        <menu>
            <item android:id="@+id/group_1" android:title="设置"></item>
            <item android:id="@+id/group_2" android:title="我的"></item>
            <item android:id="@+id/group_3" android:title="退出"></item>
        </menu>
    </item>
</menu>

在布局里面的NavigationView 里面的

app:menu="@menu/navigation_menu"

然后在activity 里面创建监听器来监听点击事件：

        //给NavigationView 设置监听事件
        mNavigationView = (NavigationView)findViewById(R.id.navigationView);
        mNavigationView.setNavigationItemSelectedListener(this);
    }

    //Returns:true to display the item as the selected item
    //返回true，可以展示选中的 item
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId){
            case R.id.menu_1:
                Toast.makeText(this,"111",Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_2:
                Toast.makeText(this,"222",Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_3:
                Toast.makeText(this,"333",Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_exit:
                finish();
                break;
        }
//        return false;
        return true;
    }

3：在layout文件夹下面创建layout_menu_header文件

<?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="match_parent">
<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@mipmap/yoyo"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="用户名"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="高级 会员 "/>
</LinearLayout>

然后在NavigationView里面添加属性

app:headerLayout="@layout/layout_menu_header"

4：Activity的全部代码：

package tech.androidstudio.navigationviewdrawerlayoutdemo;

import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mToggle;
    private NavigationView mNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerlayout);

        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,0,0);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置显示为3条杠的形式
        mToggle.syncState();
        //看 源码 ActionBarDrawerToggle有 实现 Drawerlistener所以 可以添加
        mDrawerLayout.setDrawerListener(mToggle);


        //给NavigationView 设置监听事件
        mNavigationView = (NavigationView)findViewById(R.id.navigationView);
        mNavigationView.setNavigationItemSelectedListener(this);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if(mToggle.onOptionsItemSelected(item)){
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    //Returns:true to display the item as the selected item
    //返回true，可以展示选中的 item
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId){
            case R.id.menu_1:
                Toast.makeText(this,"111",Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_2:
                Toast.makeText(this,"222",Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_3:
                Toast.makeText(this,"333",Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_exit:
                finish();
                break;
        }
//        return false;
        return true;
    }

    //TODO 注意了这里ActionBar和 DrawerLayout联动，需要重写的方法是 onOptionsItemSelected而不是onContextItemSelected

    /**
    @Override
    public boolean onContextItemSelected(MenuItem item) {
//        return super.onContextItemSelected(item);
        Toast.makeText(this,"Toggle Clicked",Toast.LENGTH_LONG).show();
        if(mToggle.onOptionsItemSelected(item)){
            return true;
        }
        return super.onContextItemSelected(item);
    }
    */
}