MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
来源:互联网 发布:最大公约数 方法 知乎 编辑:程序博客网 时间:2024/05/22 11:30
DrawerLayout可以实现左滑和右滑功能,只要在layout文件中配置好左右两个抽屉就可以了,左右两个抽屉可以是任意的view,结合NavigationView可以很好实现侧滑菜单的功能
要使用DrawerLayout,需要v4包,使用NavigationView,需要v7包
实例:
<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="false" 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>
toolbar是替换actionbar的新控件,要使用actionbar,必须先隐藏系统自带的bar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);mToolbar.setTitleTextColor(Color.WHITE);setSupportActionBar(mToolbar);
android:layout_height="?attr/actionBarSize"
?attr表示使用当前样式中定义的对应属性的值,比如此处,样式为noactionbar,它里面有个自定义属性actionbarsize,它的值默认是56dp
<item name="actionBarSize">@dimen/abc_action_bar_default_height_material</item>
<dimen name="abc_action_bar_default_height_material">56dp</dimen>我们让toolbar的最小高度沿用这个值,以保持风格的统一
drawlayout只需要配置layout_gravity属性为“left”或“right”即可自动构建左边或右边的抽屉,也可两个都配置
headerLayout就是给导航栏增加一个头部Layout。
menu就是对应菜单项的选择条目。
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>
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>
//设置抽屉DrawerLayoutfinal 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);
抽屉需要在ActioBarDrawerToggle中进行管理,可以把一个toolbar放进去,这样点击toolbar的icon,也能打开和关闭抽屉
如果需要,可以覆盖ActioBarDrawerToggle中的onDrawerOpened和onDrawerClosed方法在抽屉开关时做一些定制处理
toolbar可以设置为null,如果是null,不会出现左边的开关按钮,这时抽屉只能通过手势滑动
如果不需要定制处理,也不需要关联toolbar,可以不写这部分代码
//设置导航栏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; }});
0 0
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏
- NavigationView和DrawerLayout实现侧滑菜单栏
- Material Design之NavigationView和DrawerLayout实现侧滑菜单栏
- DrawerLayout和NavigationView轻松实现抽屉侧滑
- DrawerLayout和NavigationView轻松实现抽屉侧滑
- 侧滑菜单栏使用DrawerLayout和NavigationView实现
- Android 用 DrawerLayout 和 NavigationView 实现侧滑菜单栏
- MaterialDesign学习笔记1:DrawerLayout+NavigationView实现抽屉效果
- Material Design系列风格控件之(二)----NavigationView和DrawerLayout实现侧滑菜单栏
- DrawerLayout 和NavigationView 实现抽屉式侧滑
- Android实现侧滑抽屉菜单(DrawerLayout+NavigationView+toolbar)
- Kotlin实现侧滑抽屉菜单(DrawerLayout+NavigationView+Toolbar)
- DrawerLayout配合NavigationView简单实现侧滑菜单栏
- Material Design之DrawerLayout与NavigationView实现抽屉效果
- NavigationView+DrawerLayout实现侧拉抽屉效果
- Android-NavigationView+DrawerLayout实现抽屉菜单
- 《软件工程思想》读后感
- [BZOJ3544][ONTAK2010]Creative Accounting(数学相关+set)
- AS 二
- love.image
- 关于markdown,这里有需要知道的一切
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
- C#学习笔记之委托
- Axure之视频插入简单实例
- love.joystick
- 【opencv学习之六】opencv+Qt+Qzxing调取本地摄像头识别二维码
- 子类复写父类
- 知道自己的优势,并发挥,知道对手的弱点,并攻击。
- 分桶法
- love.keyboard