安卓開發筆記——關於開源項目SlidingMenu的使用介紹（仿QQ5.0側滑菜單）

本文轉載自查看原文 2015-04-23 09:53 2847 JAVA/ 安卓/ 控件/ android/ 開源/ Android

記得去年年末的時候寫過這個側滑效果，當時是利用自定義HorizontalScrollView來實現的，效果如下：

有興趣的朋友可以看看這篇文件《安卓開發筆記——自定義HorizontalScrollView控件（實現QQ5.0側滑效果）》

今天換一種實現方式，來說下GitHub上非常優秀的開源項目SlidingMenu的使用，它是一種比較新的界面效果，在主界面左滑或右滑出現設置界面效果，能方便的進行各種操作。市面上很多優秀的APP都采用了這種界面方案，像facebook、人人網、everynote、Google+等。

再來看看今天要實現的效果圖:

直接進入主題吧，先來說下准備工作：

1、既然是要使用這個開源項目，那首先當然是要下載它了，這是SlidingMenu的下載地址：https://github.com/jfeinstein10/SlidingMenu

在這個項目介紹中，我們可以發現這樣的兩句話，首先SlidingMenu它只是作為一個庫文件引入，再來它需要依賴ActionBarSherlock，所以這里我們還需要另外去下載它，安卓4.0以上可以忽略，但在我們實際開發中，最低版本一般還是要求2.2或者2.3以上，這也是為了向下兼容ActionBar。這是ActionBarSherlock的下載地址：https://github.com/JakeWharton/ActionBarSherlock

2、既然下載好了所需要的文件，那么就將其導入項目吧，在這里只需要導入2個文件夾

（1）SlidingMenu里的library　　（2）ActionBarSherlock里的actionbarsherlock

引用這2個庫文件：（注意點：不管是導入庫還是自己建的項目，android-support-v4.jar的版本一定要一致，最好復制一份，集體覆蓋一遍）

接着就可以開始進入開發工作了，這里的SlidingMenu你可以僅僅只作為一個View進入，直接將它的實現寫在Activity。為了不使Activity那么的冗余，我這里借助Fragment來實現，這也更接近我們日常的開發環境，把Activity當做容器，上面裝載着兩個Fragment，一個是側滑菜單SlideMenu，一個是主界面內容。

先來看下XML布局文件：

1、主Activity界面，里面裝了一個FrameLayout布局，便於一會需要主界面布局和菜單布局來覆蓋替換它。

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5 
 6 <FrameLayout 
 7     android:id="@+id/fl_main"
 8     android:layout_width="fill_parent"
 9     android:layout_height="fill_parent"
10     ></FrameLayout>
11 
12 </RelativeLayout>

View Code

