NavigationView的实例应用

来源：互联网发布：开淘宝网店发货图片编辑：程序博客网时间：2024/06/05 18:44

本实例的最终效果图：

下面分析实现效果：

一：添加包依赖

在引入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

0 0