Android开源代码——MenuDrawer（一）

 

源码地址：https://github.com/licong/android-menudrawer

MenuDrawer ——简单的使用方法

---

今天，我们需要达到的效果是，使用MenuDrawer创建一个侧滑菜单视图，当我们点击菜单项（使用ListView）时，右面的内容视图（就是一个TextView）会响应这个点击事件

默认是菜单项隐藏在左边，当从左边缘滑动时，菜单视图出现，回滑时，菜单隐藏

先看看效果图吧：

 

【用到的 MenuDrawer API】

---

1、将MenuDrawer绑定到当前的Activity中，并返回MenuDrawer对象

这几个方法是静态方法，是创建MenuDrawer对象的方法，注意：MenuDrawer没有构造方法

MenuDrawer.attach（Activity activity ）

MenuDrawer.attach(Activity activity , int dragMode)   参数dragMode指定MenuDrawer的菜单视图的加载模式

MenuDrawer.attach（Activity activity, Position position） 参数position指定菜单视图加载在屏幕的哪一边：上下左右，本实例是加载在左边，默认也是在左边

MenuDrawer.attch(Activity activity, int dragMode, Position position)

MenuDrawer.attch(Activity activity, int dragMode, Position position, boolean attachStatic) 最后一个参数明显是：是否静态的显示一个Menu视图，即菜单不能够滑动

 

dragMode指定MenuDrawer的菜单视图的加载模式，总共有两种加载方式：

普通内容视图模式：MenuDrawer.MENU_DRAG_CONTENT，效果如下：

 

 填充窗口模式：MenuDrawer.MENU_DRAG_WINDOW，效果如下：

 

2、向MenuDrawer中添加内容视图

setContentView(int layoutResId)  通过布局文件的ID加载

setContentView(View view)         直接通过View加载

setContentView(View view, LayoutParams params)

 

3、向MenuDrawer中添加菜单视图 （一般是加载ListView）

setMenuView(int layoutResId)

setMenuView(View view)

setMenuView(View view, LayoutParams params)

 

4、向当前的选中项中添加 "指针" 用来标定当前的活动项

setActiveView(View view, int position) 

参数 View ： 当前的菜单项对应的View

参数position： 当前View在adapter中的位置

注意：想要在程序中使用“指针”的功能的话，应该有三步：

①在Manifest.xml文件中为当前的Activity配置主题含有“指针”图片的Theme主题

②在Adapter的getView（）方法中调用setTag（R.id.mdActiveViewPosition, position）方法

③调用上面的setActiveView（）方法

一会儿通过下面的例子，就会秒懂了！一切尽在掌握之中

 

 5、关闭选项菜单/打开选项菜单

closeMenu();

