你的位置:首页 > Java教程

[Java教程]安卓开发笔记——关于开源项目SlidingMenu的使用介绍(仿QQ5.0侧滑菜单)


记得去年年末的时候写过这个侧滑效果,当时是利用自定义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,一个是主界面内容。

 

先来看下

1、主Activity界面,里面装了一个FrameLayout布局,便于一会需要主界面布局和菜单布局来覆盖替换它。

 1 <RelativeLayout ="http://schemas.android.com/apk/res/android" 2   ="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 <??> 2 <RelativeLayout ="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       <ImageView103         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       <TextView112         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                     <RelativeLayout126       android:layout_width="match_parent"127       android:layout_height="wrap_content"128       android:layout_centerInParent="true" >129 130       <ImageView131         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       <TextView140         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 ="http://schemas.android.com/apk/res/android"2   ="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   @Override15   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   @Override15   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   @Override15   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);//不包含ActionBar30     slidingMenu.setMenu(R.layout.leftmenu);31     //替换掉菜单内容32     getSupportFragmentManager().beginTransaction().replace(R.id.leftmenu, new MenuFragment()).commit();33 34   }35   36   @Override37   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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!旁边有“推荐”二字,你就顺手把它点了吧,相得准,我分文不收;相不准,你也好回来找我!