介绍:
DrawerLayout是一个布局,在布局中允许放两个直接子控件,第一个只主屏幕中显示的内容,第二个是滑动菜单中显示的内容。修改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/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<RelativeLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
<TextView
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is Menu"
android:textSize="30sp"
android:background="#FFF"
/>
</android.support.v4.widget.DrawerLayout>
第二个控件中必须指定layout_gravity属性,告诉DrawerLayout滑动菜单实在屏幕的左边还是右边。start会根据系统语言来判断。
在ToolBar菜单中添加导航按钮,将滑动菜单展示出来:
protected void onCreate(Bundle savedInstanceState) {
drawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
ActionBar actionBar= getSupportActionBar();
if(actionBar!=null){
// 显示导航按钮
actionBar.setDisplayHomeAsUpEnabled(true);
// 设置导航图标,默认为一个返回按钮
actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
}
return true;
}
ToolBar 最左的按钮叫HomeAsUp,默认为一个返回的按钮,含义是上一个图标,id永远为Android.R.id.home;
NavigationView
在滑动菜单页面定制任意布局;他是Design Support库中提供的一个控件,使用方法:
1.将库导入项目:
打开app/build.gradle文件,在dependencies闭包中添加如下内容:
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.0.1' compile 'com.android.support:design:25.0.1' compile 'de.hdodenhof:circleimageview:2.1.0' testCompile 'junit:junit:4.12' }
CircleImageView可以用来轻松实现图片圆形化功能。
2、准备menu和headerLayout。menu用来显示具体的图标项,headerLayout用来在NavigationView中显示头部布局;
在menu文件夹下建立nav_menu.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_call"
android:icon="@mipmap/ic_launcher"
android:title="Call"/>
<item android:id="@+id/nav_friends"
android:icon="@mipmap/ic_launcher"
android:title="Friends"/>
<item android:id="@+id/nav_mail"
android:icon="@mipmap/ic_launcher"
android:title="Mail"/>
<item android:id="@+id/nav_task"
android:icon="@mipmap/ic_launcher"
android:title="Task"/>
</group>
</menu>
在layout文件夹下新建nav_header.xml文件,代码如下:
version="1.0" encoding="utf-8"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/username"
android:layout_alignParentBottom="true"
android:text="tonygreendev@gmail.com"
android:textColor="#FFF"
android:textSize="14sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/mail"
android:layout_alignParentTop="true"
android:text="Tony Green"
android:textColor="#FFF"
android:textSize="14sp"/>
</RelativeLayout>
3、修改activity_main.xml中的代码:
<FrameLayout ... </FrameLayout> <android.support.design.widget.NavigationView app:menu="@menu/nav_menu" app:headerLayout="@layout/nav_header" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:id="@+id/nav_view" />
4、添加事件:NavigationView view=(NavigationView)findViewById(R.id.nav_view);
view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
drawerLayout.closeDrawers();
return true;
}
});