Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面

源码地址 http://download.csdn.net/detail/zhangjm_123/7902245


最近写了一个fragment+viewpager仿qq的app,先上图


Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第1张图片        Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第2张图片

Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第3张图片        Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第4张图片

如图,界面底部有四个textview,分别是消息、好友、动态、我的,每点击一个textview将会将会到相应的fragment。大家可能注意到第1张图片和其它的不一样。事实上,这4张图片都是fragment,只是第1张图片中的fragment里有一个viewpager,viewpager里面有3个view,分别为消息、通话、视频对应的view,这里为了区分开来,暂且用1、2、3来标识三者,用手指左右滑动viewpager或点击顶部的tab,就会分别切换消息、通话、视频界面,完整的应该如下:

Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第5张图片Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第6张图片Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面_第7张图片

代码没什么难度,在这里就不贴详细代码了,相对复杂一些的是当滑动MessageFragment时,顶部tab跟着滑动的代码:


首先,监听viewpager的OnPageChangeListener事件

viewPager.setOnPageChangeListener(this);

当滑动完毕后,设置tab的滚动位置

	@Override
	public void onPageSelected(int position) {
		setCursorPosition(position);
	}

	private void setCursorPosition(int position) {
		lastCursorPos = curCursorPos;
		curCursorPos = position;
		new Thread(cursorPosRunnable).start();//开一个线程,用于滚动tab
	}
	cursorPosRunnable = new Runnable() {
			
			@Override
			public void run() {
				calcXAndSendMsg();
			}

			private void calcXAndSendMsg() {
				try{
					int cusorCurrentX = titleTxtWidth*lastCursorPos+(titleTxtWidth-cursorWidth)/2;
					int cursorTargetX = titleTxtWidth*curCursorPos+(titleTxtWidth-cursorWidth)/2;
					
					if(lastCursorPos == curCursorPos) {
						handler.obtainMessage(WHAT_SET_CURSOR_POSITION, cusorCurrentX, 0).sendToTarget();
					} else {
						while(cusorCurrentX != cursorTargetX) {
							
							if(cusorCurrentX < cursorTargetX) {
								cusorCurrentX+=15;
							} else {
								cusorCurrentX-=15;
							}
							handler.obtainMessage(WHAT_SET_CURSOR_POSITION, cusorCurrentX, 0).sendToTarget();
							Thread.sleep(5);
						}
					}
				}catch(InterruptedException e) {
					e.printStackTrace();
				}
			}
		};

		//接收cursorPosRunnable发送过来的消息,并设置tab的x坐标,实现滚动效果
		handler = new Handler() {
			public void handleMessage(Message msg) {
				switch (msg.what) {
				case MessageFragment.WHAT_SET_CURSOR_POSITION:
					
					cursorView.setX(msg.arg1);
					break;

				default:
					break;
				}
				
			};
		};

具体看下载源码看看 http://download.csdn.net/detail/zhangjm_123/7902245






你可能感兴趣的:(Android)