Material Design (一),NavigationView+DrawerLayout轻松实现侧拉菜单
2016-03-16 17:08
507 查看
前言
Material Design是Google在2014年的I/O大会上推出的全新设计语言。Material Design是基于Android 5.0(API level 21)的,兼容5.0以下的设备时需要使用版本号v21.0.0以上的support v7包中的appcpmpat,不过遗憾的是support包只支持Material Design的部分特性。使用eclipse或Android Studio进行开发时,直接在Android SDK Manager中将Extras->Android Support Library升级至最新版即可。目前最新版本为:com.android.support:appcompat-v7:23.0.1。
这篇文章将介绍如何使用设计库里面的一个高级组件NavigationView,使用这个组件加DrawerLayout将非常轻松地实现侧拉菜单的效果,而不用像以前一样自己实现或是引用第三方开源项目实现侧拉菜单。
图片效果预览:
NatigationView的使用
上图中的左边部分就是NavigationView,它是一个ViewGroup(子类),它包括两个部分,一个是头部布局,一个是菜单布局。通常将这个ViewGroup结合DrawerLayout实现侧拉菜单,所以下面就先写一个布局文件:
这基本上就是一个固定的写法,而我们想做的是当用户选择了侧拉菜单的菜单后切换右边的内容界面,而内容界面可以使用一个FrameLayout,再加上Fragment就可以实现切换内容视图了。
由于这些控件都在特定的包里,所以需要加入库依赖:
观察上面的布局文件和图片预览,我们可以发现我们还需要一个头布局和一个菜单文件:
头布局:
这个布局文件可以自行修改,自行定制
菜单布局:
注意:每个菜单项
接下来就要在代码中完成控件的一些设置了
其中最重要的就是是NavigationView调用
ContentFragment.java
NavigationView组件使用很简单,下面是本文的效果图:
当然这是左侧菜单的情况,如果我们想要实现右侧菜单,那也非常简单,只需要将
由于演示Demo很简单,只是演示NavigationView这个设计库组件的使用,没有涉及到什么资源,所以这里就不贴上源码了,有兴趣的可以动手试一下,欢迎拍砖~
Material Design是Google在2014年的I/O大会上推出的全新设计语言。Material Design是基于Android 5.0(API level 21)的,兼容5.0以下的设备时需要使用版本号v21.0.0以上的support v7包中的appcpmpat,不过遗憾的是support包只支持Material Design的部分特性。使用eclipse或Android Studio进行开发时,直接在Android SDK Manager中将Extras->Android Support Library升级至最新版即可。目前最新版本为:com.android.support:appcompat-v7:23.0.1。
这篇文章将介绍如何使用设计库里面的一个高级组件NavigationView,使用这个组件加DrawerLayout将非常轻松地实现侧拉菜单的效果,而不用像以前一样自己实现或是引用第三方开源项目实现侧拉菜单。
图片效果预览:
NatigationView的使用
上图中的左边部分就是NavigationView,它是一个ViewGroup(子类),它包括两个部分,一个是头部布局,一个是菜单布局。通常将这个ViewGroup结合DrawerLayout实现侧拉菜单,所以下面就先写一个布局文件:
[code]<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- your content layout --> <FrameLayout android:layout_width="match_parent" android:background="#f00" android:layout_height="match_parent"> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigationView" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout>
这基本上就是一个固定的写法,而我们想做的是当用户选择了侧拉菜单的菜单后切换右边的内容界面,而内容界面可以使用一个FrameLayout,再加上Fragment就可以实现切换内容视图了。
由于这些控件都在特定的包里,所以需要加入库依赖:
[code]dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1' }
观察上面的布局文件和图片预览,我们可以发现我们还需要一个头布局和一个菜单文件:
头布局:
[code]<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:background="#00f" android:gravity="center" android:layout_height="200dp"> <TextView android:layout_width="wrap_content" android:text="用户名" android:textColor="#fff" android:layout_height="wrap_content"/> </LinearLayout>
这个布局文件可以自行修改,自行定制
菜单布局:
[code]<?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/navigation_item_1" android:checked="true" android:icon="@mipmap/ic_launcher" android:title="首页"/> <item android:id="@+id/navigation_item_2" android:icon="@mipmap/ic_launcher" android:title="新闻"> <menu> <item android:id="@+id/navigation_sub_item_1" android:icon="@mipmap/ic_launcher" android:title="热点"/> <item android:id="@+id/navigation_sub_item_2" android:icon="@mipmap/ic_launcher" android:title="体育"/> <item android:id="@+id/navigation_sub_item_3" android:icon="@mipmap/ic_launcher" android:title="科技"/> <item android:id="@+id/navigation_sub_item_4" android:icon="@mipmap/ic_launcher" android:title="创业"/> </menu> </item> <item android:id="@+id/navigation_item_3" android:checked="true" android:icon="@mipmap/ic_launcher" android:title="个人中心"/> </group> </menu>
注意:每个菜单项
item用
<group>标签包裹起来,并且
<group>标签的属性
android:checkableBehavior的值为
single,这就使得侧拉菜单为单选模式,同时,也可以给每个菜单添加子菜单,即
<item>标签下面再添加
<menu><item>...</item></menu>,还可以通过
<item>标签的添加属性及值android:checked=”true”来标识该
<item>为选中。
接下来就要在代码中完成控件的一些设置了
[code]package com.example.lt.meterialdesign; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.NavigationView; import android.support.design.widget.Snackbar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Gravity; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.widget.FrameLayout; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout); final FragmentManager fm = getSupportFragmentManager(); Fragment fragment = new ContentFragment(); Bundle bundle = new Bundle(); bundle.putString("title","首页"); fragment.setArguments(bundle); fm.beginTransaction().replace(R.id.fl_content,fragment).commit(); final NavigationView navigationView = (NavigationView) findViewById(R.id.navigationView); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { Toast.makeText(MainActivity.this, menuItem.getTitle(), 0).show(); Fragment fragment = new ContentFragment(); Bundle bundle = new Bundle(); bundle.putString("title", menuItem.getTitle().toString()); fragment.setArguments(bundle); fm.beginTransaction().replace(R.id.fl_content,fragment).commit(); drawerLayout.closeDrawer(Gravity.LEFT); return false; } }); } }
其中最重要的就是是NavigationView调用
setNavigationItemSelectedListener()设置菜单项选中监听了,这里当用户点击了某个菜单项的时候,将会弹出一个吐司显示选中的菜单的标题,然后用Fragment的视图替换那个内容FrameLayout,最后就是让DrawerLayout自动关闭。
ContentFragment.java
[code]package com.example.lt.meterialdesign; import android.app.ActionBar; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; /** * Created by lt on 2016/3/16. */ public class ContentFragment extends Fragment{ @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle bundle) { TextView textView = new TextView(getActivity()); if(getArguments()!=null){ String title = getArguments().getString("title"); textView.setText(title); textView.setGravity(Gravity.CENTER); textView.setLayoutParams(new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT)); } return textView; } }
NavigationView组件使用很简单,下面是本文的效果图:
当然这是左侧菜单的情况,如果我们想要实现右侧菜单,那也非常简单,只需要将
<android.support.design.widget.NavigationView>的
android:layout_gravity属性值设为right,然后在菜单选择监听中让DrawerLayout选择关闭右侧菜单即可。
由于演示Demo很简单,只是演示NavigationView这个设计库组件的使用,没有涉及到什么资源,所以这里就不贴上源码了,有兴趣的可以动手试一下,欢迎拍砖~
相关文章推荐
- MJRefresh的简单使用
- 抽象工厂模式
- 设计模式 之 装饰者(Decorator)模式
- lintcode:带环链表
- java虚拟机工具入门
- HDOJ-2838 Cow Sorting
- Kerberos认证浅析
- java虚拟机工具入门
- iOS 封装一个 Date处理服务器中返回的时间
- 如何阅读jQuery源码整体架构
- ConurrentHashMap和Hashtable的区别
- APT源
- RecyclerView调用smoothScrollToPosition() 控制滑动速度
- MySQL日志
- 修改ssh登录端口
- 高项:3.14日作业
- uva11795 Mega Man's Mission
- MFC特性
- 菜鸟成长记-UITableView
- Computer Graphic & OpenGL