Android UI(三)SlidingMenu实现滑动菜单(详细 官方)

Jeff Lee blog:   http://www.cnblogs.com/Alandre/  (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks

效果图:

求资源到首页上部加群即可。

一. SlidingMenu简介

github:https://github.com/jfeinstein10/SlidingMenu

官网上面的简介上翻译的:

SlidingMenu是能让开发者很容易的开发有滑动菜单App(像Google+,YouTube,Facebook)的开源android库。只要引入这个开源库的许可代码,就可以很容易免费的用在你想要滑动菜单的app。如下图所示:
                                                                                                  

二.官方小例子


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

public class SlidingExample extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setTitle(R.string.attach);

// set the content view

setContentView(R.layout.content);

// configure the SlidingMenu

SlidingMenu menu = new SlidingMenu(this);

menu.setMode(SlidingMenu.LEFT);

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);

}

}

自然你也可以用xml定义一个slidingMenu


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu

xmlns:sliding="
http://schemas.android.com/apk/res-auto"

android:id="@+id/slidingmenulayout"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

sliding:viewAbove="@layout/YOUR_ABOVE_VIEW"

sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND"

sliding:touchModeAbove="margin|fullscreen"

sliding:behindOffset="@dimen/YOUR_OFFSET"

sliding:behindWidth="@dimen/YOUR_WIDTH"

sliding:behindScrollScale="@dimen/YOUR_SCALE"

sliding:shadowDrawable="@drawable/YOUR_SHADOW"

sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH"

sliding:fadeEnabled="true|false"

sliding:fadeDegree="float"

sliding:selectorEnabled="true|false"

sliding:selectorDrawable="@drawable/YOUR_SELECTOR"/>

官方文档翻译如下:

  • viewAbove - 在菜单之上的布局引用
  • viewBehind - 在菜单之下的布局引用
  • touchModeAbove - 指那一部分屏幕触摸后视图显示
  • behindOffset - 菜单显示时,主体显示多少(单位像素)
  • behindWidth - 菜单显示,主体显示的宽。默认全屏
  • behindScrollScale - 菜单显示的滚动设置
  • shadowDrawable - 滚动阴影设置
  • shadowWidth - 滚动阴影的宽度
  • fadeEnabled - 滑动时菜单的是否渐变
  • fadeDegree - 滑动时的渐变程度

三.实现滑动菜单

主要结构:MainAct为主入口,然后各个fragment实现各自内容动作。

MainAct.java


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

public class MainAct extends FragmentActivity {

private SlidingMenu menu;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.slidingmenu_main);

menu = new SlidingMenu(this);

menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

menu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);

menu.setShadowDrawable(R.drawable.slidingmenu_shadow);

menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);

DisplayMetrics dm = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(dm);

menu.setFadeDegree(0.35f);

menu.setBehindOffset(dm.widthPixels*50/100);

menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

menu.setMode(SlidingMenu.LEFT_RIGHT);//这里模式设置为左右都有菜单,RIGHT显示右菜单,LEFT显示左菜单,LEFT_RIGH显示左右菜单

menu.setContent(R.layout.slidingmenu_content);

menu.setMenu(R.layout.slidingmenu_menu);

menu.setSecondaryMenu(R.layout.slidingmenu_menu_2);

menu.setSecondaryShadowDrawable(R.drawable.slidingmenu_shadow_2);

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.slidingmenu_content, new MainFragment(menu))

.commit();//设置主页面内容

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.slidingmenu_menu, new MainLeftFragment())

.commit();//设置左菜单内容

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.slidingmenu_menu_2, new MainRightFragment(menu))

.commit();//设置右菜单内容

}

}

总结:用则简单则难

时间: 2024-12-06 16:55:35

Android UI(三)SlidingMenu实现滑动菜单(详细 官方)的相关文章

Android UI效果实现——Activity滑动退出效果

更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况下无法滑动,感谢! 一.使用说明 使用方法很简单,只有一个类HorizontalActivity,继承自FragmentActivity类,实现了contentView的滑动事件触发和动画效果,要在自己的代码里实现,方法两种: 1.如果对Activity没特殊要求,直接继承HorizontalAct

SlidingMenu 左侧滑动菜单

1.MainActivity package loveworld.slidingmenu; import java.util.ArrayList; import android.app.Activity; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.provider.ContactsContract.C

Android UI之SlidingMenu侧滑菜单

SlidingMenu侧滑菜单是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了这种界面方案,像facebook.人人网.everynote.Google+.网易新闻.知乎日报.有道云笔记等等. 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式来实现,但是用第三方开源库更简单.地址: https://github.com/jfeinstein10/SlidingMenu.git 侧滑菜单实现原理: 在一

Android开源库--SlidingMenu左右侧滑菜单

如果说我比别人看得更远些,那是因为我站在了巨人的肩上. github地址:https://github.com/jfeinstein10/SlidingMenu 设置: 1.下载之后以依赖项的形式添加到项目中即可. 2.如果要集成ActionBarSherlock,以依赖项的形式添加到SlidingMenu,然后使用的时候继承SherlockActivities即可. 使用: 1.直接通过代码方式实现. 2.通过继承SlidingActivity实现. 3.直接在XML布局里面使用. 以上示例都

【Android UI】顶部or底部菜单的循环滑动效果一

实现了分页的滑动效果,做的demo流畅运行 注:貌似支持的样式(控件)有一定的限制,我试过短信的listview页面,暂无法实现滑动效果 java文件:MainActivity.java.Activity1.java.Activity2.java.Activity3.java.Activity4.java MainActivity.java package com.example.tabhostmove; import android.app.Activity; import android.a

进阶三之Android UI介面之(滑动效果之Gallery + GridView)

人一生下就会哭,笑是后来才学会的.所以忧伤是一种低级的本能,而快乐是一种更高级的能力. 本讲内容:滑动效果之Gallery + GridView Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 示例效果图         下面是res/layout/activity_main.xml 布局文件: <?xml version="1.0" encoding=&q

【Android UI】案例03滑动切换效果的实现(ViewPager)

本例使用ViewPager实现滑动切换的效果.本例涉及的ViewPager,为android.support.v4.view.ViewPager.所以需要在android项目中导入android-support-v4.jar. 本例中ViewPager是实现滑动效果的核心部分.对其设置PageChangeListener监听事件,是实现滑动效果的核心思路. [转载使用,请注明出处:http://blog.csdn.net/mahoking] 首先是主界面layout.xml文件,activity

进阶七之Android UI介面之(滑动倒影效果)

只有你学会把自己已有的成绩都归零,才能腾出空间去接纳更多的新东西,如此才能使自己不断的超越自己. 本讲内容:介面滑动倒影效果 一.倒影原理: 倒影效果是主要由原图+间距+倒影三部分组成,高度大约为原图的3/2(原图为1.倒影为1/2) 原图,就是我们看到了最开始的图片 间距,是原图与倒影之间的间隙,如:reflectionGap = 4; 倒影,是原图下半部分1/2高度,通过矩阵变换matrix.preScale(1, -1); 获取倒立图片,然后再加上线性遮罩和阴影实现 示例一效果图:    

9. Android框架之 SlidingMenu(抽屉菜单)

详见为知笔记:Android / Android用户界面优化 / Android SlidingMenu菜单栏程序设计