DrawerLayout NavigationView 实现侧滑(Android MD风格一)
2017-12-07 10:57
399 查看
实现侧滑菜单的效果,采用MD风格,用到的总要控件:DrawerLayout 和 NavigationView
想要使用DrawerLayout和NavigationView,首先需要在build.gradle中引入Design包
(一)、简单使用
新建一个Activity,这里我们选择使用Android Studio提供的模板,选择NavgationDrawer Activity
之后一步步next直到finish。
完成后打开Activity xml布局文件:
最外层是DrawerLayout布局,包含了两个内容:include为我们主页面显示内容区域,NavigationView为侧边抽屉栏。
NavigationView的属性属性:
app:headerLayout, 用于显示头部的布局(可选),这里的头布局为“nav_header_main”。
app:menu,用于建立MenuItem选项的菜单,这里的菜单布局为“activity_main_drawer”。
android:layout_gravity=”left”,属性表示该View是左边的滑出菜单,这个属性的含义不用多说,这是DrawerLayout使用方式中的知识点。
headerLayout头布局 nav_header_main
很普通的一个布局,一个ImageView,两个TextView构成。当然我们可以根据UI妹子设计DIY。
Menu菜单布局 activity_main_drawer
我们可以在这个文件根据需求增加或减少item,更改item图标等.如果想在NavigationView的item之间添加上一条分隔线,只需要在menu中将相应的item放到一个group中,并给该group取一个id即可,如上代码所示
以上代码Android studio都给我们自动生成了,可以很方便的根据自己需求更改!
为了向别人、向世界证明自己而努力拼搏,而一旦你真的取得了成绩,才会明白:人无须向别人证明什么,只要你能超越自己。
想要使用DrawerLayout和NavigationView,首先需要在build.gradle中引入Design包
compile 'com.android.support:design:25.4.0'
(一)、简单使用
新建一个Activity,这里我们选择使用Android Studio提供的模板,选择NavgationDrawer Activity
之后一步步next直到finish。
完成后打开Activity xml布局文件:
<?xml version="1.0" encoding="utf-8"?> <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:openDrawer="start"> <!--这为我们自己的主界面--> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--抽屉式布局--> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout>
最外层是DrawerLayout布局,包含了两个内容:include为我们主页面显示内容区域,NavigationView为侧边抽屉栏。
NavigationView的属性属性:
app:headerLayout, 用于显示头部的布局(可选),这里的头布局为“nav_header_main”。
app:menu,用于建立MenuItem选项的菜单,这里的菜单布局为“activity_main_drawer”。
android:layout_gravity=”left”,属性表示该View是左边的滑出菜单,这个属性的含义不用多说,这是DrawerLayout使用方式中的知识点。
headerLayout头布局 nav_header_main
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="@dimen/nav_header_height" android:background="@drawable/side_nav_bar" android:gravity="bottom" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="@dimen/nav_header_vertical_spacing" app:srcCompat="@mipmap/ic_launcher_round" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/nav_header_vertical_spacing" android:text="Android Studio" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android.studio@android.com" /> </LinearLayout>
很普通的一个布局,一个ImageView,两个TextView构成。当然我们可以根据UI妹子设计DIY。
Menu菜单布局 activity_main_drawer
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:showIn="navigation_view"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_camera" android:icon="@drawable/ic_menu_camera" android:title="Import" /> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_menu_gallery" android:title="Gallery" /> <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_menu_slideshow" android:title="Slideshow" /> <item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage" android:title="Tools" /> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_menu_share" android:title="Share" /> <item android:id="@+id/nav_send" android:icon="@drawable/ic_menu_send" android:title="Send" /> </menu> </item> </menu>
我们可以在这个文件根据需求增加或减少item,更改item图标等.如果想在NavigationView的item之间添加上一条分隔线,只需要在menu中将相应的item放到一个group中,并给该group取一个id即可,如上代码所示
以上代码Android studio都给我们自动生成了,可以很方便的根据自己需求更改!
为了向别人、向世界证明自己而努力拼搏,而一旦你真的取得了成绩,才会明白:人无须向别人证明什么,只要你能超越自己。
相关文章推荐
- DrawerLayout NavigationView 实现侧滑(android MD 一)
- Android实现侧滑抽屉菜单(DrawerLayout+NavigationView+toolbar)
- Android DrawerLayout+ToolBar+NavigationView实现侧滑菜单效果,沉浸式状态栏
- 【DrawerLayout+NavigationView】android侧滑菜单实现
- Android--NavigationView+DrawerLayout实现侧滑(仿QQ)
- Android中DrawerLayout+Toolbar实现侧滑效果[DrawerLayout+ToolBar+NavigationView]
- Android DrawerLayout+Toolbar+NavigationView(实现侧拉侧滑效果)
- Android DrawerLayout+NavigationView布局实现左右两边侧滑菜单
- DrawerLayout+NavigationView打造Google原生Material Design风格侧滑菜单
- Material Design之NavigationView和DrawerLayout实现侧滑菜单栏
- Android UI 之侧滑抽屉菜单(一)——DrawerLayout + NavigationView
- Kotlin实现侧滑抽屉菜单(DrawerLayout+NavigationView+Toolbar)
- NavigationView+Drawerlayout+Toolbar实现侧滑菜单
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
- DrawerLayout+NavigationView实现侧滑菜单
- 侧滑菜单的简单实现(DrawerLayout+Toolbar+NavigationView)
- Material Design之NavigationView和DrawerLayout实现侧滑菜单栏
- Android 之 Material Design(三)—DrawerLayout+NavigationView+Toolbar(点击icon打开关闭侧滑菜单)
- Android 抽屉侧滑菜单 DrawerLayout+NavigationView+ToolBar
- NavigationView+DrawerLayout实现侧滑栏效果