Android開源項目SlidingMenu的使用

jopen 10年前發布 | 257K 次閱讀 Android Android開發移動開發

一、SlidingMenu簡介

相信大家對SlidingMenu都不陌生了，它是一種比較新的設置界面或配置界面的效果，在主界面左滑或者右滑出現設置界面效果，能方便的進行各種操作。很多優秀的應用都采用了這種界面方案，像非死book、人人網、everynote、Google+等等。
如下圖所示：

Google+界面效果圖 everynote界面效果圖

因為效果確實比較新穎，所以在很多的應用開發中去實現此效果，解決的辦法也是不盡相同。諸多比較以后發

現，還是GitHub上的開源項目SlidingMenu提供了最佳的實現：定制靈活、各種陰影和漸變以及動畫的滑動效果都很不錯。不過這是一個開源庫，而不是一個完整的項目，要把它作為libary引入到你自己的工程里，簡單配置一下就可以實現SlidingMenu的效果。

二、SlidingMenu使用

slidingmenu_library下載地址

要想能夠實現SlidingMenu的效果，首先必須要將它作為libary導入到你的工程，先看一下它的目錄結構，如圖：

Android開源項目SlidingMenu的使用

這里面的代碼我就不詳細講解了，主要是教大家怎么直接拿過來用，不過博主對代碼進行了一些非常詳細的注

釋，有興趣的同學可以好好學習研究一下。

1、下載完畢之后，將此項目導入Eclipse開發環境中，然后執行如下幾個步驟：

<1> 點擊右鍵，點擊“Import”按鈕，彈出對話框選項；

Android開源項目SlidingMenu的使用

<2> 選中“Existing Projects into Workspace”選項；

Android開源項目SlidingMenu的使用

<3> 再單擊“Browser”按鈕后，彈出選項項目對話框，選中要導入的項目；

Android開源項目SlidingMenu的使用

<4> 點擊“Finish”完成。

2、導入項目之后，然后在新建一個Android項目，將slidingmenu_library導入新建的Android項目中，步驟如下：

<1> 右鍵點擊新建的Android項目，然后點擊最下方的“Properties”選項；

Android開源項目SlidingMenu的使用

<2> 點擊彈出對話框之后，在最左側選擇“Android”選項，然后再點擊右下方的“Add”按鈕；

Android開源項目SlidingMenu的使用

<3> 點擊后彈出對話框，選中之前導入的slidingmenu_library項目；

Android開源項目SlidingMenu的使用

<4> 選中之后如圖所示；

Android開源項目SlidingMenu的使用

<5> 這就說明了導入庫已經成功了，導入成功之后會在Android的引用包中出現一個slidingmenu_library.jar包；

Android開源項目SlidingMenu的使用

注意：這里有個地方需要大家特別注意一下，在新建完Android項目之后，較新的Eclipse版本都會在Android目錄下

生成一個libs的文件夾，里面會有一個android-support-v4.jar的jar包，這個jar一定要記得刪掉，否則運行程序的時候

會出現異常，提示是找不到類的異常，博主在這個地方糾結了好長時間。最后發現出現異常的原因是因為在導入

slidingmenu_library類庫的時候，這個類庫里面本身就包含了android-support-v4.jar的jar包，所以運行的時候就會出

現異常，系統不知道去調用哪個路徑的下的包，所以程序崩潰，提示找不到類。

通過講解，相信大家對于開源項目SlidingMenu都有了一個比較初步的了解（不了解的可以參考上

一篇文章），那么從這一章開始，博主將會以SlidingMenu為重心，給大家帶來非常豐富的示例演示，讓大家對

SlidingMenu有一個更加深入的了解以及如何去實現一些比較炫的滑動效果。

這篇文章會給大家帶來7個不同效果的示例，每個示例都包含了最基本的使用方法，從易到難，循序漸進。能夠

讓初學者可以快速的掌握SlidingMenu的使用方法。下一篇文章會給大家帶來三種不同的動畫效果來實現滑動菜單欄

的滑動。

關于這些示例，都是SlidingMenu開源項目中自帶的一些示例，但是對于初學者來說，要想運行這些示例查看效

果，就必須要導入很多的庫，使用起來也是非常的麻煩。博主這里為了能夠方便大家更好的學習，就把每個示例都單

獨拿了出來，并且添加了一些非常詳細的注釋，讓初學者能夠一看就懂，那么博主的目的就達到了。

好的，話不多說，希望大家能夠繼續支持！

一、示例效果圖

先上效果圖是博主一貫的作風，這樣做可以讓大家對于效果的實現有一個大概的了解，可以從中得到自己想要去

實現的效果。

