Android 实现侧滑菜单-design
2016-08-16 23:54
316 查看
google提供的Design开发包里,有很多实用好看的新控件,这里介绍下使用DrawerLayout+NavigationView实现侧滑菜单效果
要使用Design包,只要在项目的build.gradle中添加下依赖就好(记得更新SDK到最新版本)
使用起来很简单,我们基本上只需要写写布局就好了
简单的把NavigationView放在DrawerLayout里,在实践中发现个问题,只有把NavigationView控件放在DrawerLayout布局最后面,NavigationView控件才能响应菜单的点击事件,不知道大家遇到了这样的问题吗
app:headerLayout 设置NavigationView的头布局
app:menu 设置NavigationView的菜单布局
android:layout_gravity start或left把窗口隐藏到界面左边,end或right隐藏到右边
菜单头部navi_head布局
菜单项menu_drawer布局
图个方便,这里的icon我就使用的mipmap下的系统图片,可更改成drawable下的自定义图片
效果图:
(1)去除滚动条
代码中加上下面的代码,传入当前的NavigationView对象进入就能去掉滚动条啦
(2)让二级菜单也有选中效果
想让二级菜单也有选中效果,网上比较流行的一个方法特别麻烦
先去掉menu布局中group的android:checkableBehavior=”single”属性,再给每个item添加android:checkable=”true”,最后修改NavigationView监听的代码:
但实际上据我的测试,只要添加一行代码item.setCheckable(true)就能起到同样的显示效果了
不需要修改其他界面
(3)设置菜单从右滑出
修改NavigationView布局文件中android:layout_gravity=”end”,再设置打开时候的参数为mDrawerLayout.openDrawer(GravityCompat.END),菜单就会从右边滑出了
(4)实例化headerLayout中的控件
如果我们需要使用headerLayout布局中的控件该怎么找到它呢,这里不能直接调用findViewById()去找,需要使用以下方式,先获取头部的View,在findViewById()
要使用Design包,只要在项目的build.gradle中添加下依赖就好(记得更新SDK到最新版本)
dependencies { compile 'com.android.support:design:23.4.0' }
使用起来很简单,我们基本上只需要写写布局就好了
布局文件
<?xml version="1.0" encoding="utf-8" ?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" > <!-- 界面布局 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:id="@+id/tv_open" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="打开侧滑菜单" android:textSize="30sp"/> </LinearLayout > <!-- 侧滑菜单栏 --> <android.support.design.widget.NavigationView android:id="@+id/nv_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navi_head" app:menu="@menu/menu_drawer"/> </android.support.v4.widget.DrawerLayout >
简单的把NavigationView放在DrawerLayout里,在实践中发现个问题,只有把NavigationView控件放在DrawerLayout布局最后面,NavigationView控件才能响应菜单的点击事件,不知道大家遇到了这样的问题吗
app:headerLayout 设置NavigationView的头布局
app:menu 设置NavigationView的菜单布局
android:layout_gravity start或left把窗口隐藏到界面左边,end或right隐藏到右边
菜单头部navi_head布局
<?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="match_parent" android:background="?attr/colorPrimary" android:gravity="center" android:orientation="vertical" android:paddingBottom="50dp" android:paddingTop="50dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="zwt_UseDesignDemo"/> </LinearLayout>
菜单项menu_drawer布局
<?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/menu_mon" android:icon="@mipmap/ic_launcher" android:title="Mon"/> <item android:id="@+id/menu_tues" android:icon="@mipmap/ic_launcher" android:title="Tues"/> <item android:id="@+id/menu_wed" android:icon="@mipmap/ic_launcher" android:title="Wed"/> <item android:id="@+id/menu_thurs" android:icon="@mipmap/ic_launcher" android:title="Thurs"/> <item android:id="@+id/menu_fri" android:icon="@mipmap/ic_launcher" android:title="Fri"/> </group> <!--二级菜单--> <item android:title="weekend"> <menu> <item android:id="@+id/menu_sat" android:icon="@mipmap/ic_launcher" android:title="Sat"/> <item android:id="@+id/menu_sun" android:icon="@mipmap/ic_launcher" android:title="Sun"/> </menu> </item> </menu>
图个方便,这里的icon我就使用的mipmap下的系统图片,可更改成drawable下的自定义图片
主要代码
/** * DrawerLayout+NavigationView实现侧滑菜单 * Created by zhuwentao on 2016-08-16. */ public class MainActivity extends AppCompatActivity { /** 抽屉视图 */ private DrawerLayout mDrawerLayout; /** 侧滑菜单视图 */ private NavigationView mMenuNv; /** 打开侧滑菜单 */ private TextView mOpenMenuTv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initUI(); initListener(); } /** * 初始化界面 */ private void initUI() { mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mMenuNv = (NavigationView) findViewById(R.id.nv_layout); mOpenMenuTv = (TextView) findViewById(R.id.tv_open); } /** * 初始化监听 */ private void initListener() { mOpenMenuTv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 打开侧滑菜单 mDrawerLayout.openDrawer(GravityCompat.START); } }); // 设置侧滑菜单点击事件监听 mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { selectItem(item.getItemId()); // 关闭侧滑菜单 mDrawerLayout.closeDrawers(); return true; } }); } /** * 响应item点击事件 * @param itemid */ private void selectItem(int itemid) { switch (itemid) { case R.id.menu_mon: Toast.makeText(MainActivity.this, "点击Mon", Toast.LENGTH_SHORT).show(); break; case R.id.menu_tues: Toast.makeText(MainActivity.this, "点击Tues", Toast.LENGTH_SHORT).show(); break; case R.id.menu_wed: Toast.makeText(MainActivity.this, "点击Wed", Toast.LENGTH_SHORT).show(); break; case R.id.menu_thurs: Toast.makeText(MainActivity.this, "点击Thurs", Toast.LENGTH_SHORT).show(); break; case R.id.menu_fri: Toast.makeText(MainActivity.this, "点击Fri", Toast.LENGTH_SHORT).show(); break; case R.id.menu_sat: Toast.makeText(MainActivity.this, "点击 Sat", Toast.LENGTH_SHORT).show(); break; case R.id.menu_sun: Toast.makeText(MainActivity.this, "点击 Sun", Toast.LENGTH_SHORT).show(); break; default: break; } } }
效果图:
(1)去除滚动条
代码中加上下面的代码,传入当前的NavigationView对象进入就能去掉滚动条啦
/** * 不显示滚动条 */ private void removeNavigationViewScrollbar(NavigationView navView) { if (navView != null) { NavigationMenuView navigationMenuView = (NavigationMenuView) navView.getChildAt(0); if (navigationMenuView != null) { navigationMenuView.setVerticalScrollBarEnabled(false); } } }
(2)让二级菜单也有选中效果
想让二级菜单也有选中效果,网上比较流行的一个方法特别麻烦
先去掉menu布局中group的android:checkableBehavior=”single”属性,再给每个item添加android:checkable=”true”,最后修改NavigationView监听的代码:
// 设置侧滑菜单点击事件监听 mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { private MenuItem mMenuItem; @Override public boolean onNavigationItemSelected(MenuItem item) { selectItem(item.getItemId()); if (mMenuItem != null) { mMenuItem.setChecked(false); } item.setChecked(true); mMenuItem = item; // 关闭侧滑菜单 mDrawerLayout.closeDrawers(); return true; } });
但实际上据我的测试,只要添加一行代码item.setCheckable(true)就能起到同样的显示效果了
不需要修改其他界面
// 设置侧滑菜单点击事件监听 mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { selectItem(item.getItemId()); item.setCheckable(true); // 关闭侧滑菜单 mDrawerLayout.closeDrawers(); return true; } });
(3)设置菜单从右滑出
修改NavigationView布局文件中android:layout_gravity=”end”,再设置打开时候的参数为mDrawerLayout.openDrawer(GravityCompat.END),菜单就会从右边滑出了
(4)实例化headerLayout中的控件
如果我们需要使用headerLayout布局中的控件该怎么找到它呢,这里不能直接调用findViewById()去找,需要使用以下方式,先获取头部的View,在findViewById()
View view = mMenuNv.getHeaderView(0); ImageView mImageIv = (ImageView) view.findViewById(R.id.nv_head_image);
相关文章推荐
- Android滑动菜单特效实现,侧滑菜单实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- 实现Android侧滑菜单:SlidingMenu
- android文章学习 侧滑菜单实现
- 【Android 界面效果31】Android--侧滑菜单应用的实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android高手进阶篇4-实现侧滑菜单框架,一分钟集成到项目中
- Android菜单侧滑特效实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- android的左右侧滑菜单实现
- Android高手进阶篇4-实现侧滑菜单框架,一分钟集成到项目中
- Android--侧滑菜单应用的实现
- Android--侧滑菜单应用的实现
- 防人人网客户端侧滑效果,简单实现Android滑动菜单特效