Navigation Drawer的基本用法(SlidingMenu的替代品)

来源:互联网 发布:大二申请国外大学知乎 编辑:程序博客网 时间:2024/05/20 05:27

Navigation Drawer是谷歌用来代替SlidingMenu的,其使用方法远远比SlidingMenu要简单的多。
今天在这里将Navigation Drawerde 使用方法详细的介绍给大家。博客很详细大家认真读争取一步到位。
1,第一步,万年不变添加依赖。Navigation Drawer是属于design包的。

compile 'com.android.support:design:25.3.1'

记住其同样依赖于v4包,不过如果你有v7包也因该是可以的。如果不可以要同时导入两个包的话一定记得两个包要用同一版本。不然的话就gg了。
2.干货来了,本文基于AS开发,EC回避。如果都到了这个时候了你还在用ec也不用看什么Navigation Drawer了还是好好去研究一下SlidingMenu吧。这种新出的东西ec弄不了。
我们可以在新建项目的时候选择Navigation Drawer Activity。
这里写图片描述
也可以在新建Activity 的时候选择Navigation Drawer Activity,总之一定要选这个。
这里写图片描述
在新建完成的时候进入.java主文件会看到如下代码:

public class NavigationDrawerActivity extends AppCompatActivity        implements NavigationView.OnNavigationItemSelectedListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_navigation_drawer);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);        drawer.setDrawerListener(toggle);        toggle.syncState();        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(this);    }    @Override    public void onBackPressed() {        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        if (drawer.isDrawerOpen(GravityCompat.START)) {            drawer.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.navigation_drawer, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }    @SuppressWarnings("StatementWithEmptyBody")    @Override    public boolean onNavigationItemSelected(MenuItem item) {        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camera) {            // Handle the camera action        } else if (id == R.id.nav_gallery) {        } else if (id == R.id.nav_slideshow) {        } else if (id == R.id.nav_manage) {        } else if (id == R.id.nav_share) {        } else if (id == R.id.nav_send) {        }        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        drawer.closeDrawer(GravityCompat.START);        return true;    }}

其中这部分是没有用的,可以删掉。

  FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });

然后将

drawer.setDrawerListener(toggle);

换成

drawer.addDrawerListener(toggle);

然后将app_bar_main中的以下部分删除

<android.support.design.widget.FloatingActionButton android:id="@+id/fab"        android:layout_width="wrap_content" android:layout_height="wrap_content"        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"        app:srcCompat="@android:drawable/ic_dialog_email" />

删除部分都是design包中的其他内容与本次讲解知识点无关。
3.现在我们来讲解以上代码的含义
ToolBar的具体知识点就不说了,不会的自己先去看toolbar,先说这部分。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);        drawer.addDrawerListener(toggle);        toggle.syncState();

这里看似就是简单的标题栏设置,但是我们会发现Drawerlayout的对象在这里设置了一个监听。
而传入的是ActionBar的对象,这是因为这个ActionBar是一个实现了DeawerLayout监听接口的标题栏。

public class ActionBarDrawerToggle implements DrawerLayout.DrawerListener {...}

这里发个彩蛋,正常我们集成完这个框架之后如图所示:
这里写图片描述
下面的抽屉都是可点击的,官方都给我们预留出来了监听回调方法区,后面会讲。
但是绿色部分的头像和文字是不允许点击的,如果你们天真的认为我们findViewById(头像ID)在OnCreate方法里设置监听就错了,程序一经运行马上崩溃,那么我们应该怎么处理呢。
将此行代码中的toggle换成new DrawerLayout.Drawerlistener()

drawer.setDrawerListener(toggle);

然后万能快捷键实现他的方法

drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {    @Override    public void onDrawerSlide(View drawerView, float slideOffset) {        //抽屉滑动时回调    }    @Override    public void onDrawerOpened(View drawerView) {        //抽屉打开后回调    }    @Override    public void onDrawerClosed(View drawerView) {        //抽屉关闭后回调    }    @Override    public void onDrawerStateChanged(int newState) {        //抽屉滑动状态改变时回调        switch (newState) {            case DrawerLayout.STATE_DRAGGING:                //拖动状态                break;            case DrawerLayout.STATE_IDLE:                //静止状态                break;            case DrawerLayout.STATE_SETTLING:                //设置状态                break;            default:                break;        }     }});

在onDrawerOpened方法中进行findViewById,然后设置监听。
这时的toggle.syncState();方法已经没有用了我们可以把他删除。
也可以在其上侧再加一行代码

drawer.setDrawerListener(toggle);

此行代码与以上代码并不冲突。还有 toggle.syncState();方法基本没有什么用。
4.接下来我们发现的这两行代码

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);

是为抽屉按钮设置监听的,监听方法如下:

 @SuppressWarnings("StatementWithEmptyBody")    @Override    public boolean onNavigationItemSelected(MenuItem item) {        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camera) {            // Handle the camera action        } else if (id == R.id.nav_gallery) {        } else if (id == R.id.nav_slideshow) {        } else if (id == R.id.nav_manage) {        } else if (id == R.id.nav_share) {        } else if (id == R.id.nav_send) {        }        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        drawer.closeDrawer(GravityCompat.START);        return true;    }

我们可在此方法中设置抽屉按钮的监听。其他代码先不要管。
我们来看一下布局,主布局中主要注意到

<android.support.design.widget.NavigationView        android:id="@+id/navigation_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/navigation_drawer_header"        app:menu="@menu/navigation_drawer_menu"/>

headerLayout和menu这两个添加进来的文件。
我们先进入headerLayout

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="@dimen/nav_header_height"    android:background="@drawable/side_nav_bar"    android:gravity="bottom"    android:orientation="vertical"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:id="@+id/imageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        app:srcCompat="@android:drawable/sym_def_app_icon" />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        android:text="Android Studio"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />    <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="android.studio@android.com" /></LinearLayout>

这里我们可以写我们自己的头布局,自己随意。
然后进入menu中定义我们自己的分组与图片文字

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_camera"            android:icon="@drawable/ic_menu_camera"            android:title="QQ" />        <item            android:id="@+id/nav_gallery"            android:icon="@drawable/ic_menu_gallery"            android:title="微信" />        <item            android:id="@+id/nav_slideshow"            android:icon="@drawable/ic_menu_slideshow"            android:title="陌陌" />        <item            android:id="@+id/nav_manage"            android:icon="@drawable/ic_menu_manage"            android:title="探探" />    </group>    <item android:title="外卖">        <menu>            <item                android:id="@+id/nav_share"                android:icon="@drawable/ic_menu_share"                android:title="美团" />            <item                android:id="@+id/nav_send"                android:icon="@drawable/ic_menu_send"                android:title="饿了吗" />        </menu>    </item></menu>

记得顶起来偶。

原创粉丝点击