今天看啥
热点:

安卓开发笔记——关于开源项目SlidingMenu的使用介绍(仿QQ5.0侧滑菜单),slidingmenuqq5.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,一个是主界面内容。

 

先来看下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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!旁边有“推荐”二字,你就顺手把它点了吧,相得准,我分文不收;相不准,你也好回来找我!

www.bkjia.comtruehttp://www.bkjia.com/Javabc/988284.htmlTechArticle安卓开发笔记——关于开源项目SlidingMenu的使用介绍(仿QQ5.0侧滑菜单),slidingmenuqq5.0 记得去年年末的时候写过这个侧滑效果,当时是利用...

相关文章

相关搜索: android

帮客评论

视觉看点