NavigationView 可用于方便地创建导航抽屉,并且向下兼容到 Android 2.1。
效果如下 (AndroidStudio 1.5):
要使用 DrawerLayout,需要 v4 包,使用 NavigationView,需要 v7 包。
compile 'com.android.support:design:22.2.0' // 可修改,如下:
布局文件 content_main.xml :
<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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<!-- 我的内容布局-->
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text1" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
其中的 android:fitsSystemWindows 属性,大意如下:
这是一个 boolean 值的内部属性,让 View 可以根据系统窗口(如 status bar)来调整自己的布局,如果值为 true ,就会调整 View 的 padding 属性来给 system windows 留出空间。
headerLayout就是给导航栏增加一个头部Layout。
menu就是对应菜单项的选择条目。
navigation_header.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="250dp"
android:background="?attr/colorPrimary"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="16dp"
android:background="@drawable/xx07"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center"
android:text="hello,world !"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textSize="20sp"/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--注意图片的大小,图片大了将显示不了,现在所有的大约为 21px * 21px -->
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_2"
android:icon="@drawable/icon_communities"
android:title="@string/text2"/>
<item
android:id="@+id/nav_3"
android:icon="@drawable/icon_event"
android:title="@string/text3"/>
<item
android:id="@+id/nav_4"
android:icon="@drawable/icon_hangouts"
android:title="@string/text4"/>
<item
android:id="@+id/nav_5"
android:icon="@drawable/icon_hot"
android:title="@string/text5"/>
</group>
<item android:title="@string/text6">
<menu>
<item
android:icon="@drawable/icon_local"
android:title="@string/text7"/>
<item
android:icon="@drawable/icon_photos"
android:title="@string/text8"/>
</menu>
</item>
</menu>
所用的 strings.xml:
<resources>
<string name="app_name">ChouTi</string>
<string name="action_settings">Settings</string>
<string name="text1">打开</string>
<string name="text2">艺术家</string>
<string name="text3">专辑</string>
<string name="text4">歌曲</string>
<string name="text5">播放列表</string>
<string name="text6">子列表</string>
<string name="text7">设置</string>
<string name="text8">风格</string>
<string name="drawer_open">打开</string>
<string name="drawer_close">关闭</string>
</resources>
MainActivity.java :
package com.scxh.chouti;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.navigation);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,
mDrawerLayout,
toolbar,
R.string.drawer_open,
R.string.drawer_close);
mDrawerToggle.syncState();//初始化状态
mDrawerLayout.setDrawerListener(mDrawerToggle);
setupDrawerContent(navigationView);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDrawerLayout.openDrawer(Gravity.LEFT);
}
});
}
private void setupDrawerContent(final NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}
}
其中的 ActionBarDrawerToggle 是 DrawerLayout.DrawerListener 实现。
作用:
1. 改变 android.R.id.home 返回的图标;
2. Drawer 拉出,隐藏,带有 android.R.id.home 动画效果;
3. 监听 Drawer 拉出,隐藏。
如果不使用 ActionBarDrawerToggle,可修改 MainActivity.java 代码,改后效果如下(只写了打开功能,没有写关
闭功能):
MainActivity.java :
package com.scxh.chouti;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 启用home as up
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setHomeAsUpIndicator(R.drawable.icon_communities);
actionBar.setDisplayHomeAsUpEnabled(true);
}
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.navigation);
/* ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,
mDrawerLayout,
toolbar,
R.string.drawer_open,
R.string.drawer_close);
mDrawerToggle.syncState();//初始化状态
mDrawerLayout.setDrawerListener(mDrawerToggle);
*/
setupDrawerContent(navigationView);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDrawerLayout.openDrawer(Gravity.LEFT);
}
});
}
private void setupDrawerContent(final NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}
/**
* 在home菜单被点击的时候,打开drawer(这一步和navigation view没什么关系)
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}
}