DrawerLayout and NavigationView

介绍

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件
android.support.v4.widget.DrawerLayout

NavigationView是一个导航菜单框架，使用menu资源填充数据
常用来配合DrawerLayout使用

基本使用

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:id="@+id/drawerlayout"    android:layout_width="match_parent"    android:layout_height="match_parent">    ……</android.support.v4.widget.DrawerLayout>

使用DrawerLayout的时候需要将该布局作为根布局，然后在DrawerLayout中添加其他布局作为显示界面。

代码

drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);获取DrawerLayout对象//设置监听事件，监听DrawerLayout的状态，打开，关闭，滑动距离，状态改变，可以实现自己的定制drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {    @Override    public void onDrawerSlide(View drawerView, float slideOffset) {        Log.e(TAG , " onDrawerSlide slideOffset = " + slideOffset);    }    @Override    public void onDrawerOpened(View drawerView) {        Log.e(TAG , " onDrawerOpened ");    }    @Override    public void onDrawerClosed(View drawerView) {        Log.e(TAG , " onDrawerClosed ");    }    @Override    public void onDrawerStateChanged(int newState) {        Log.e(TAG , " onDrawerStateChanged ");    }});

DrawerLayout的状态监听，listener的回调提供给开发者使用。

NavigationView

布局

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="240dp" android:background="@color/colorPrimaryDark" android:orientation="vertical">    //引用GitHub上的开源库    <de.hdodenhof.circleimageview.CircleImageView  android:id="@+id/civ_profile" android:layout_width="150dp" android:layout_height="150dp" android:layout_alignParentLeft="true" android:layout_marginLeft="24dp" android:layout_marginStart="24dp" android:layout_marginTop="20dp" android:src="@drawable/logo" />    <TextView  android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/civ_profile" android:layout_below="@+id/civ_profile" android:layout_marginTop="10dp" android:text="Askmak Sharon" android:textColor="#FFFFFF" android:textSize="8pt" android:textStyle="bold" />    <TextView  android:id="@+id/tv_email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/civ_profile" android:layout_below="@+id/tv_name" android:layout_marginTop="10dp" android:text="onlyloveyd@gmail.com" android:textColor="#FFFFFF" android:textSize="8pt" android:textStyle="italic" /></RelativeLayout

这里使用了Github上的开关库de.hdodenhof.circleimageview.CircleImageView，其中可以设置一些属性，这里没有设置，可能是因为我使用的图片风格的原因，将头像的边框加上去后看上去不是那么协调

属性	意义
app:civ_border_color=”“	边框颜色
app:civ_border_width=”“	边框宽度
app:civ_fill_color=”“	填充颜色

second_menu.xml
这里只是名字叫做second_menu而已，没有其他的意思，只是一个普通的menu资源文件

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item  android:id="@+id/nv_profile" android:icon="@drawable/profile" android:orderInCategory="80" android:title="Profile" />    <item  android:id="@+id/nv_video" android:icon="@drawable/video" android:orderInCategory="90" android:title="Video" />    <item  android:id="@+id/nv_help" android:icon="@drawable/help" android:orderInCategory="100" android:title="Help" /></menu>

这个menu资源是用来在NavigationView中使用的导航菜单

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" android:id="@+id/drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent">    <LinearLayout  android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">        <include layout="@layout/toolbar"></include>        <FrameLayout  android:id="@+id/frame" android:layout_width="match_parent" android:layout_height="match_parent">            <ImageView  android:id="@+id/content_iv" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@mipmap/ic_launcher"/>        </FrameLayout>    </LinearLayout>    <android.support.design.widget.NavigationView  android:id="@+id/nv_left" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/header" app:menu="@menu/second_menu">    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

比较关键的几个点

android:layout_gravity=”start”
app:headerLayout=”@layout/header”//头布局
app:menu=”@menu/second_menu”//菜单资源

代码
MainActivity.java

package mraz.com.actionbardemo;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.design.widget.Snackbar;import android.support.v4.view.MenuItemCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.SearchView;import android.support.v7.widget.Toolbar;import android.util.Log;import android.view.Gravity;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.ImageView;public class MainActivity extends AppCompatActivity {    public static String TAG = "yidong";    DrawerLayout drawerLayout;    NavigationView navigationView;    Toolbar toolbar;    ImageView imageView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);        toolbar = (Toolbar) findViewById(R.id.toolbar);        navigationView = (NavigationView) findViewById(R.id.nv_left);        imageView = (ImageView) findViewById(R.id.content_iv);        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp);        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {            @Override            public void onDrawerSlide(View drawerView, float slideOffset) {                Log.e(TAG , " onDrawerSlide slideOffset = " + slideOffset);            }            @Override            public void onDrawerOpened(View drawerView) {                Log.e(TAG , " onDrawerOpened ");            }            @Override            public void onDrawerClosed(View drawerView) {                Log.e(TAG , " onDrawerClosed ");            }            @Override            public void onDrawerStateChanged(int newState) {                Log.e(TAG , " onDrawerStateChanged ");            }        });        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem item) {                if(drawerLayout.isDrawerOpen(Gravity.LEFT))                    drawerLayout.closeDrawer(Gravity.LEFT);                switch(item.getItemId()) {                    case R.id.nv_profile:                        imageView.setImageResource(R.drawable.profile);                        break;                    case R.id.nv_video:                        imageView.setImageResource(R.drawable.video);                        break;                    case R.id.nv_help:                        imageView.setImageResource(R.drawable.help);                        break;                }                return true;            }        });    }    ……}

针对NavigationView中的Menu设置响应事件，使用的方式和上一篇中ActionBar中的菜单资源使用方式相似，都是用过getItemId获取资源的id，然后以此作为依据进行对应的响应操作

ActionBar和DrawerLayout配合

一般用户的操作就是右滑或者点击ActionBar左上角的Icon出现左侧抽屉菜单
左侧滑动上面的内容已经实现了，点击ActionBar实现抽屉菜单的开关只需要针对左上角的ActionBar的图标做对应的事件处理即可。

setSupportActionBar(toolbar);toolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp);

然后在onOptionsItemSelected中

case android.R.id.home:     if(!drawerLayout.isDrawerOpen(Gravity.LEFT)) {         drawerLayout.openDrawer(Gravity.LEFT, true);     }     break;

因为ActionBar的NavigationIcon对应的资源ID就是
android.R.id.home
根据这个资源ID定制对应的事件响应，上面就是简单的打开左侧的抽屉菜单

效果图

NavigationView菜单响应

ActionBar左上角图标响应

源代码

###点击下载源代码###

介绍

基本使用

DrawerLayout

NavigationView

ActionBar和DrawerLayout配合

效果图

源代码

更多相关文章

随机推荐