1、示例一效果圖

該示例主要是演示通過改變不同的值來改變滑動菜單不同的效果，可以設置的值有：

<1> 設置滑動菜單顯示的位置（左邊、右邊或者左右兩邊都有）；

<2> 設置觸摸屏幕的模式（全屏觸摸打開滑動菜單、邊緣觸摸打開滑動菜單或者觸摸不能打開滑動菜單）；

<3> 設置滑動菜單滑動時縮放的效果以及關閉此效果（值越大效果越明顯）；

<4> 設置滑動菜單滑動時的陰影效果以及關閉此效果（值越大效果越明顯）；

<5> 設置滑動菜單滑動時漸入漸出的效果（值越大效果越明顯）。

效果圖一效果圖二

Android開源項目SlidingMenu的使用

2、示例二效果圖

該示例主要就是教大家實現一個簡單的放置在左邊滑動菜單欄的效果。

效果圖一

3、示例三效果圖

該示例實現了在左右兩邊存放兩個視圖，并且都可以通滑動屏幕來打開。

Android開源項目SlidingMenu的使用

4、示例四效果圖

該示例主要演示了通過Fragment來改變主視圖的界面內容。

Android開源項目SlidingMenu的使用

5、示例五效果圖

該示例也是通過Fragment來改變主視圖的界面內容，但不同的是列表中存放的是圖片，并且點擊列表圖片之后會

經過壓縮顯示出來。

Android開源項目SlidingMenu的使用

6、示例六效果圖

在該示例中使用ViewPager這個類，將多個Fragment存放在viewpager中，并在主界面視圖內容中顯示出來。

效果圖一效果圖二

7、示例七效果圖

該示例主要演示了當觸摸屏幕滑動時，上面的標題欄TitleBar并不會跟隨著一起滑動，滑動的只是中間的內容視圖。（印象筆記實現了此效果）

Android開源項目SlidingMenu的使用

二、代碼講解

由于示例比較多，所以博主我就不對每個示例的代碼一一進行講解了，這里就挑一個最基礎的示例給大家講解一

下。在文章的末尾，我會把所有的示例打包供大家下載學習，里面有一些詳細的注釋，相信大家能一看就懂。

1、項目結構圖

Android開源項目SlidingMenu的使用

2、content_frame.xml布局

我們先從布局文件開始講起，這里為什么要定義一個content_frame.xml呢？主要是為了定義一個虛擬的視圖，方便Fragment能夠替換該視圖，以達到Fragment的視圖內容能夠顯示在屏幕上的效果。

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />

大家可以看到這里就定義了一個FrameLayout布局，在給它附上一個id，以至于在系統中可以找到該布局對象。

3、menu_frame.xml布局

這個布局文件是用來存放滑動菜單打開后的視圖界面的。

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/menu_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />

4、list.xml

這個list布局文件會在ListFragment中用到。

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android :id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/list_padding"
android:paddingRight="@dimen/list_padding" />

5、row.xml

用于存放列表中的圖片和文本。

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageView
android:id="@+id/row_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/row_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Medium Text"
android:textAppearance="@android :style/TextAppearance.Medium" />
</LinearLayout>

6、shadow.xml資源

這個資源文件是用來實現陰影效果的圖形，使用了漸變的繪圖效果。

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:endColor="#33000000"
android:centerColor="#11000000"
android:startColor="#00000000" />
</shape>

7、SampleListFragment類

講完了布局文件，再讓我們來看看Java文件。這個類是用來顯示界面中的列表的。

[java] view plaincopy

package com.yangyu.myslidingmenudemo02;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
* @author yangyu
* 功能描述：列表Fragment，用來顯示列表視圖
*/
public class SampleListFragment extends ListFragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.list, null);
}
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
SampleAdapter adapter = new SampleAdapter(getActivity());
for (int i = 0; i < 20; i++) {
adapter.add(new SampleItem("Sample List", android.R.drawable.ic_menu_search));
}
setListAdapter(adapter);
}
private class SampleItem {
public String tag;
public int iconRes;
public SampleItem(String tag, int iconRes) {
this.tag = tag;
this.iconRes = iconRes;
}
}
public class SampleAdapter extends ArrayAdapter<SampleItem> {
public SampleAdapter(Context context) {
super(context, 0);
}
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, null);
}
ImageView icon = (ImageView) convertView.findViewById(R.id.row_icon);
icon.setImageResource(getItem(position).iconRes);
TextView title = (TextView) convertView.findViewById(R.id.row_title);
title.setText(getItem(position).tag);
return convertView;
}
}
}

8、MainActivity類

這是整個程序的入口類，也是在這個類中，對SlidingMenu的屬性進行設置。

