【Andord真】SlideMenu+ViewPagerIndictor双滑动边栏+滑动导航条

采取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);
		}

	}

}

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

时间: 2025-01-13 01:35:43

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

Js控制网页滑动的时候顶部导航条变成半透明实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入jQuery--> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <title>Js控制网页滑动的时候顶部导航条变

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

摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. HTML部分 相关技术栈:react.antd.react-router.详细的技术栈应用请参考官方文档的使用说明. * 展示主页App.jsx组件代码 import React from 'react'; import './App.css'; import { Link, Route } from 'react-router-dom'; im

滑动UIScrollView隐藏显示导航条与标签条

//计算scrollview偏移量:typedef NS_ENUM(NSInteger, ScrollDirection) { ScrollDirectionNone, ScrollDirectionUp, ScrollDirectionDown,};ScrollDirection detectScrollDirection(currentOffsetY, previousOffsetY){ return currentOffsetY > previousOffsetY ? ScrollDire

jquery 实现导航栏滑动效果

精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现: 3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

macbook pro 苹果鼠标magic mouse2在win10下禁用左右滑动、水平滑动以及其他设置

前段时间入手一台macbook pro,同时购买了一个magic mouse2 相信大部分程序员同志,只要用macbook都回装双系统的,本人也不例外,因为需要用到vs等很多开发工具. magic mouse2在osx上的表现本人不做评论,没用过几回,在win10上的表现太差劲了,特别是对于经常使用代码编辑器的程序员,或者经常使用word.excel之类的工作者,这鼠标简直是煎熬.左右滑动这等高大上的功能,在代码编辑中完全是一锅汤里的老鼠屎,相信用过的都会有体会的.本来你要下拉,却发现它左右滑动

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

最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导航栏滑动居中一样. 写出来挺有成就感的,做个记录.使用的框架是vue, 但思路无关框架. 首先看html的结构, <ul> <li class='active'>娱乐</li> <li>要闻</li> <li>体育</li>

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

仿优酷Android客户端图片左右滑动(自动滑动)

最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent

一种支持任意尺寸的图片滑动(上下左右滑动)效果

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>任意尺寸的图片滑动</title> <style> div { margin: 0 auto; overflow: hidden;} .main { width: 100