使用ToolBar,DrawerLayout,NavigationView实现侧滑栏

image
image

如果不能使用DrawerLayout请在Projec Structure里面添加依赖项：

image
image

官方推荐把DrawerLayout放在根布局，避免覆盖点击事件。看以看到main_activity.xml由两部分组成，main_layout，NavigationView.其中NavigationView的layout_gravity=“start”,表示在屏幕左侧。

app:headerLayout表示侧滑栏的头部部分，我放的是一个headlayout,里面是一张图片。

app:menu表示侧滑栏里面的菜单项，我放的是left_menu.

image

由Toobar【作为工具栏】，FrameLayout【当选择侧滑栏的按钮时，替换FrameLayout里面的Fragment】组成。

headlayout.xml: 里面放了一张图片作为侧滑栏，顶部的图片

image

left_menu.xml Navigation里面用 app:menu=”left_menu”来引用: 这个是菜单项

image

接下来是java代码：

main_activity.java:

package com.example.copylooklook;

import android.content.res.Configuration;

import android.support.annotation.NonNull;

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.support.v7.widget.Toolbar;

import android.util.Log;

import android.view.MenuItem;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    private Toolbar mToolbar;

    private ActionBarDrawerToggle mDrawerToggle;

    private NavigationView mNavigationView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mToolbar = findViewById(R.id.toolbar);  //main_layout里面的toolbar

        setSupportActionBar(mToolbar);        //将toolbar设置到工具栏

        mNavigationView = findViewById(R.id.nav_view);

        mDrawerLayout = findViewById(R.id.drawer_layout);  //将toolbar与Drawerlayout绑定，实现点击toolbar图标打开它

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar,R.string.ic_open,R.string.ic_close){

            @Override //可参考官方教程 ：

https://developer.android.com/training/implementing-navigation/nav-drawer.html?hl=zh-cn

            public void onDrawerClosed(View drawerView) {

                super.onDrawerClosed(drawerView);

                Log.d("mainactivity", "onDrawerClosed: ");

            }

            @Override

            public void onDrawerOpened(View drawerView) {

                super.onDrawerOpened(drawerView);

                Log.d("Mainactivity", "onDrawerOpened: ");

            }

        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);  //===这里真正进行将DrawerLayout与ToolBar绑定

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            @Override    //NavigationView的点击侦听，这里监听了菜单的点击

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                updateItemCheckedView();

                switch (item.getItemId()){

                    case R.id.zhihu:

                        Toast.makeText(MainActivity.this,"点击了知乎",Toast.LENGTH_SHORT).show();

                        item.setChecked(true);

                        break;

                    case R.id.wangyii:

                        Toast.makeText(MainActivity.this,"点击了网易",Toast.LENGTH_SHORT).show();

                        item.setChecked(true);

                        break;

                    case R.id.meiri:

                        Toast.makeText(MainActivity.this,"点击了每日",Toast.LENGTH_SHORT).show();

                        item.setChecked(true);

                        break;

                }

                return true;

            }

        });

    }

    @Override

    protected void onPostCreate(Bundle savedInstanceState) {

        super.onPostCreate(savedInstanceState);

        // Sync the toggle state after onRestoreInstanceState has occurred.

        mDrawerToggle.syncState();

    }

    @Override

    public void onConfigurationChanged(Configuration newConfig) {

        super.onConfigurationChanged(newConfig);

        mDrawerToggle.onConfigurationChanged(newConfig);

    }

    public boolean onOptionsItemSelected(MenuItem item) {

        // Pass the event to ActionBarDrawerToggle, if it returns

        // true, then it has handled the app icon touch event

        if (mDrawerToggle.onOptionsItemSelected(item)) {

            return true;

        }

        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);

    }

    private void updateItemCheckedView(){  //当点击侧滑栏选项时，将其余

          for(int i = 0; i < 3; i ++){    // 选项设置成未选中

              mNavigationView.getMenu().getItem(i).setChecked(false);

          }

    }

}

此时，虽然有侧滑栏，但是侧滑栏的高度不是撑满屏幕的：

因此还要更改主题风格：

image