采取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. js调试

    在chrome下的调试案例 1.console.log() $("#typeid").change(function(){ var id = $(this).val(); cons ...

  2. Unix/Linux环境C编程入门教程(27) 内存那些事儿

    calloc() free() getpagesize() malloc() mmap() munmap()函数介绍 calloc(配置内存空间) 相关函数 malloc,free,realloc,b ...

  3. 非自定义和自定义Dialog的介绍!!!

    一.非自定义Dialog的几种形式介绍 转自:http://www.kwstu.com/ArticleView/kwstu_20139682354515 前言 对话框对于应用也是必不可少的一个组件,在 ...

  4. cf466C Number of Ways

    C. Number of Ways time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  5. OC基础2:一些基本概念

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.字符常量是存放在单引号中的单个字符,字 ...

  6. UEditor用法

    UEditor是百度的编辑器,界面美观,功能强大,用起来还不错. 详见该链接http://ueditor.baidu.com/ 一.下载 http://ueditor.baidu.com/downlo ...

  7. Elasticsearch的javaAPI之percolator

    Elasticsearch的javaAPI之percolator percolator同意一个在index中注冊queries,然后发送包括doc的请求,返回得到在index中注冊过的而且匹配doc的 ...

  8. mybatis中使用log4j

    Mybatis默认使用有slf4j,所以必须加入下面的依赖,否则可能出现日志无法打印sql或者无法打印resultset. <dependency> <groupId>org. ...

  9. js写的复制功能,只支持IE

    如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){               ...

  10. 查看 并发请求数及其TCP连接状态

    服务器上的一些统计数据: 1)统计80端口连接数netstat -nat|grep -i "80"|wc -l 2)统计httpd协议连接数ps -ef|grep httpd|wc ...