Material Design （一），NavigationView+DrawerLayout轻松实现侧拉菜单

最新推荐文章于 2024-05-15 06:30:06 发布

宿罪

最新推荐文章于 2024-05-15 06:30:06 发布

阅读量3.2k

点赞数

分类专栏： Android进阶 Android进阶文章标签： android io大会 Material Navigation

本文链接：https://blog.csdn.net/ydxlt/article/details/50906691

版权

Android进阶同时被 2 个专栏收录

23 篇文章 4 订阅

订阅专栏

Android进阶

22 篇文章 0 订阅

订阅专栏

前言

Material Design是Google在2014年的I/O大会上推出的全新设计语言。Material Design是基于Android 5.0（API level 21）的，兼容5.0以下的设备时需要使用版本号v21.0.0以上的support v7包中的appcpmpat，不过遗憾的是support包只支持Material Design的部分特性。使用eclipse或Android Studio进行开发时，直接在Android SDK Manager中将Extras->Android Support Library升级至最新版即可。目前最新版本为：com.android.support:appcompat-v7:23.0.1。

这篇文章将介绍如何使用设计库里面的一个高级组件NavigationView，使用这个组件加DrawerLayout将非常轻松地实现侧拉菜单的效果，而不用像以前一样自己实现或是引用第三方开源项目实现侧拉菜单。

图片效果预览：

这里写图片描述

NatigationView的使用

上图中的左边部分就是NavigationView，它是一个ViewGroup（子类），它包括两个部分，一个是头部布局，一个是菜单布局。通常将这个ViewGroup结合DrawerLayout实现侧拉菜单，所以下面就先写一个布局文件：

<android.support.v4.widget.DrawerLayout
    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="match_parent"
    android:fitsSystemWindows="true">

    <!-- your content layout -->
    <FrameLayout
        android:layout_width="match_parent"
        android:background="#f00"
        android:layout_height="match_parent">

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

这基本上就是一个固定的写法，而我们想做的是当用户选择了侧拉菜单的菜单后切换右边的内容界面，而内容界面可以使用一个FrameLayout，再加上Fragment就可以实现切换内容视图了。

由于这些控件都在特定的包里，所以需要加入库依赖：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

观察上面的布局文件和图片预览，我们可以发现我们还需要一个头布局和一个菜单文件：

头布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:background="#00f"
              android:gravity="center"
              android:layout_height="200dp">
    <TextView
        android:layout_width="wrap_content"
        android:text="用户名"
        android:textColor="#fff"
        android:layout_height="wrap_content"/>
</LinearLayout>

这个布局文件可以自行修改，自行定制

菜单布局：

<?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/navigation_item_1"
            android:checked="true"
            android:icon="@mipmap/ic_launcher"
            android:title="首页"/>
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@mipmap/ic_launcher"
            android:title="新闻">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_1"
                    android:icon="@mipmap/ic_launcher"
                    android:title="热点"/>
                <item
                    android:id="@+id/navigation_sub_item_2"
                    android:icon="@mipmap/ic_launcher"
                    android:title="体育"/>
                <item
                    android:id="@+id/navigation_sub_item_3"
                    android:icon="@mipmap/ic_launcher"
                    android:title="科技"/>
                <item
                    android:id="@+id/navigation_sub_item_4"
                    android:icon="@mipmap/ic_launcher"
                    android:title="创业"/>
            </menu>
        </item>

        <item
            android:id="@+id/navigation_item_3"
            android:checked="true"
            android:icon="@mipmap/ic_launcher"
            android:title="个人中心"/>
    </group>
</menu>

注意：每个菜单项item用<group>标签包裹起来，并且<group>标签的属性android:checkableBehavior的值为single，这就使得侧拉菜单为单选模式，同时，也可以给每个菜单添加子菜单，即<item>标签下面再添加<menu><item>...</item></menu>，还可以通过<item>标签的添加属性及值android:checked=”true”来标识该<item>为选中。

接下来就要在代码中完成控件的一些设置了

package com.example.lt.meterialdesign;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.FrameLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        final FragmentManager fm = getSupportFragmentManager();
        Fragment fragment = new ContentFragment();
        Bundle bundle = new Bundle();
        bundle.putString("title","首页");
        fragment.setArguments(bundle);
        fm.beginTransaction().replace(R.id.fl_content,fragment).commit();
        final NavigationView navigationView = (NavigationView) findViewById(R.id.navigationView);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                Toast.makeText(MainActivity.this, menuItem.getTitle(), 0).show();
                Fragment fragment = new ContentFragment();
                Bundle bundle = new Bundle();
                bundle.putString("title", menuItem.getTitle().toString());
                fragment.setArguments(bundle);
                fm.beginTransaction().replace(R.id.fl_content,fragment).commit();
                drawerLayout.closeDrawer(Gravity.LEFT);
                return false;
            }
        });
    }
}

其中最重要的就是是NavigationView调用setNavigationItemSelectedListener()设置菜单项选中监听了，这里当用户点击了某个菜单项的时候，将会弹出一个吐司显示选中的菜单的标题，然后用Fragment的视图替换那个内容FrameLayout，最后就是让DrawerLayout自动关闭。

ContentFragment.java

package com.example.lt.meterialdesign;

import android.app.ActionBar;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by lt on 2016/3/16.
 */
public class ContentFragment extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle bundle) {
        TextView textView = new TextView(getActivity());
        if(getArguments()!=null){
            String title = getArguments().getString("title");
            textView.setText(title);
            textView.setGravity(Gravity.CENTER);
            textView.setLayoutParams(new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
        }
        return textView;
    }
}

NavigationView组件使用很简单，下面是本文的效果图：

这里写图片描述

当然这是左侧菜单的情况，如果我们想要实现右侧菜单，那也非常简单，只需要将<android.support.design.widget.NavigationView>的android:layout_gravity属性值设为right，然后在菜单选择监听中让DrawerLayout选择关闭右侧菜单即可。

由于演示Demo很简单，只是演示NavigationView这个设计库组件的使用，没有涉及到什么资源，所以这里就不贴上源码了，有兴趣的可以动手试一下，欢迎拍砖~

宿罪

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Material Design （一），NavigationView+DrawerLayout轻松实现侧拉菜单

前言 Material Design是Google在2014年的I/O大会上推出的全新设计语言。Material Design是基于Android 5.0（API level 21）的，兼容5.0以下的设备时需要使用版本号v21.0.0以上的support v7包中的appcpmpat，不过遗憾的是support包只支持Material Design的部分特性。使用eclipse或Android S
复制链接

扫一扫

专栏目录