对于抽屉式菜单界面很多APP都有应用,此前写抽屉式界面都需要自定义。现在谷歌提供的 导航视图(NavigationView与抽屉布局(DrawerLayout) 结合使用,能提供很好的侧滑交互体验。要使用NavigationView 首先还是要添加依赖:
implementation 'com.android.support:design:26.1.0'
先实现布局文件:
- <?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"
- android:id="@+id/drawerlayout"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
-
- <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="?attr/colorPrimary">
-
- </android.support.v7.widget.Toolbar>
-
- <TextView
- android:id="@+id/tv_navigation"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:gravity="center"
- android:text="这是点击了那个导航菜单?"
- android:textSize="20sp" />
- </LinearLayout>
-
- <android.support.design.widget.NavigationView
- android:id="@+id/navigation"
- android:layout_width="wrap_content"
- android:layout_height="match_parent"
- android:layout_gravity="start"
- app:headerLayout="@layout/navigation_header"
- app:menu="@menu/drawer_view">
-
- </android.support.design.widget.NavigationView>
-
- </android.support.v4.widget.DrawerLayout>
首先说一下NavigationView的属性:
1、android:layout_gravity : 表示布局自身在父布局的那个位置。对于Drawerlayout 来说,是指其子布局从那边滑出
NavigationView 通常设置 android:layout_gravity="start"
2、app:headerLayout : 指定一个头布局的资源文件
3、app:menu : 指定一个导航菜单的资源文件
4、app:ItemBackground : 指定菜单项的背景
5、app:ItemTextColor : 指定菜单项的文字颜色
6、app:ItemTextAppearance : 指定菜单项的文字样式
7、app:ItemIconTint : 指定菜单项的图标色彩
其中navigation_header是一个自定义的头布局文件,代码如下:
- <?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="150dp"
- android:background="?attr/colorPrimary"
- android:orientation="horizontal">
-
- <ImageView
- android:layout_width="100dp"
- android:layout_height="100dp"
- android:layout_gravity="center_vertical"
- android:layout_marginLeft="50dp"
- android:src="@mipmap/ic_launcher" />
-
- <TextView
- android:id="@+id/tv_navigation_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_vertical"
- android:text="导航视图"
- android:textColor="@color/white_FFFFFF"
- android:textSize="20sp" />
-
- </LinearLayout>
还有我自定义的菜单文件 drawer_view.xml, 注意:要实现两个组(group)之间有分割线,group得有 id:
- <?xml version="1.0" encoding="utf-8"?>
- <menu xmlns:android="http://schemas.android.com/apk/res/android">
- <group
- android:id="@+id/group1"
- android:checkableBehavior="single">
- <item
- android:id="@+id/nav_home"
- android:icon="@mipmap/home"
- android:title="首页" />
- <item
- android:id="@+id/nav_teleplay"
- android:icon="@mipmap/teleplay"
- android:title="电视剧" />
- <item
- android:id="@+id/nav_movie"
- android:icon="@mipmap/movie"
- android:title="电影" />
-
- </group>
-
- <group
- android:id="@+id/group2"
- android:checkableBehavior="single">
- <item
- android:id="@+id/nav_shows"
- android:icon="@mipmap/shows"
- android:title="综艺" />
- <item
- android:id="@+id/nav_funny"
- android:icon="@mipmap/funny"
- android:title="搞笑" />
- </group>
-
-
- <item android:title="其他">
- <menu>
- <item
- android:id="@+id/nav_setting"
- android:icon="@mipmap/setting"
- android:title="设置" />
- <item
- android:id="@+id/nav_onwer"
- android:icon="@mipmap/owner"
- android:title="关于我们" />
- </menu>
- </item>
-
- </menu>
然后这个menu 的图片资源文件为:
最后在代码中进行功能的实现,代码如下:
- public class NavigationActivity extends AppCompatActivity {
-
- private NavigationView mNavigation;
- private TextView tvNavigation;
- private Toolbar mToolbar;
- private ActionBar mActionBar;
- private DrawerLayout mDrawerLayout;
- private View mHeaderView;
- private TextView mtvNavigationTitle;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_navigation);
- initView();
- initEvent();
- }
-
- private void initView() {
- mToolbar = (Toolbar) findViewById(R.id.toolbar);
- mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
- mNavigation = (NavigationView) findViewById(R.id.navigation);
- tvNavigation = (TextView) findViewById(R.id.tv_navigation);
- // 获取头布局 然后通过头布局视图获取里面的控件
- mHeaderView = mNavigation.getHeaderView(0);
- mtvNavigationTitle = (TextView) mHeaderView.findViewById(R.id.tv_navigation_title);
- }
-
- private void initEvent() {
- setSupportActionBar(mToolbar);
- mActionBar = (ActionBar) getSupportActionBar();
- mActionBar.setDisplayHomeAsUpEnabled(true);
- mNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
- @Override
- public boolean onNavigationItemSelected(MenuItem item) {
- String title = item.getTitle().toString();
- tvNavigation.setText(title);
- mtvNavigationTitle.setText(title);
- mDrawerLayout.closeDrawers();
- // 是否将项目设为选中项目
- return true;
- }
- });
- }
-
- @Override
- public boolean onOptionsItemSelected(MenuItem item) {
- switch (item.getItemId()) {
- case android.R.id.home:
- mDrawerLayout.openDrawer(GravityCompat.START);
- break;
- }
- return super.onOptionsItemSelected(item);
- }
- }
其中需要注意就是setNavigationItemSelectedListener 方法,返回false 是不设置点击的项目为选中状态,true 则设置为选中状态。第二个就是 getHeaderView() 方法,能获取头布局文件的控件,进入执行控制操作。