Android 安卓 fragment+viewpager 仿qq介面 實現點選選單切換介面+滑動切換viewpager切換介面
阿新 • • 發佈:2018-12-31
原始碼地址 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