侧滑菜单,选项菜单,上下文菜单

2020-03-19  本文已影响0人  魔女小姐的猫

DrawerLayout +NavigationView介绍:

Android Material Design Library 推出了很长时间,越来越多的APP使用了符合Library 包的控件,DrawerLayout绝对是热门之一,Material Design定义了一个抽屉导航应该有何种外观和感受,统一了侧滑菜单和样式。在Android原生手机上对DrawerLayout+NavigationView更是使用到了极致.

  1. 依赖:

compile 'com.android.support:design:29.1.1'

2.创建布局DrawerLayout +NavigationView(三个属性,Menu)

DrawerLayout布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/dl"
   xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
 android:layout_height="match_parent"
tools:context="com.cumulus.xts.drawerdemo.MainActivity">

<!--主界面-->

   <LinearLayout

       android:orientation="vertical"

       android:layout_width="match_parent"

       android:layout_height="match_parent">

       <android.support.v7.widget.Toolbar

           android:background="@color/colorPrimary"

           android:id="@+id/toolBar"

           android:minHeight="?attr/actionBarSize"

           android:layout_width="match_parent"

           android:layout_height="wrap_content"/>

   </LinearLayout>

<!--侧滑菜单-->

   <android.support.design.widget.NavigationView
       android:id="@+id/nv"
        android:layout_gravity="left"
       app:menu="@menu/drawer"
        app:headerLayout="@layout/header"
       app:itemBackground="@drawable/home2"
       app:itemTextColor="@color/menu_color"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

</android.support.v4.widget.DrawerLayout>

NavigationView属性:

  1. android:layout_gravity="end"用于指示侧滑菜单显示的位置,可以选择左边滑出和右边滑出,left/start为左边,end/right为右边
  2. NavigationView 有两个app属性,分别为app:headerLayout和app:menu,headerLayout用于显示头部的布局,menu用于建立MenuItem选项的菜单。
  3. itemBackground设置menu背景颜色,可使用selector区分选中和未选中颜色
  4. itemTextColor设置menu文字颜色,可使用selector区分选中和未选中颜色
  1. 设置actionbar: Toolbar设置标题,Logo,关联 toolbar和侧滑菜单
 //ActionBarDrawerToggle是和DrawerLayout搭配使用的,监听drawer的显示和隐藏
  ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDl, mToolBar, R.string.open, R.string.close);
   mDl.addDrawerListener(toggle);
 //ActionBarDrawerToggle的syncState()方法会和Toolbar关联,将图标放入到Toolbar上
     toggle.syncState();

  1. 监听事件:
    代码显示隐藏抽屉菜单
//隐藏
mDl.closeDrawer(Gravity.LEFT);

//显示
mDl.openDrawer(Gravity.LEFT);

menu部分的监听

        mNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

    @Override
     public boolean onNavigationItemSelected(@NonNull MenuItem item) {
         switch (item.getItemId()) {
         case R.id.Item1:
                         mDl.closeDrawer(Gravity.LEFT);
                        break;
           }
               return false;
          }

        });

header layout的监听

 //获取头部view
        View headerView = mNv.getHeaderView(0);
     headerView.findViewById(R.id.iv).setOnClickListener(new View.OnClickListener() {
            @Override
           public void onClick(View v) {
                showToast("click");
            }
        });

5.沉浸式状态栏(fitsSystemWindows statusBarColor)

  1. 在DrawerLayout布局中添加
    android:fitsSystemWindows="true

<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/dl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.cumulus.xts.drawerdemo.MainActivity">
        .....
  1. 在res文件夹下创建values-v21,复制styles.xml并添加属性
    //透明状态栏
    <item name="android:statusBarColor">#00ffffff</item>
 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--colorPrimary,colorPrimaryDark颜色相同-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--透明状态栏-->
        <item name="android:statusBarColor">#00ffffff</item>
    </style>

  1. 选项菜单

Menu菜单的创建(onCreateOptionsMenu):

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        this.mMenu = menu;
        //方法1,使用Menu.add()方法
        //groupId,组号,android中你可以给菜单分组,以便快速地操作同一组的菜单
        //id,可以让系统来自动分配,在响应菜单时你需要通过ID号来判断哪个菜单被点击了
        //order,显示顺序的编号
        menu.add(1,R.id.options_id1,1,"item 1");
        menu.add(1,R.id.options_id2,2,"item 2");
        menu.add(2,R.id.options_id3,3,"item 3");
        menu.add(2,R.id.options_id4,4,"item 4");
        //方法2,使用MenuInflater.inflate()方法
        /*MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_main,menu);*/
        //希望菜单显示,返回true
        return super.onCreateOptionsMenu(menu);
    }

选项菜单的监听( onOptionsItemSelected():

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        showToast(item.getTitle().toString());
        switch (item.getItemId()) {
            case R.id.options_id1:
                //mMenu.removeGroup(1);
                mMenu.setGroupVisible(2,true);
                mMenu.setGroupVisible(1,false);
                break;
            }
      return super.onOptionsItemSelected(item);
    }

7上下文菜单

  1. 为一个view注册上下文菜单
registerForContextMenu(mTv);
  1. ContextMenu的创建onCreateContextMenu
   @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
        showToast("onCreateContextMenu");
        if (v.getId() == R.id.tv) {
            //方法1 MenuInflater.inflate()     MenuInflater inflater = getMenuInflater();
            inflater.inflate(R.menu.menu_main, menu);
        } else {
            //方法2 menu.add();       
              menu.add(Menu.NONE, R.id.item_top, 1, "TOP");   
              menu.add(Menu.NONE, R.id.item_bottom, 0, "BOTTOM");
        }
    }
  1. ContextMenu选中监听onContextItemSelected实现
@Override
    public boolean onContextItemSelected(MenuItem item) {
        logD("onContextItemSelected");
        switch (item.getItemId()) {
            case R.id.hello:
                mTv.setText("hello");         
                  break;
           ......  
       }
        return super.onContextItemSelected(item);
    }

上一篇 下一篇

猜你喜欢

热点阅读