采取SlideMenu达到的效果侧边栏:

setContentView是设置主背景的布局

setBehindContentView是设置左边菜单的布局

setSecondaryMenu是设置右边的布局

setShadowWidth是设置阴影的宽度

setBehindWidth是设置有效的拉出宽度

setMode是设置开启左右两边的菜单

採用ViewPagerIndictor实现滑动的导航栏和页面布局

当中採用TabPageIndicator做可滑动导航栏

ViewPager做滑动的布局

首先要设置导航栏的样式

    <style name="HomeUpTheme" parent="android:Theme.Holo.Light.DarkActionBar">

        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>

    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:dividerPadding">10dp</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:textSize">10pt</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
<item name="android:textColor">#000000</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
<item name="android:background">@drawable/selectitle</item>
<item name="android:gravity">center</item>
</style>

在代码中

ViewPager里面可设置载入

布局适配器PagerAdapter重写instantiateItem方法

碎片适配器FragmentStatePagerAdapter重写Fragment getItem()的方法

最后把两者关联起来

indicatorView.setViewPager(pager);

完整代码:


public class MainAct extends SlidingActivity {

	SlidingMenu slidingMenu;
TabPageIndicator indicatorView;
ViewPager pager; @Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState); setBehindContentView(R.layout.slide_behind);
setContentView(R.layout.slide_main);
slidingMenu = getSlidingMenu();
slidingMenu.setBehindOffset(300);
slidingMenu.setBehindWidth(400);
slidingMenu.setSecondaryMenu(R.layout.slide_second);
// slidingMenu.setTouchModeAbove(SlidingMenu.LEFT_RIGHT);
slidingMenu.setShadowWidth(100);
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
indicatorView = (TabPageIndicator) findViewById(R.id.indicator);
pager = (ViewPager) findViewById(R.id.pager); pager.setAdapter(new Myadapter());
pager.setOffscreenPageLimit(8);
indicatorView.setOnTabReselectedListener(new OnTabReselectedListener() { @Override
public void onTabReselected(int position) {
Toast.makeText(getApplicationContext(), position + "", 3000)
.show();
// TODO Auto-generated method stub
pager.setCurrentItem(position);
}
}); pager.setCurrentItem(0);
indicatorView.setViewPager(pager);
indicatorView.setClickable(true); } class Myadapter extends PagerAdapter { @Override
public int getCount() {
// TODO Auto-generated method stub
return 8;
} @Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return "--" + position + "--";
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager) container).removeViewAt(position); super.destroyItem(container, position, object);
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
} @Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
ImageView imageView = new ImageView(getApplicationContext());
imageView.setImageBitmap(BitmapFactory.decodeResource(
getResources(), R.drawable.flower));
container.addView(imageView);
return imageView;
// return super.instantiateItem(container, position);
} } }

版权声明:本文博主原创文章。博客,未经同意不得转载。

【Andord真】SlideMenu+ViewPagerIndictor双滑动边栏+滑动导航条的更多相关文章

  1. 基于jQuery滑动分步式进度导航条代码

    分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=& ...

  2. React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  3. JQM (功能栏、导航条)

    在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...

  4. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  5. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  6. iOS7之后经过滑动返回导航栏隐藏和显示带来的坑(转载)

    iOS7之后经过滑动返回导航栏隐藏和显示带来的坑 Apple 自从iOS7之后增加了屏幕边缘右滑返回交互的支持,再配合UINavigationController的交换动画,pop上一级的操作变的非常 ...

  7. 微信小程序导航栏,下面内容滑动,上册导航栏跟着滑动,内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  8. 横向滑动页面,导航条滑动居中的 js 实现思路

    最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...

  9. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

随机推荐

  1. redhat 6.3 64位安装中文输入法全过程记录

    首先,修改/etc/profile文件,在末尾增加两行: export LC_ALL="zh_CN.UTF-8" export LANG="zh_CN.UTF-8&quo ...

  2. GPS功能:百度路书自定义【轨迹回放】

    如题所述:百度的编辑界面很直观,修改后就可以运行,地址:http://developer.baidu.com/map/jsdemo.htm#c2_8: 因为同事研究了一下午结果都没搞出来,他copy百 ...

  3. HDOJ-1003 Max Sum(最大连续子段 动态规划)

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 给出一个包含n个数字的序列{a1,a2,..,ai,..,an},-1000<=ai<=100 ...

  4. flex-linkbutton

    LinkButton 控件是没有边框的 Button 控件,当用户将鼠标移动到该控件位置时,其内容将加亮显示.这些特征通常借助包含在浏览器页面中的 HTML 链接进行展示.为使 LinkButton ...

  5. SqlCommand.ExecuteScalar 方法

    本文来自:http://msdn.microsoft.com/zh-cn/library/system.data.sqlclient.sqlcommand.executescalar(v=vs.100 ...

  6. opengl笔记—— glMultMatrixf() 区别 glLoadMatrixf()

    能找到最好的解释来自:http://www.gamedev.net/topic/489879-glpushmatrixglpopmatrix--glloadmatrixf/ 原理: glPushMat ...

  7. UI设计师不可不知的安卓屏幕知识

    不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向,我既做UI设计,也做过一点安卓界面布局,刚好对这块内容比较熟悉,也曾在公司内部做过相关的讲座,在此,我将此部分知识重新梳理出来分享给大家! 1.了 ...

  8. Oracle 存储过程之通用分页查询

    在数据库中书写通用分页存储过程,有利于代码的维护以及执行效率的提升 create or replace procedure Sp_QueryDatePage ( tableName in varcha ...

  9. node.js querystring处理参数

    C:\Documents and Settings\Administrator\WebstormProjects\untitled6>node> url{ parse: [Function ...

  10. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...