采取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. javascript链式调用实现方式总结

    方法链一般适合对一个对象进行连续操作(集中在一句代码).一定程度上可以减少代码量,缺点是它占用了函数的返回值. 一.方法体内返回对象实例自身(this) function ClassA(){ this ...

  2. Embedded software develop step

    x86 –>embeded so you you  must familiar with x86 first-

  3. Android的数据存储方式(转)

    数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 ...

  4. hdu 1715 大菲波数_java

    用java的大数解决 import java.math.BigInteger; import java.util.Scanner; public class Main { public static ...

  5. Linux 下如何安装软件?

    http://zhidao.baidu.com/link?url=OkQCOZtVMXhasC8x9zFTZOumsFKf0WW25Ckr2wBF1xO08EsjrBpnMaTBlIAUYdxZ408 ...

  6. ps怎样选取自己想要的图片部分(二)

    上篇文章我们介绍了怎样选取所要的图形.但往往我们实际做项目的时候须要创建一个圆形图标或者椭圆形图标,这样会使得我们的图标相比矩形图标更加美观一些. 那么怎样将一个矩形图标改成圆形图标呢? 首先我们须要 ...

  7. BestCoder Round #3 A,B

    A.预处理出来,0(1)输出. Task schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  8. ORACLE AWR概述及生成AWR报告

    1.Overview of the Automatic Workload Repository The Automatic Workload Repository (AWR) collects, pr ...

  9. 【MFC学习笔记-作业10-稍微难一点的画图】

    设计如图所示的菜单,并编写相应用的消息处理函数.. 菜单1: 画图 画线 画矩形 画图 菜单2:颜色 红色(r) CTRL+F2; 绿色(g) CTRL +F1 蓝色(b) CTRL+F3: 问题:V ...

  10. 使用Devexpress中的CharControl控件,需要控制AxisY轴的显示范围,需要使用该控件的BoundDataChanged事件

    一.控制ChartControl的Y轴范围 使用Devexpress中的CharControl控件,需要控制AxisY轴的显示范围,需要使用该控件的BoundDataChanged事件,具体代码如下: ...