MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果,NavigationView是android-support-design包下的一个控件,该包下还有AppBarLayout、CoordinatorLayout、FloatingActionButton、SnackBar、TabLayout、TextInputLayout等控件,也是Google在Android 5.x推荐规范式使用的控件。本系列将逐一介绍每个控件的使用。。。

好了,先来看看本文最终的效果图吧!

它把标题栏也遮住了,正是符号Google的材料设计思想。。。

现在我们分几步说说怎么实现这个效果吧:

一、首先就需要添加包依赖,废话就不说了,上图

二、主布局: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">

        <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.support.v4.widget.DrawerLayout>





其中在NavigationView布局中,需要给NavigationView设置app:headerLayout和app:menu,那是什么意思呢?

 

headerLayout就是给导航栏增加一个头部Layout。

menu就是对应菜单项的选择条目。

三、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件

navigation_header.xml

 

01. <?xml version="1.0" encoding="utf-8"?>
02. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03. android:layout_width="match_parent"
04. android:layout_height="200dp"
05. android:background="#30469b">
06. <TextView
07. android:id="@+id/header_tv"
08. android:layout_width="wrap_content"
09. android:layout_height="wrap_content"
10. android:layout_centerInParent="true"
11. android:text="HeaderLayout"
12. android:textColor="#ffffff"
13. android:textSize="25sp" />
14. </RelativeLayout>
drawer.xml

 

 

01. <?xml version="1.0" encoding="utf-8"?>
02. <menu xmlns:android="http://schemas.android.com/apk/res/android">
03. <group android:checkableBehavior="single">
04. <item
05. android:id="@+id/item_one"
06. android:icon="@mipmap/icon"
07. android:title="我的动态"></item>
08. <item
09. android:id="@+id/item_two"
10. android:icon="@mipmap/icon"
11. android:title="我的留言"></item>
12. <item
13. android:id="@+id/item_three"
14. android:icon="@mipmap/icon"
15. android:title="附近的人"></item>
16. </group>
17. </menu>

四、这时候开始写代码了,也很简单:

MainActivity:

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {
    private  DrawerLayout mDrawerLayout =null;

    @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);
        //这里是动态的在action bar上添加图标
        final ActionBar ab = getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.ic_menu);
        ab.setDisplayHomeAsUpEnabled(true);

        //设置抽屉DrawerLayout
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
//        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_launcher,
//                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;
            }
        });
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            mDrawerLayout.openDrawer(GravityCompat.START);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

}


小结 : 这里的DrawerLayout的布局是很重要的它的层次一次是 标题栏 主屏幕内容(fragment) 侧边栏内容,层次比较清晰,要在哪里填充数据就在相应的地方写代码.这里写的参考的zhanghongyang的博客,补充了三个fragment.


源码地址:http://download.csdn.net/detail/qq_26296197/9494419

在这也可以参考zhanghongyang的博客   http://blog.csdn.net/lmj623565791/article/details/46405409,写的也很好。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值