2、側滑菜單布局

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:id="@+id/leftmenu"
  4     android:layout_width="match_parent"
  5     android:layout_height="match_parent"
  6     android:background="@drawable/img_frame_background"
  7     >
  8 
  9     <LinearLayout
 10         android:layout_width="match_parent"
 11         android:layout_height="match_parent"
 12         android:orientation="vertical" >
 13 
 14         <RelativeLayout
 15             android:layout_width="match_parent"
 16             android:layout_height="wrap_content"
 17             android:layout_centerInParent="true" >
 18 
 19             <ImageView
 20                 android:id="@+id/menuimage1"
 21                 android:layout_width="50dp"
 22                 android:layout_height="50dp"
 23                 android:layout_centerVertical="true"
 24                 android:layout_marginLeft="20dp"
 25                 android:layout_marginTop="20dp"
 26                 android:src="@drawable/img_1" />
 27 
 28             <TextView
 29                 android:id="@+id/menutext1"
 30                 android:layout_width="wrap_content"
 31                 android:layout_height="wrap_content"
 32                 android:layout_centerVertical="true"
 33                 android:layout_marginLeft="20dp"
 34                 android:layout_marginTop="20dp"
 35                 android:layout_toRightOf="@id/menuimage1"
 36                 android:text="菜單一"
 37                 android:textColor="@android:color/white"
 38                 android:textSize="20dp" />
 39         </RelativeLayout>
 40         
 41         
 42                 <RelativeLayout
 43             android:layout_width="match_parent"
 44             android:layout_height="wrap_content"
 45             android:layout_centerInParent="true" >
 46 
 47             <ImageView
 48                 android:id="@+id/menuimage2"
 49                 android:layout_width="50dp"
 50                 android:layout_height="50dp"
 51                 android:layout_centerVertical="true"
 52                 android:layout_marginLeft="20dp"
 53                 android:layout_marginTop="20dp"
 54                 android:src="@drawable/img_2" />
 55 
 56             <TextView
 57                 android:id="@+id/menutext2"
 58                 android:layout_width="wrap_content"
 59                 android:layout_height="wrap_content"
 60                 android:layout_centerVertical="true"
 61                 android:layout_marginLeft="20dp"
 62                 android:layout_marginTop="20dp"
 63                 android:layout_toRightOf="@id/menuimage2"
 64                 android:text="菜單二"
 65                 android:textColor="@android:color/white"
 66                 android:textSize="20dp" />
 67         </RelativeLayout>
 68         
 69                         <RelativeLayout
 70             android:layout_width="match_parent"
 71             android:layout_height="wrap_content"
 72             android:layout_centerInParent="true" >
 73 
 74             <ImageView
 75                 android:id="@+id/menuimage3"
 76                 android:layout_width="50dp"
 77                 android:layout_height="50dp"
 78                 android:layout_centerVertical="true"
 79                 android:layout_marginLeft="20dp"
 80                 android:layout_marginTop="20dp"
 81                 android:src="@drawable/img_3" />
 82 
 83             <TextView
 84                 android:id="@+id/menutext3"
 85                 android:layout_width="wrap_content"
 86                 android:layout_height="wrap_content"
 87                 android:layout_centerVertical="true"
 88                 android:layout_marginLeft="20dp"
 89                 android:layout_marginTop="20dp"
 90                 android:layout_toRightOf="@id/menuimage3"
 91                 android:text="菜單三"
 92                 android:textColor="@android:color/white"
 93                 android:textSize="20dp" />
 94         </RelativeLayout>
 95         
 96                         
 97                                 <RelativeLayout
 98             android:layout_width="match_parent"
 99             android:layout_height="wrap_content"
100             android:layout_centerInParent="true" >
101 
102             <ImageView
103                 android:id="@+id/menuimage4"
104                 android:layout_width="50dp"
105                 android:layout_height="50dp"
106                 android:layout_centerVertical="true"
107                 android:layout_marginLeft="20dp"
108                 android:layout_marginTop="20dp"
109                 android:src="@drawable/img_4" />
110 
111             <TextView
112                 android:id="@+id/menutext4"
113                 android:layout_width="wrap_content"
114                 android:layout_height="wrap_content"
115                 android:layout_centerVertical="true"
116                 android:layout_marginLeft="20dp"
117                 android:layout_marginTop="20dp"
118                 android:layout_toRightOf="@id/menuimage4"
119                 android:text="菜單四"
120                 android:textColor="@android:color/white"
121                 android:textSize="20dp" />
122         </RelativeLayout>
123         
124                                 
125                                         <RelativeLayout
126             android:layout_width="match_parent"
127             android:layout_height="wrap_content"
128             android:layout_centerInParent="true" >
129 
130             <ImageView
131                 android:id="@+id/menuimage5"
132                 android:layout_width="50dp"
133                 android:layout_height="50dp"
134                 android:layout_centerVertical="true"
135                 android:layout_marginLeft="20dp"
136                 android:layout_marginTop="20dp"
137                 android:src="@drawable/img_5" />
138 
139             <TextView
140                 android:id="@+id/menutext5"
141                 android:layout_width="wrap_content"
142                 android:layout_height="wrap_content"
143                 android:layout_centerVertical="true"
144                 android:layout_marginLeft="20dp"
145                 android:layout_marginTop="20dp"
146                 android:layout_toRightOf="@id/menuimage5"
147                 android:text="菜單五"
148                 android:textColor="@android:color/white"
149                 android:textSize="20dp" />
150         </RelativeLayout>
151     </LinearLayout>
152 
153 </RelativeLayout>

View Code

3、主界面布局，只為演示Demo用，這里只存放了一張背景圖

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent"
5         android:background="@drawable/qq" >
6 
7 
8 
9 </RelativeLayout>

View Code

然后我們需要兩個Fragment，一個主界面，一個側滑菜單

1、主界面

 1 package com.rabbit.slidemenu.ui;
 2 
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 
10 import com.example.slidemenutest.R;
11 
12 public class MainFragment extends Fragment {
13     
14     @Override
15     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
16         return inflater.inflate(R.layout.main, container, false);
17     }
18     
19 
20 
21 }

View Code

