Android DrawerLayout的使用

来源：互联网发布：java 公章识别编辑：程序博客网时间：2024/05/19 16:37

什么是DrawerLayout

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，侧拉菜单作为常见的导航交互控件，最开始在没有没有android官方控件时，很多时候都是使用开源的SlidingMenu,可以说drawerLayout是因为第三方控件如SlidingMenu等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）

DrawerLayout的使用

drawerLayout其实是一个布局控件，跟LinearLayout等控件是一种东西，但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局，就能有侧滑的效果。

有两点要注意：主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单，谁是主内容区；侧滑菜单的部分的布局（这里是LinearLayout）可以设置layout_gravity属性，他表示侧滑菜单是在左边还是右边。

一个简单的demo:

<!-- activity_main.xml --><?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/drawer_layout"    tools:context=".MainActivity">    <!-- 内容区布局 -->   <include layout="@layout/activity_main_content"/>    <!-- 侧滑菜单布局 -->    <LinearLayout        android:id="@+id/menu"        android:orientation="vertical"        android:layout_gravity="start"        android:background="#00bbff"        android:layout_width="match_parent"        android:layout_height="match_parent">    </LinearLayout></android.support.v4.widget.DrawerLayout>

<!-- activity_main_content.xml --><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:background="#996f00ff"        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="64dp" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello world"        /></LinearLayout>

// MainActivity.java public class MainActivity extends AppCompatActivity {    private DrawerLayout drawerLayout;    private Toolbar toolbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.mipmap.ic_launcher);        toolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if (drawerLayout.isDrawerOpen(GravityCompat.START)) {                    drawerLayout.closeDrawer(GravityCompat.START);                } else {                    drawerLayout.openDrawer(GravityCompat.START);                }            }        });    }}

效果图：

这里写图片描述

DrawerLayout 与 NavigationView组合使用

NavigationView：一个导航菜单框架，使用menu资源填充数据，使我们可以更简单高效的实现导航菜单。它提供了不错的默认样式、选中项高亮、分组单选、分组子标题、以及可选的Header.
NavigationView的典型用途就是配合之前v4包的DrawerLayout，作为其中的Drawer部分，即导航菜单的本体部分

NavigationView的使用(以下代码来自官方demo)：
典型的布局文件如下，外层是DrawerLayout，它的第一个child将作为content，第二个child作为Drawer

<!-- activity_main.xml --><?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:openDrawer="start">    <include        layout="@layout/app_bar_main"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_main"        app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>

NavigationView有两个重要属性：
app:headerLayout //接收一个layout，作为导航菜单顶部的Header，可选项。
app:menu //接收一个menu，作为导航菜单的菜单项，几乎是必选项，不然这个控件就失去意义了。但也可以在运行时动态改变menu属性。

headerLayout:

<!-- nav_header_main.xml --><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    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:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    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"        android:src="@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>

用于NavigationView的典型menu文件，应该是一个可选中菜单项的集合

<!-- activity_main_drawer.xml--><?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_camara"            android:icon="@android:drawable/ic_menu_camera"            android:title="Import" />        <item            android:id="@+id/nav_gallery"            android:icon="@android:drawable/ic_menu_gallery"            android:title="Gallery" />        <item            android:id="@+id/nav_slideshow"            android:icon="@android:drawable/ic_menu_slideshow"            android:title="Slideshow" />        <item            android:id="@+id/nav_manage"            android:icon="@android:drawable/ic_menu_manage"            android:title="Tools" />    </group>    <item android:title="Communicate">        <menu>            <item                android:id="@+id/nav_share"                android:icon="@android:drawable/ic_menu_share"                android:title="Share" />            <item                android:id="@+id/nav_send"                android:icon="@android:drawable/ic_menu_send"                android:title="Send" />        </menu>    </item></menu>

在activity中：

...//设置NavigationView的item选中监听NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(this);...//public boolean onNavigationItemSelected(MenuItem item) {        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camara) {            // 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;    }

效果：
这里写图片描述

0 0