<Android 基础(七)> DrawerLayout and NavigationView
2016-06-24 22:36
501 查看
介绍
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而已,没有其他的意思,只是一个普通的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左上角图标响应
源代码
###点击下载源代码###相关文章推荐
- Android中init进程的工作
- Android如何在广播接收器中启动活动和弹出对话框
- android 异步任务AsyncTask
- android Merger 代替 FrameLayout:布局优化
- Android 查看内存使用工具 (procstats)
- Android 基于SurfaceTexture shader的类动漫+波浪形图像处理
- android Context深度剖析
- 详解Android中AsyncTask的使用
- Andorid与其他操作系统的知识
- Android绘图基础之: Canvas 和 Paint
- AsyncTask
- 如何获取注册高德Key使用的SHA1值与包名?
- Android Parcelable的写法
- 移动混合开发之android文件管理-->flexbox,webFont。
- Android二维码扫描开发(一):实现思路与原理
- Android初级教程理论知识(第十章Fragment与动画)
- Android初级教程理论知识(第十章Fragment与动画)
- Android-2016后半年的学习计划
- android中的service与Activity之间的通信
- Android Studio中获取sha1证书指纹