记得去年年末的时候写过这个侧滑效果,当时是利用自定义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布局,便于一会需要主界面布局和菜单布局来覆盖替换它。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"> <FrameLayout
android:id="@+id/fl_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
></FrameLayout> </RelativeLayout>
2、侧滑菜单布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/leftmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" > <ImageView
android:id="@+id/menuimage1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_1" /> <TextView
android:id="@+id/menutext1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@id/menuimage1"
android:text="菜单一"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" > <ImageView
android:id="@+id/menuimage2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_2" /> <TextView
android:id="@+id/menutext2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@id/menuimage2"
android:text="菜单二"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" > <ImageView
android:id="@+id/menuimage3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_3" /> <TextView
android:id="@+id/menutext3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@id/menuimage3"
android:text="菜单三"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" > <ImageView
android:id="@+id/menuimage4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_4" /> <TextView
android:id="@+id/menutext4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@id/menuimage4"
android:text="菜单四"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" > <ImageView
android:id="@+id/menuimage5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/img_5" /> <TextView
android:id="@+id/menutext5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@id/menuimage5"
android:text="菜单五"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout>
</LinearLayout> </RelativeLayout>
3、主界面布局,只为演示Demo用,这里只存放了一张背景图
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq" > </RelativeLayout>
然后我们需要两个Fragment,一个主界面,一个侧滑菜单
1、主界面
package com.rabbit.slidemenu.ui; import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; import com.example.slidemenutest.R; public class MainFragment extends Fragment { @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.main, container, false);
} }
2、侧滑菜单
package com.rabbit.slidemenu.ui; import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; import com.example.slidemenutest.R; public class MenuFragment extends Fragment { @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.leftmenu, container, false); } }
3、主Activity(重点),代码非常简单,大家看注释就可以了。
package com.rabbit.slidemenu.ui;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent; import com.example.slidemenutest.R;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; public class MainActivity extends FragmentActivity {
//声明Slidemenu对象
private SlidingMenu slidingMenu; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //替换主界面内容
getSupportFragmentManager().beginTransaction().replace(R.id.fl_main, new MainFragment()).commit(); //实例化菜单控件
slidingMenu=new SlidingMenu(this);
//设置相关属性
slidingMenu.setMode(SlidingMenu.LEFT);//菜单靠左
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//全屏支持触摸拖拉
slidingMenu.setBehindOffset(200);//设置菜单大小
slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//不包含ActionBar
slidingMenu.setMenu(R.layout.leftmenu);
//替换掉菜单内容
getSupportFragmentManager().beginTransaction().replace(R.id.leftmenu, new MenuFragment()).commit(); } @Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
//重写了Menu监听,实现按下手机Menu键弹出和关闭侧滑菜单
if(keyCode==KeyEvent.KEYCODE_MENU){
slidingMenu.toggle();
} return super.onKeyDown(keyCode, event);
} }
再来看下关于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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!旁边有“推荐”二字,你就顺手把它点了吧,相得准,我分文不收;相不准,你也好回来找我!