本实例的最终效果图:
下面分析实现效果:
一:添加包依赖
在引入compile 'com.android.support:design:22.2.0'后,android studio报错,与编译版本24不同。于是把22.2.2改为24.2.0之后就成功了。
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:24.2.0'
compile 'com.android.support:design:24.2.0'
compile 'com.android.support:support-v4:24.2.0'
testCompile 'junit:junit:4.12'
}
二:主布局 :activity_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"
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:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--主页面bar-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#30469b"/>
<!--内容显示布局-->
<FrameLayout
android:id="@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<!--定义侧边栏-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer" />
<!--android:layout_gravity="left" 侧边栏从左边滑出。设为right从右边滑出-->
</android.support.v4.widget.DrawerLayout>
</pre>NavigationView菜单整体分为俩部分,上面一部分叫做He'aderLayout,下面的点击项都是menu。<p></p><p>也就是说:</p><p><span style="white-space:pre"></span>headerlayout就是给导航栏增加一个头部Layout.</p><p><span style="white-space:pre"></span>menu就是对应菜单项的选择条目。</p><p>三:headerlayout和menu对应的布局navigation_header.XML和菜单drawer.XML文件。</p><p>navigation_header.XML</p><p></p><pre name="code" class="java"><?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="200dp"
android:background="#30469b">
<TextView
android:id="@+id/header_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="HeaderLayout"
android:textColor="#ffffff"
android:textSize="25sp" />
</RelativeLayout>
</pre>drawer.XML 在目录res/menu/drawer.xml中。需新建menu菜单<p></p><p></p><pre name="code" class="java"><?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/item_one"
android:icon="@mipmap/icon"
android:title="我的动态"></item>
<item
android:id="@+id/item_two"
android:icon="@mipmap/icon"
android:title="我的留言"></item>
<item
android:id="@+id/item_three"
android:icon="@mipmap/icon"
android:title="附近的人"></item>
</group>
</menu>
android:checkableBehavior="single"指组中只有一个菜单项可以checked(radio按钮)。
如果要实现item之间的分割线,可以用group包含不同的item来实现,记得为group添加id.
四:MainActivity代码:
package com.example.myservice.navigation;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//设置ToolBar
final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(mToolbar);
//设置抽屉DrawerLayout
final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
R.string.drawer_open, R.string.drawer_close);
mDrawerToggle.syncState();//初始化状态
mDrawerLayout.setDrawerListener(mDrawerToggle);
//设置导航栏NavigationView的点击事件
NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
switch (menuItem.getItemId())
{
case R.id.item_one:
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentOne()).commit();
mToolbar.setTitle("我的动态");
break;
case R.id.item_two:
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentTwo()).commit();
mToolbar.setTitle("我的留言");
break;
case R.id.item_three:
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentThree()).commit();
mToolbar.setTitle("附近的人");
break;
}
menuItem.setChecked(true);//点击了把它设为选中状态
mDrawerLayout.closeDrawers();//关闭抽屉
return true;
}
});
}
}
上面的Fragment动态替换过程中,可以在beginTransaction()后面添加 .addToBackStack(null). 来实现后退栈。(注意前后有点啊)
上面的FragmentOne,FragmentTwo,FragmentThree以及对应的布局layout_one,layout_two,layout_three很简单,就不贴代码了。demo地址:http://www.it165.net/uploadfile/files/2015/0712/navigationView.rar
原文:http://www.it165.net/pro/html/201507/46841.html