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