closeMenu(boolean animate）； 是否使用动画，但是和上面的方法在效果上基本没有什么分别

toggleMenu(); 这个是一个开关选项，当菜单视图处于打开模式时，调用这个方法，那么菜单视图就会关闭，反之，菜单就会打开

 

6、返回当前的菜单视图的状态

int  getDrawerState()

比如正在展开、正在关闭、已经展开、已经关闭等等

 

7、设置菜单视图的大小

setMenuSize（int size）

我们亦可以在style文件中更改这个属性，一会儿你就秒懂了

8、重新绘制当前的MenuDrawer对象

invalidate()

9、自动开启菜单视图

peekDrawer();

这个方法并不是将菜单视图整个显示出来，而是讲菜单视图轻轻的抻出一小条，这样为的是能够让用户发现在左边隐藏着一个菜单视图，这个方法一般放在Activity的onCreate（）方法中，并且一般只使用一次

 

【实例代码】

---

主布局文件 MenuTuiCoolActivity.java 文件

 

package com.penglee.tuicool;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;


import net.simonvt.menudrawer.*;

public class MenuTuicoolActivity extends Activity {
    
     //定义菜单适配器
     private MenuAdapter menuAdapter  ;
     
     //定义ListView菜单
     ListView menuList ;
     
     //保存当前的活动菜单项
     int currentActiveItem = -1 ;
     
     //定义内容视图
     TextView contentText ;
     
     //定义MenuDrawer对象
     private MenuDrawer  menuDrawer ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //创建MenuDrawer，并设定加载模式
        menuDrawer = MenuDrawer.attach(this, MenuDrawer.MENU_DRAG_CONTENT);
        
        //创建菜单视图
        menuList= new ListView(this) ;
        menuAdapter = new MenuTuicoolActivity.MenuAdapter() ;
        menuList.setAdapter(menuAdapter);
        
        //为菜单视图添加事件响应
        menuList.setOnItemClickListener(mItemClickListener);
        menuList.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
               /*为什么要进行重绘呢？因为我们为菜单项设置了一个指示及“指针”
                * 如果我们不重绘的话，那么当滚动菜单栏的时候，那个“指针”就不会移动
                * 也就是说，那个指针不会随着当前的那个活动的菜单项上下移动
                * 此外还要注意的一点是，这个方法必须在
                * menuDrawer = MenuDrawer.attach(this, MenuDrawer.MENU_DRAG_CONTENT)；
                * 之后调用，因为在menuDrawer还没有创建之前，是不能够调用这个方法的，否则会抛出
                * NullPointException**/
                menuDrawer.invalidate();
            }
        });
        
        //创建内容视图
        contentText = new TextView(this) ;
        //contentText.setBackgroundResource(R.drawable.img_frame_background);
        
        //加载菜单视图和内容视图
        menuDrawer.setMenuView(menuList);
        menuDrawer.setContentView(contentText);
       
            //Animates the drawer slightly open until the user opens the drawer.

            menuDrawer.peekDrawer();

        //设置ActionBar中的程序图标可见，并且显示那个向左的指示箭头标志
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
            getActionBar().setDisplayHomeAsUpEnabled(true);
        }
        
    }
    


    //定义菜单视图的菜单项的监听器
    private AdapterView.OnItemClickListener mItemClickListener = new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            
            //当前的活动菜单项为position
            currentActiveItem = position ;
            
            //为当前的活动项添加“指针”
            menuDrawer.setActiveView(view, position);
            
            //改变contentText中的内容
            contentText.setText(((TuiCool_MenuItem)(menuAdapter.getItem(position))).getMenuText()) ;
            
            
            //关闭菜单视图
            menuDrawer.closeMenu(true);
        }
    };
    

    
    //《当用户按下了"手机上的返回功能按键"的时候会回调这个方法》
    @Override
    public void onBackPressed() {
        final int drawerState = menuDrawer.getDrawerState();
        if (drawerState == MenuDrawer.STATE_OPEN || drawerState == MenuDrawer.STATE_OPENING) {
            menuDrawer.closeMenu();
            return;
        }
        //也就是说，当按下返回功能键的时候，不是直接对Activity进行弹栈，而是先将菜单视图关闭
        super.onBackPressed();
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:  // 当单击了程序图标的位置时返回android.R.id.home
                //一次点击菜单视图打开，再一次单击则关闭菜单视图
                menuDrawer.toggleMenu();
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

    //定义菜单分隔条类
        private static class Category {
            String mTitle;
            Category(String title) {
                mTitle = title;
            }
        }
        
        //定义菜单项类
        private static class TuiCool_MenuItem{
            
            private String menuText ;
            private int menuIcon ;
            
            public TuiCool_MenuItem(String menuText , int menuIcon){
                this.menuText=menuText ;
                this.menuIcon=menuIcon ;
            }
            
            public String getMenuText(){
                return this.menuText ;
            }
            
            public int getMenuIcon(){
                return this.menuIcon ;
            }
        }
        
        //定义自定义菜单项组Adapter
         private class MenuAdapter extends BaseAdapter{

             //用来存贮菜单项和菜单分隔条对象
             private List<Object> menuItems = new ArrayList<Object>() ;
             
             //加载所有的菜单项和菜单分隔条
             public MenuAdapter(){
                 
                 menuItems.add(new Category("分组一")) ;
                 menuItems.add(new TuiCool_MenuItem("离线",R.drawable.img_1)) ;
                 menuItems.add(new TuiCool_MenuItem("站点",R.drawable.img_2));
                 
                 menuItems.add(new Category("分组二"));
                 menuItems.add(new TuiCool_MenuItem("搜索",R.drawable.img_3)) ;
                 menuItems.add(new TuiCool_MenuItem("发现",R.drawable.img_4)) ;
                 menuItems.add(new TuiCool_MenuItem("设置",R.drawable.img_5)) ;
             }
             
            @Override
            public int getCount() {
                return  menuItems.size();
            }

            @Override
            public Object getItem(int position) {
                return menuItems.get(position);
            }

            @Override
            public long getItemId(int position) {
                return position;
            }
            
            /*这个方法和下面的一个方法只是用于标定你所创建的菜单中有几种类型的项目，
             *一般来说就有两种,一种是分隔条项目、一种是实际的可选项目，这两个方法不会自动回调
             *只是为让程序员在getView（）等方法中能够方便使用这两个方法来判定当前的项目的类型
             **/
            public int getItemViewType(int position) {
                return getItem(position) instanceof TuiCool_MenuItem ? 0 : 1;
            }

            @Override
            public int getViewTypeCount() {
                return 2;
            }

            //当前的对象对应的组件是否能够被选中或者被点击，即菜单项对象能够被点击，分隔条对象不能够被点击
            @Override
            public boolean isEnabled(int position) {
                return getItem(position) instanceof TuiCool_MenuItem;
            }

            //指明Adapter中的所有的对象对应的组件是否都能够被点击
            @Override
            public boolean areAllItemsEnabled() {
                return false;
            }

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                
                View view = convertView ;
                Object item = menuItems.get(position) ;

                if(item instanceof TuiCool_MenuItem){
                    if(view == null){
                          view =getLayoutInflater().inflate(R.layout.menu_tuicool, parent, false);
                    }
                    ((TextView) view).setText(((TuiCool_MenuItem)item).getMenuText());
                    ((TextView) view).setCompoundDrawablesWithIntrinsicBounds(
                                      ((TuiCool_MenuItem)item).getMenuIcon(), 0, 0, 0);
                }else{
                    view = getLayoutInflater().inflate(R.layout.category_style, parent, false);
                    ((TextView) view).setText(((Category)item).mTitle);
                }
                                
                //为每个view添加Tag
                view.setTag(R.id.mdActiveViewPosition, position); 
               
                if (position == currentActiveItem) {
                    menuDrawer.setActiveView(view, position);
                }
       /*当我们将MenuDrawer库加入到当前工程中后，R文件中会自动生成上面的R.id.mdActivity
        *在调用setActiveView（）方法之前，必须得为每个view指定Tag，
        *并且第一个参数属性值必须为R.id.mdActiveViewPosition
        *既然我们已经在菜单的监听器中为当前活动的菜单项添加了“指针”为什么还要添加呢？
        *因为，我们在监听方法中将菜单关闭了，当在一次显示菜单视图时，会进行重绘
        *即重新调用这个getview（）方法，所以我们要重新设定一下这个“指针”**/
                return view;
            }         
         }
}

 

