1. 程式人生 > >Android 安卓 fragment+viewpager 仿qq介面 實現點選選單切換介面+滑動切換viewpager切換介面

Android 安卓 fragment+viewpager 仿qq介面 實現點選選單切換介面+滑動切換viewpager切換介面

原始碼地址 http://download.csdn.net/detail/zhangjm_123/7902245

最近寫了一個fragment+viewpager仿qq的app,先上圖

        

        

如圖,介面底部有四個textview,分別是訊息、好友、動態、我的,每點選一個textview將會將會到相應的fragment。大家可能注意到第1張圖片和其它的不一樣。事實上,這4張圖片都是fragment,只是第1張圖片中的fragment裡有一個viewpager,viewpager裡面有3個view,分別為訊息、通話、視訊對應的view,這裡為了區分開來,暫且用1、2、3來標識三者,用手指左右滑動viewpager或點選頂部的tab,就會分別切換訊息、通話、視訊介面,完整的應該如下:


程式碼沒什麼難度,在這裡就不貼詳細程式碼了,相對複雜一些的是當滑動MessageFragment時,頂部tab跟著滑動的程式碼:

首先,監聽viewpager的OnPageChangeListener事件

<span style="font-size:14px;"></pre><pre name="code" class="java">viewPager.setOnPageChangeListener(this);</span>

當滑動完畢後,設定tab的滾動位置

<span style="font-size:14px;">	@Override
	public void onPageSelected(int position) {
		setCursorPosition(position);
	}</span>
<span style="font-size:14px;"><span style="white-space:pre">	</span>private void setCursorPosition(int position) {
		lastCursorPos = curCursorPos;
		curCursorPos = position;
		new Thread(cursorPosRunnable).start();//開一個執行緒,用於滾動tab
	}</span>
<span style="font-size:14px;"><span style="white-space:pre">	</span>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();
				}
			}
		};</span>
<span style="font-size:14px;"><span style="white-space:pre">		</span>//接收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;
				}
				
			};
		};</span>

具體看下載原始碼看看 http://download.csdn.net/detail/zhangjm_123/7902245