[java] view plaincopy

package com.yangyu.myslidingmenudemo02;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
public class MainActivity extends FragmentActivity {
private SlidingMenu menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//設置標題
setTitle("Attach");
//初始化滑動菜單
initSlidingMenu();
}
/**
* 初始化滑動菜單
*/
private void initSlidingMenu() {
// 設置主界面視圖
setContentView(R.layout.content_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();
// 設置滑動菜單的屬性值
menu = new SlidingMenu(this);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidthRes(R.dimen.shadow_width);
menu.setShadowDrawable(R.drawable.shadow);
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
menu.setFadeDegree(0.35f);
menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
// 設置滑動菜單的視圖界面
menu.setMenu(R.layout.menu_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();
}
@Override
public void onBackPressed() {
//點擊返回鍵關閉滑動菜單
if (menu.isMenuShowing()) {
menu.showContent();
} else {
super.onBackPressed();
}
}
}

經過上一篇文章的學習，相信大家對開源項目SlidingMenu的用法已經有了一個非常深入的了解，那么這一章博

主就來教大家滑動菜單欄滑動時動畫效果的實現。博主這里用了三個不同動畫效果的基礎示例來教大家如何去實現，

等大家弄懂了之后完全可以做到舉一反三，去實現更多不同的動畫效果，讓你的應用軟件給用戶帶來眼前一亮的

效果。

一、SlidingMenu動畫效果示例一

1、示例一效果圖

該示例實現了滑動時縮放的效果，看左邊的效果圖可以明顯的感覺到，滑動菜單欄剛剛打開時的圖片比右邊的效

果圖滑動菜單欄打開一大半的圖片要小。這里用到的是比例縮放的動畫效果。

Android開源項目SlidingMenu的使用

2、示例一項目結構圖

Android開源項目SlidingMenu的使用

3、示例一代碼講解

關于項目中資源文件的部分我就不詳細講解了，在上篇文章中已經詳細的介紹過了，這地方我就著重的講解一下MainActivity類，也是主程序入口類，滑動菜單欄和滑動的效果都是在此類中實現。

[java] view plaincopy

package com.example.myslidingmenudemo08;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.MenuItem;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
public class MainActivity extends SlidingFragmentActivity {
private CanvasTransformer mTransformer;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTitle("Zoom");
initAnimation();
initSlidingMenu();
getActionBar().setDisplayHomeAsUpEnabled(true);
}
/**
* 初始化滑動菜單
*/
private void initSlidingMenu(){
// 設置主界面視圖
setContentView(R.layout.content_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();
// 設置滑動菜單視圖
setBehindContentView(R.layout.menu_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();
// 設置滑動菜單的屬性值
SlidingMenu sm = getSlidingMenu();
sm.setShadowWidthRes(R.dimen.shadow_width);
sm.setShadowDrawable(R.drawable.shadow);
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
sm.setFadeDegree(0.35f);
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
sm.setBehindScrollScale(0.0f);
sm.setBehindCanvasTransformer(mTransformer);
setSlidingActionBarEnabled(true);
}
/**
* 初始化動畫效果
*/
private void initAnimation(){
mTransformer = new CanvasTransformer(){
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
float scale = (float) (percentOpen*0.25 + 0.75);
canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);
}
};
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
toggle();
return true;
}
return super.onOptionsItemSelected(item);
}
}

大家可以先看一遍上面的這段代碼，要想實現動畫效果主要有三個步驟：

<1> 先定義一個CanvasTransformer接口對象，這個接口是在slidingmenu_library類庫中封裝好的，所以要想運行此項目還要導入slidingmenu_library類庫，這個導入的方法已經在前面詳細的介紹過了，不清楚的同學可以參考：

【Android UI設計與開發】第16期：滑動菜單欄（一）開源項目SlidingMenu的使用

[java] view plaincopy

private CanvasTransformer mTransformer;

<2> 然后再實例化此接口，重寫接口中的方法：

[java] view plaincopy

mTransformer = new CanvasTransformer(){
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
float scale = (float) (percentOpen*0.25 + 0.75);
canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);
}
};

我們可以看到在transformCanvas(Canvas canvas, float percentOpen)方法中，有兩個參數：

① Canvas canvas：畫布類；

② float percentOpen：滑動菜單欄打開時的百分比值。

<3> 最后在把實例化的接口對象賦給SlidingMenu類中的setBehindCanvasTransformer()方法：

[java] view plaincopy

sm.setBehindCanvasTransformer(mTransformer);

這樣，一個滑動菜單欄打開時的動畫效果就配置好了，怎么樣？還是很簡單的吧。

