安卓开发笔记——关于开源项目SlidingMenu的使用介绍（仿QQ5.0侧
|
记得去年年末的时候写过这个侧滑效果，当时是利用自定义HorizontalScrollView来实现的，效果如下： @H_404_3@ 有兴趣的朋友可以看看这篇文件《安卓开发笔记——自定义HorizontalScrollView控件（实现QQ5.0侧滑效果）》 ? 今天换一种实现方式，来说下GitHub上非常优秀的开源项目SlidingMenu的使用，它是一种比较新的界面效果，在主界面左滑或右滑出现设置界面效果，能方便的进行各种操作。市面上很多优秀的APP都采用了这种界面方案，像facebook、人人网、everynote、Google+等。 ??@H_404_3@ 
再来看看今天要实现的效果图: ?@H_404_3@ ? 直接进入主题吧，先来说下准备工作： 1、既然是要使用这个开源项目，那首先当然是要下载它了，这是SlidingMenu的下载地址：https://github.com/jfeinstein10/SlidingMenu @H_404_3@ 在这个项目介绍中，我们可以发现这样的两句话，首先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的版本一定要一致，最好复制一份，集体覆盖一遍） @H_404_3@ ? 接着就可以开始进入开发工作了，这里的SlidingMenu你可以仅仅只作为一个View进入，直接将它的实现写在Activity。为了不使Activity那么的冗余，我这里借助Fragment来实现，这也更接近我们日常的开发环境，把Activity当做容器，上面装载着两个Fragment，一个是侧滑菜单SlideMenu，一个是主界面内容。 ? 先来看下XML布局文件： 1、主Activity界面，里面装了一个FrameLayout布局，便于一会需要主界面布局和菜单布局来覆盖替换它。 @H_404_3@ @H_404_3@
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 ="fill_parent" 9 10 ></FrameLayout11 12 </RelativeLayout>View Code 2、侧滑菜单布局 @H_404_3@ @H_404_3@
1 <?xml version="1.0" encoding="utf-8"?> 2 3 android:id="@+id/leftmenu" 4 5 6 android:background="@drawable/img_frame_background" 7 8 9 LinearLayout 10 android:layout_width 11 android:layout_height 12 android:orientation="vertical" 13 14 RelativeLayout 15 16 android:layout_height="wrap_content" 17 android:layout_centerInParent="true" 18 19 ImageView 20 ="@+id/menuimage1" 21 android:layout_width="50dp" 22 android:layout_height 23 android:layout_centerVertical="true" 24 android:layout_marginLeft="20dp" 25 android:layout_marginTop 26 android:src="@drawable/img_1" /> 27 28 TextView 29 ="@+id/menutext1" 30 31 32 33 34 35 android:layout_toRightOf="@id/menuimage1" 36 android:text="菜单一" 37 android:textColor="@android:color/white" 38 android:textSize="20dp" 39 40 41 42 43 44 45 46 47 48 ="@+id/menuimage2" 49 50 51 52 53 54 ="@drawable/img_2" 55 56 57 ="@+id/menutext2" 58 59 60 61 62 63 ="@id/menuimage2" 64 ="菜单二" 65 66 67 68 69 70 71 72 73 74 75 ="@+id/menuimage3" 76 77 78 79 80 81 ="@drawable/img_3" 82 83 84 ="@+id/menutext3" 85 86 87 88 89 90 ="@id/menuimage3" 91 ="菜单三" 92 93 94 95 96 97 98 99 100 101 102 103 ="@+id/menuimage4" 104 105 106 107 108 109 ="@drawable/img_4" 110 111 112 ="@+id/menutext4" 113 114 115 116 117 118 ="@id/menuimage4" 119 ="菜单四" 120 121 122 123 124 125 126 127 128 129 130 131 ="@+id/menuimage5" 132 133 134 135 136 137 ="@drawable/img_5" 138 139 140 ="@+id/menutext5" 141 142 143 144 145 146 ="@id/menuimage5" 147 ="菜单五" 148 149 150 151 LinearLayout152 153 >View Code 3、主界面布局，只为演示Demo用，这里只存放了一张背景图 @H_404_3@ @H_404_3@
1 2 3 4 5 android:background="@drawable/qq" 6 7 8 9 >View Code ? 然后我们需要两个Fragment，一个主界面，一个侧滑菜单 1、主界面 @H_404_3@ @H_404_3@
package com.rabbit.slidemenu.ui; 2 3 import android.os.Bundle; 4 android.support.annotation.Nullable; 5 android.support.v4.app.Fragment; android.view.LayoutInflater; 7 android.view.View; 8 android.view.ViewGroup; 9 10 com.example.slidemenutest.R; 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、侧滑菜单 @H_404_3@ @H_404_3@
class MenuFragment return inflater.inflate(R.layout.leftmenu,1)">17 18 19 21 }View Code 3、主Activity（重点），代码非常简单，大家看注释就可以了。 2 android.support.v4.app.FragmentActivity; android.view.KeyEvent; com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; 8 class MainActivity FragmentActivity { 11 //声明Slidemenu对象 12 private SlidingMenu slidingMenu; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); 18 19 20 替换主界面内容 21 getSupportFragmentManager().beginTransaction().replace(R.id.fl_main,1)">new MainFragment()).commit(); 22 23 实例化菜单控件 24 slidingMenu=new SlidingMenu(this25 设置相关属性 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,1)"> MenuFragment()).commit(); 33 34 35 36 37 boolean onKeyDown(int keyCode,KeyEvent event) { 38 重写了Menu监听，实现按下手机Menu键弹出和关闭侧滑菜单 39 if(keyCode==KeyEvent.KEYCODE_MENU){ 40 slidingMenu.toggle(); 41 } 42 43 return .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_兔子 （编辑：北几岛） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
