NavigationView与Drawerlayout之双宿双飞

  在未引入Design Support Library以前,想想我们要实现上面的导航效果,需要怎么做?
  我们需要在DrawerLayout里面通过ListView来设置导航条目,然后通过设置ListView的ItemOnclickListener设置相应的点击事件;其实NavigationView的源码也是通过这种方式实现的,唯一复杂的地方就是ListView里的Item很多时候视图并不一样。
如果你想了解这种方式可以查看我的这篇文章Android Material Design之DrawerLayout与ToolBar的使用
  谷歌引入的NavigationView的目的是为了将这部分的布局简化了,通过NavigationView中的app:headerLayout和app:menu属性将侧换导航中的头部和菜单布局分离出来。
  那我们接下来讲诉怎么实现
1、在gradle中依赖包design包

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

2、实现主布局文件

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/custom_toolbar"/>
        
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    LinearLayout>

    
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        app:headerLayout="@layout/navigationview_header"
        app:menu="@menu/drawer"/>
android.support.v4.widget.DrawerLayout>

3、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件
navigation_header.xml


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:background="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/header"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="2dp"
        android:text="欢迎关注天天吃豆腐的简书"
        android:textColor="@color/colorAccent"
        android:textSize="16sp"/>
RelativeLayout>

drawer.xml

"http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/navigation_item1"
            android:checkable="true"
            android:checked="true"
            android:icon="@mipmap/ic_launcher"
            android:title="欢迎"/>
        <item
            android:id="@+id/navigation_item2"
            android:checkable="true"
            android:icon="@mipmap/ic_launcher"
            android:title="关注"/>
        <item
            android:id="@+id/navigation_item3"
            android:checkable="true"
            android:icon="@mipmap/ic_launcher"
            android:title="简书"/>
    
    <item
        android:id="@+id/navigation_sub"
        android:title="新增功能">
        
            <item
                android:id="@+id/navigation_sub_item1"
                android:checkable="true"
                android:icon="@mipmap/ic_launcher"
                android:title="天天吃豆腐"/>
            <item
                android:id="@+id/navigation_sub_item2"
                android:checkable="true"
                android:icon="@mipmap/ic_launcher"
                android:title="天天吃豆腐"/>
            <item
                android:id="@+id/navigation_sub_item3"
                android:checkable="true"
                android:icon="@mipmap/ic_launcher"
                android:title="天天吃豆腐"/>
        
    item>

4、实现代码

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.toolbar)
    Toolbar mToolbar;
    @Bind(R.id.content)
    FrameLayout mContent;
    @Bind(R.id.navigationView)
    NavigationView mNavigationView;
    @Bind(R.id.drawerLayout)
    DrawerLayout mDrawerLayout;

    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mToolbar.setTitle("测试");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //创建返回键,并实现打开关/闭监听
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);
        //初始化状态
        mDrawerToggle.syncState();
        //将DrawerLayout与DrawerToggle绑定
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        mDrawerLayout.setScrimColor(Color.TRANSPARENT); //去除侧边阴影

        //设置导航栏NavigationView的点击事件
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.navigation_item1:
                        mToolbar.setTitle("关注");
                        break;
                    case R.id.navigation_item2:
                        mToolbar.setTitle("简书");
                        break;
                    case R.id.navigation_item3:
                        mToolbar.setTitle("天天吃豆腐");
                        break;
                    case R.id.navigation_sub_item1:
                        mToolbar.setTitle("关注");
                        break;
                    case R.id.navigation_sub_item2:
                        mToolbar.setTitle("简书");
                        break;
                    case R.id.navigation_sub_item3:
                        mToolbar.setTitle("天天吃豆腐");
                        break;
                }

                //将选中设为点击状态
                item.setChecked(true);
                //关闭抽屉
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }
}

  如果你想默认第一个为点击状态,在drawer中设置android:checked=”true”。跟前一篇的自定义侧滑view对比,使用NavigationView可以大大简化我们的代码。代码中的@Bind是引用了Butterknife插件,快速初始化控件。依赖complie ‘com.jakewharton:butterknife:7.0.0’。
  效果图:

NavigationView与Drawerlayout之双宿双飞_第1张图片

源码下载

你可能感兴趣的:(Android)