二、SlidingMenu動畫效果示例二

1、示例二效果圖

該示例主要實現了當滑動菜單欄打開時滑動伸縮的效果，大家通過兩站效果圖的對比可以很清楚的看到。

Android開源項目SlidingMenu的使用

2、示例二項目結構圖

Android開源項目SlidingMenu的使用

大家可以拿此圖跟示例一的項目結構圖做對比，會發現幾乎都是一模一樣的，不一樣的只是MainActivity類中動畫

的實現代碼不一樣，僅此而已。

3、示例二項目代碼

MainActivity.java：

[java] view plaincopy

package com.yangyu.myslidingmenudemo09;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.MenuItem;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
public class MainActivity extends SlidingFragmentActivity {
private CanvasTransformer mTransformer;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTitle("Scale");
initAnimation();
initSlidingMenu();
getActionBar().setDisplayHomeAsUpEnabled(true);
}
/**
* 初始化滑動菜單
*/
private void initSlidingMenu(){
// 設置主界面視圖
setContentView(R.layout.content_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();
// 設置滑動菜單視圖
setBehindContentView(R.layout.menu_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();
// 設置滑動菜單的屬性值
SlidingMenu sm = getSlidingMenu();
sm.setShadowWidthRes(R.dimen.shadow_width);
sm.setShadowDrawable(R.drawable.shadow);
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
sm.setFadeDegree(0.35f);
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
sm.setBehindScrollScale(0.0f);
sm.setBehindCanvasTransformer(mTransformer);
setSlidingActionBarEnabled(true);
}
/**
* 初始化動畫效果
*/
private void initAnimation(){
mTransformer = new CanvasTransformer(){
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
canvas.scale(percentOpen, 1, 0, 0);
}
};
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
toggle();
return true;
}
return super.onOptionsItemSelected(item);
}
}

細心的讀者會發現，整段代碼中跟示例一的代碼比起來，只是initAnimation()方法中的代碼改變了一點點，正是

因為改變這一點點的代碼，就可以實現了滑動伸縮的動畫效果。

三、SlidingMenu動畫效果示例三

1、示例三效果圖

該示例效果實現了當滑動菜單欄剛剛打開時，滑動菜單欄的視圖內容從下方漸漸的往上移動，等滑動菜單欄完全

打開時，該視圖就會移動到最頂端。大家對比兩張效果圖就可以很清楚的看到此效果了。

2、示例三項目結構圖

Android開源項目SlidingMenu的使用

3、示例三項目代碼

MainActivity.java：

[java] view plaincopy

package com.yangyu.myslidingmenudemo10;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.animation.Interpolator;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
public class MainActivity extends SlidingFragmentActivity {
private CanvasTransformer mTransformer;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTitle("Slide Up");
initAnimation();
initSlidingMenu();
getActionBar().setDisplayHomeAsUpEnabled(true);
}
/**
* 初始化滑動菜單
*/
private void initSlidingMenu(){
// 設置主界面視圖
setContentView(R.layout.content_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();
// 設置滑動菜單視圖
setBehindContentView(R.layout.menu_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();
// 設置滑動菜單的屬性值
SlidingMenu sm = getSlidingMenu();
sm.setShadowWidthRes(R.dimen.shadow_width);
sm.setShadowDrawable(R.drawable.shadow);
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
sm.setFadeDegree(0.35f);
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
sm.setBehindScrollScale(0.0f);
sm.setBehindCanvasTransformer(mTransformer);
setSlidingActionBarEnabled(true);
}
private static Interpolator interp = new Interpolator() {
@Override
public float getInterpolation(float t) {
t -= 1.0f;
return t * t * t + 1.0f;
}
};
/**
* 初始化動畫效果
*/
private void initAnimation(){
mTransformer = new CanvasTransformer(){
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
canvas.translate(0, canvas.getHeight() * (1 - interp.getInterpolation(percentOpen)));
}
};
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
toggle();
return true;
}
return super.onOptionsItemSelected(item);
}
}

在這段代碼中，我們將會使用到一個動畫插入器Interpolator接口，這個接口是干嗎用的呢？

答：在Android的動畫效果實現中，我們使用Interpolator來控制動畫的進度。Interpolator 定義了動畫的變化速度，可以實現勻速、正加速、負加速、無規則變加速等。所以要想實現緩慢往上移動的效果就要使用到此它，并且重寫此接口中的 getInterpolation(float t)方法。

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1405218387226.html

Android Android開發移動開發

Android開源項目SlidingMenu的使用

【Android UI設計與開發】第16期：滑動菜單欄（一）開源項目SlidingMenu的使用

相關經驗

相關資訊

相關文檔

目錄