菜单分隔条布局文件 category_style.xml

 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    style="@style/category_style">
</TextView>

 

菜单项布局文件 menu_tuicool.xml

<TextView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     style="@style/item_style"/>

styles.xml文件

 

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <!-- 为菜单项设置style -->
    <style name="item_style">
        <item name="android:background">@drawable/md__list_selector_disabled_holo_dark</item>
        <item name="android:textAppearance">?android:attr/textAppearance</item>
        <item name="android:textColor">?android:attr/textColorPrimaryInverse</item>
        <item name="android:textSize">18sp</item>
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">32dp</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:drawablePadding">16dp</item>
        <item name="android:gravity">center_vertical</item>
    </style>
    
    <!-- 为分隔条设置style -->
    <style name="category_style">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">?android:attr/textColorSecondaryInverse</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">true</item>

        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingLeft">16dp</item>
        <item name="android:background">@drawable/md__category_background</item>

        <item name="android:singleLine">true</item>
        <item name="android:ellipsize">end</item>
    </style>
    
    <!-- 为“左侧菜单”的“指针和宽度”设置style，在设置当前的activity的theme时要用 -->
       注意这里面的Widget.MenuDrawer、mdActiveIndicator、mdMenuSize字段都是MenuDrawer库中定义好的字段属性，我们只管直接用就行了
    <style name="MenuDrawerStyle.Left" parent="Widget.MenuDrawer">       但是 MenuDrawerStyle.Left 这个名字可以自己取
        <item name="mdActiveIndicator">@drawable/menu_arrow</item>       这张图就是效果中那个小的“指针”图片
        <item name="mdMenuSize">250dp</item>  显然通过这个属性就能够更改菜单视图的宽度
    </style>
</resources>

 

themes.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SampleTheme" parent="@android:style/Theme.Holo.Light">        SampleTheme这个明智可以自己取
        <item name="menuDrawerStyle">@style/MenuDrawerStyle.Left</item>        menuDrawerStyle这个字段是MenuDrawer自定义的属性，只管用就好
    </style>
    
</resources>

Manifest.xml配置文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.penglee.tuicool"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"> 
        <activity
            android:name=".MenuTuicoolActivity"
            android:label="@string/app_name" 
 android:theme="@style/SampleTheme">  这样就能够使用“指针”功能了
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

【文档结构】

---

 

【分析】

---

虽然我们在内容视图部分使用的是一个TextView，在菜单视图中使用的是一个ListView，但是setContentView(View view)、setMenuView(View view)方法中并没有限制，你想所有的布局容器，如LinearLayout等，都是View 组件，我们可以以布局组件为View容器，之后可在里面添加任何的东西，甚至是Fragment，之后我们使用inflate方法将这个布局文件转化成View，装入MenuDrawer中，一切东西就都有了

 

正个项目文件源码在邮箱——名字叫做TuiCool