DrawerLayout+NavigationView仿摩拜单车主界面

曾经的侧滑菜单通常是使用SlidingMenu，但是用起来设置属性太多，使用繁琐。后来官方出来DrawerLayout，使侧滑控件得以转正，功能效果更佳。这里是我用DrawerLayout+NavigationView仿摩拜单车做的主界面。

视觉效果：

giphy.gif

github代码直通车

制作步骤：

1. 使用到了NavigationView，来自于design包，需添加依赖：

    compile 'com.android.support:design:26.0.0-alpha1'

2. 添加主布局，在activity_main.xml中：
   DrawerLayout有两个子view，分别主界面布局和侧滑界面布局。主界面顶部为Toolbar，侧滑界面为NavigationView，需要给NavigationView设置android:layout_gravity="start"属性，表示从左侧滑出，"end"表示从右侧滑出。
   app:headerLayout="@layout/navigation_header"表示添加侧边头布局，app:menu="@menu/navigation_menu"表示添加列表菜单。activity_main代码如下：

3. navigation_header.xml头布局：

4. 创建menu包，menu包下的navigation_menu菜单文件：

5. setSupportActionBar(toolbar)设置toolbar；setHomeButtonEnabled(true)设置是否使用自带返回键；setDisplayHomeAsUpEnabled(true)给左上角图标的左边加上一个返回的图标 ;mDrawerLayout.setDrawerListener(mToggle)给drawerlayout设置开关事件触发。

toolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.navigationview);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);

            }
        };

        mToggle.syncState();
        mDrawerLayout.setDrawerListener(mToggle);

6. 给菜单添加点击事件：

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.one:
                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.two:
                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.three:
                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.four:
                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.five:
                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.six:
                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

MainActivity完整代码：

package com.example.drawerlayout;

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.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private ActionBarDrawerToggle mToggle;
    private DrawerLayout mDrawerLayout;
    private NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.navigationview);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);

            }
        };

        mToggle.syncState();
        mDrawerLayout.setDrawerListener(mToggle);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.one:
                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.two:
                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.three:
                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.four:
                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.five:
                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.six:
                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }
}

使用技巧：

1. 获取头布局控件：

        View headerView = navigationView.getHeaderView(0);
        ImageView ivAvatar = headerView.findViewById(R.id.iv_avator);

2. 默认menu图标是灰色的，需要添加 app:itemIconTint="@color/blue"设置统一颜色。更改效果如下：

   
   
   

   image.png

若要还原icon的原本颜色，调用navigationView.setItemIconTintList(null)，使用原生原色。

好了，打完收工！给个❤️就最好不过了。