2、側滑菜單

 1 package com.rabbit.slidemenu.ui;
 2 
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 
10 import com.example.slidemenutest.R;
11 
12 public class MenuFragment extends Fragment {
13     
14     @Override
15     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
16         return inflater.inflate(R.layout.leftmenu, container, false);
17 
18     }
19     
20 
21 }

View Code

3、主Activity（重點），代碼非常簡單，大家看注釋就可以了。

 1 package com.rabbit.slidemenu.ui;
 2 import android.os.Bundle;
 3 import android.support.v4.app.FragmentActivity;
 4 import android.view.KeyEvent;
 5 
 6 import com.example.slidemenutest.R;
 7 import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
 8 
 9 
10 public class MainActivity extends FragmentActivity {
11     //聲明Slidemenu對象
12     private SlidingMenu slidingMenu;
13     
14     @Override
15     protected void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         setContentView(R.layout.activity_main);
18         
19         
20         //替換主界面內容
21         getSupportFragmentManager().beginTransaction().replace(R.id.fl_main, new MainFragment()).commit();
22         
23         //實例化菜單控件
24         slidingMenu=new SlidingMenu(this);
25         //設置相關屬性
26         slidingMenu.setMode(SlidingMenu.LEFT);//菜單靠左
27         slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//全屏支持觸摸拖拉
28         slidingMenu.setBehindOffset(200);//設置菜單大小
29         slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//不包含ActionBar
30         slidingMenu.setMenu(R.layout.leftmenu);
31         //替換掉菜單內容
32         getSupportFragmentManager().beginTransaction().replace(R.id.leftmenu, new MenuFragment()).commit();
33 
34     }
35     
36     @Override
37     public boolean onKeyDown(int keyCode, KeyEvent event) {
38         //重寫了Menu監聽，實現按下手機Menu鍵彈出和關閉側滑菜單
39         if(keyCode==KeyEvent.KEYCODE_MENU){
40             slidingMenu.toggle();
41         }
42         
43         return super.onKeyDown(keyCode, event);
44     }
45 
46 }

再來看下關於SlidingMenu 的一些介紹和API：

1、得到側滑菜單

SlidingMenu sm = getSlidingMenu();

2、設置側滑菜單是從左邊出來還是從右邊出來

sm.setMode(SlidingMenu.LEFT);

3、設置滑動菜單出來之后，內容頁 , 顯示的剩余寬度

sm.setBehindWidthRes(R.dimen.slidingmenu_offset);

4、設置滑動菜單的陰影, 設置陰影，陰影需要開始的時候，特別暗，慢慢的變淡

sm.setShadowDrawble(R.drawable.shadow);

5、設置陰影的寬度

sm.setShadowWidth(R.dimen.shadow_width);

6、設置滑動菜單的范圍

//第一個參數SlidingMenu.TOUCHMODE_FULLSCREEN 可以全屏滑動

// 第二個參數SlidingMenu.TOUCHMODE_MARGIN 只能在邊沿滑動

//三個參數SlidingMenu.TOUCHMODE_NONE 不能滑動

sm.setTouchModeAbove( SlidingMenu.TOUCHMODE_FULLSCREEN );

7、設置SldingMenu自動判斷當前是打開還是關閉

sm.toggle();

其他一些這里就不一一列出了，具體大家看官網https://github.com/jfeinstein10/slidingmenu吧，所有東西都在上面了。

最后還有個需要注意的地方，GitHub上面的介紹也指出了：

NOTE : you cannot use both behindOffset and behindWidth. You will get an exception if you try.

不要同時設置behindOffset和behindWidth，否則會導致異常。

作者：Balla_兔子
出處：http://www.cnblogs.com/lichenwei/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。
正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，日后必有一番作為！旁邊有“推薦”二字，你就順手把它點了吧，相得准，我分文不收；相不准，你也好回來找我！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 安卓開發筆記——自定義HorizontalScrollView控件（實現QQ5.0側滑效果） Android 自定義View修煉-仿QQ5.0 的側滑菜單效果的實現 Android側滑菜單開源庫SlidingMenu使用 SlidingMenu 側滑菜單的用法 Android 開源庫——側滑菜單欄（SlidingMenu）的導入和使用 iOS開發UI篇--一個側滑菜單SlidingMenu 安卓開發筆記——多種方式實現底部菜單欄（仿微信界面） ViewDragHelper實現QQ5.0側滑並處理與ViewPager的滑動沖突使用SlidingMenu 實現Android側滑菜單效果安卓開源框架SlidingMenu使用