当前位置:   article > 正文

NavigationView 的使用

navigationview使用

    对于抽屉式菜单界面很多APP都有应用,此前写抽屉式界面都需要自定义。现在谷歌提供的 导航视图(NavigationView与抽屉布局(DrawerLayout) 结合使用,能提供很好的侧滑交互体验。要使用NavigationView 首先还是要添加依赖:

        implementation 'com.android.support:design:26.1.0'  
     先实现布局文件:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/drawerlayout"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <LinearLayout
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:orientation="vertical">
  11. <android.support.v7.widget.Toolbar
  12. android:id="@+id/toolbar"
  13. android:layout_width="match_parent"
  14. android:layout_height="?attr/actionBarSize"
  15. android:background="?attr/colorPrimary">
  16. </android.support.v7.widget.Toolbar>
  17. <TextView
  18. android:id="@+id/tv_navigation"
  19. android:layout_width="match_parent"
  20. android:layout_height="match_parent"
  21. android:gravity="center"
  22. android:text="这是点击了那个导航菜单?"
  23. android:textSize="20sp" />
  24. </LinearLayout>
  25. <android.support.design.widget.NavigationView
  26. android:id="@+id/navigation"
  27. android:layout_width="wrap_content"
  28. android:layout_height="match_parent"
  29. android:layout_gravity="start"
  30. app:headerLayout="@layout/navigation_header"
  31. app:menu="@menu/drawer_view">
  32. </android.support.design.widget.NavigationView>
  33. </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是一个自定义的头布局文件,代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="150dp"
  5. android:background="?attr/colorPrimary"
  6. android:orientation="horizontal">
  7. <ImageView
  8. android:layout_width="100dp"
  9. android:layout_height="100dp"
  10. android:layout_gravity="center_vertical"
  11. android:layout_marginLeft="50dp"
  12. android:src="@mipmap/ic_launcher" />
  13. <TextView
  14. android:id="@+id/tv_navigation_title"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_gravity="center_vertical"
  18. android:text="导航视图"
  19. android:textColor="@color/white_FFFFFF"
  20. android:textSize="20sp" />
  21. </LinearLayout>
    还有我自定义的菜单文件 drawer_view.xml, 注意:要实现两个组(group)之间有分割线,group得有 id:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
  3. <group
  4. android:id="@+id/group1"
  5. android:checkableBehavior="single">
  6. <item
  7. android:id="@+id/nav_home"
  8. android:icon="@mipmap/home"
  9. android:title="首页" />
  10. <item
  11. android:id="@+id/nav_teleplay"
  12. android:icon="@mipmap/teleplay"
  13. android:title="电视剧" />
  14. <item
  15. android:id="@+id/nav_movie"
  16. android:icon="@mipmap/movie"
  17. android:title="电影" />
  18. </group>
  19. <group
  20. android:id="@+id/group2"
  21. android:checkableBehavior="single">
  22. <item
  23. android:id="@+id/nav_shows"
  24. android:icon="@mipmap/shows"
  25. android:title="综艺" />
  26. <item
  27. android:id="@+id/nav_funny"
  28. android:icon="@mipmap/funny"
  29. android:title="搞笑" />
  30. </group>
  31. <item android:title="其他">
  32. <menu>
  33. <item
  34. android:id="@+id/nav_setting"
  35. android:icon="@mipmap/setting"
  36. android:title="设置" />
  37. <item
  38. android:id="@+id/nav_onwer"
  39. android:icon="@mipmap/owner"
  40. android:title="关于我们" />
  41. </menu>
  42. </item>
  43. </menu>

    然后这个menu 的图片资源文件为:             

    最后在代码中进行功能的实现,代码如下:    

  1. public class NavigationActivity extends AppCompatActivity {
  2. private NavigationView mNavigation;
  3. private TextView tvNavigation;
  4. private Toolbar mToolbar;
  5. private ActionBar mActionBar;
  6. private DrawerLayout mDrawerLayout;
  7. private View mHeaderView;
  8. private TextView mtvNavigationTitle;
  9. @Override
  10. protected void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. setContentView(R.layout.activity_navigation);
  13. initView();
  14. initEvent();
  15. }
  16. private void initView() {
  17. mToolbar = (Toolbar) findViewById(R.id.toolbar);
  18. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
  19. mNavigation = (NavigationView) findViewById(R.id.navigation);
  20. tvNavigation = (TextView) findViewById(R.id.tv_navigation);
  21. // 获取头布局 然后通过头布局视图获取里面的控件
  22. mHeaderView = mNavigation.getHeaderView(0);
  23. mtvNavigationTitle = (TextView) mHeaderView.findViewById(R.id.tv_navigation_title);
  24. }
  25. private void initEvent() {
  26. setSupportActionBar(mToolbar);
  27. mActionBar = (ActionBar) getSupportActionBar();
  28. mActionBar.setDisplayHomeAsUpEnabled(true);
  29. mNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
  30. @Override
  31. public boolean onNavigationItemSelected(MenuItem item) {
  32. String title = item.getTitle().toString();
  33. tvNavigation.setText(title);
  34. mtvNavigationTitle.setText(title);
  35. mDrawerLayout.closeDrawers();
  36. // 是否将项目设为选中项目
  37. return true;
  38. }
  39. });
  40. }
  41. @Override
  42. public boolean onOptionsItemSelected(MenuItem item) {
  43. switch (item.getItemId()) {
  44. case android.R.id.home:
  45. mDrawerLayout.openDrawer(GravityCompat.START);
  46. break;
  47. }
  48. return super.onOptionsItemSelected(item);
  49. }
  50. }
        其中需要注意就是setNavigationItemSelectedListener 方法,返回false 是不设置点击的项目为选中状态,true 则设置为选中状态。第二个就是 getHeaderView()  方法,能获取头布局文件的控件,进入执行控制操作。

转载于:https://www.cnblogs.com/javasxl/p/9397777.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/219155
推荐阅读
相关标签
  

闽ICP备14008679号