原始碼地址 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>