NavigationView与Drawerlayout之双宿双飞

来源：互联网发布：win10深度系统优化编辑：程序博客网时间：2024/06/05 14:24

　　在未引入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">    <!--内容+toolbar-->    <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

<?xml version="1.0" encoding="utf-8"?><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

<menu xmlns:android="http://schemas.android.com/apk/res/android">    <group>        <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="简书"/>    </group>    <item        android:id="@+id/navigation_sub"        android:title="新增功能">        <menu>            <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="天天吃豆腐"/>        </menu>    </item></menu>

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’。
　　效果图：

源码下载

0 0