Android實現網易新聞客戶端側滑選單(2)

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

前面已經講過通過三方開源庫SlideMenu來實現這種效果,請參考Android實現網易新聞客戶端側滑選單(一)

今天通過自定義View來實現這種功能。

程式碼如下:

SlideMenu.java


package com.jackie.slidemenu.view; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.ViewConfiguration; 
import android.view.ViewGroup; 
import android.widget.Scroller; 
public class SlideMenu extends ViewGroup { 
private int mMostRecentX;  // 最後一次x軸的偏移量 
private final int MENU_SCREEN = 0;  // 選單介面 
private final int MAIN_SCREEN = 1;  // 主介面 
private int mCurrentScreen = MAIN_SCREEN;  // 當前螢幕顯示的是主介面 
private Scroller mScroller; 
private int touchSlop; 
public SlideMenu(Context context, AttributeSet attrs) { 
super(context, attrs); 
mScroller = new Scroller(context); 
touchSlop = ViewConfiguration.get(context).getScaledTouchSlop(); 
} 
/** 
* 測量出所有子佈局的寬和高 
*/ 
@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
measureView(widthMeasureSpec, heightMeasureSpec); 
} 
/** 
* 測量所有子佈局的寬和高 
* @param widthMeasureSpec 父佈局也就是ViewGroup的寬度測量規格 
* @param heightMeasureSpec 父佈局也就是ViewGroup的高度測量規格 
*/ 
private void measureView(int widthMeasureSpec, int heightMeasureSpec) { 
// 測量選單的寬和高 
View menuView = getChildAt(0); 
menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec); 
// 測量主介面的寬和高 
View mainView = getChildAt(1); 
mainView.measure(widthMeasureSpec, heightMeasureSpec);  // 主介面的寬和高和父控制元件viewgroup的寬高一樣 
} 
@Override 
protected void onLayout(boolean changed, int l, int t, int r, int b) { 
// 佈置選單的位置 
View menuView = getChildAt(0); 
menuView.layout(-menuView.getMeasuredWidth(), 0, 0, b); 
// 佈置主介面的位置 
View mainView = getChildAt(1); 
mainView.layout(0, 0, r, b); 
} 
@Override 
public boolean onTouchEvent(MotionEvent event) { 
switch (event.getAction()) { 
case MotionEvent.ACTION_DOWN: 
mMostRecentX = (int) event.getX(); 
break; 
case MotionEvent.ACTION_MOVE: 
// 最新的x軸偏移量 
int moveX = (int) event.getX(); 
// 增量值 
int deltaX = mMostRecentX - moveX; 
// 把最新的x軸偏移量賦值給成員變數 
mMostRecentX = moveX; 
// 得到x軸移動後的偏移量 
int newScrollX = getScrollX()   deltaX; 
if(newScrollX < -getChildAt(0).getWidth()) {  // 當前螢幕x軸的偏移量超過了選單的左邊界 
// 回到選單的左邊界位置 
scrollTo(-getChildAt(0).getWidth(), 0); 
} else if(newScrollX > 0) {  // 超過了主介面的右邊界 
// 回到主介面的右邊界 
scrollTo(0, 0); 
} else { 
scrollBy(deltaX, 0); 
} 
break; 
case MotionEvent.ACTION_UP: 
int scrollX = getScrollX();  // x軸最新的偏移量 
int menuXCenter = -getChildAt(0).getWidth() / 2;  // 選單x軸的中心點 
if(scrollX > menuXCenter) { // 切換到主介面 
mCurrentScreen = MAIN_SCREEN; 
} else { // 切換到選單介面 
mCurrentScreen = MENU_SCREEN; 
} 
switchScreen(); 
break; 
default: 
break; 
} 
return true; 
} 
/** 
* 根據mCurrentScreen切換螢幕 
*/ 
private void switchScreen() { 
int scrollX = getScrollX(); // 當前x軸的偏移量 
int dx = 0; 
if(mCurrentScreen == MAIN_SCREEN) { // 切換到主介面 
//   scrollTo(0, 0); 
dx = 0 - scrollX; 
} else if(mCurrentScreen == MENU_SCREEN) { // 切換到選單介面 
//   scrollTo(-getChildAt(0).getWidth(), 0); 
dx = -getChildAt(0).getWidth() - scrollX; 
} 
mScroller.startScroll(scrollX, 0, dx, 0, Math.abs(dx) * 5); 
invalidate();  // invalidate -> drawChild -> child.draw -> computeScroll 
} 
/** 
* invalidate出發此方法, 更新螢幕的x軸的偏移量 
*/ 
@Override 
public void computeScroll() { 
if(mScroller.computeScrollOffset()) {  // 判斷是否正在模擬資料中, true 正在進行 false 資料模擬完畢 
scrollTo(mScroller.getCurrX(), 0); 
invalidate();  // 引起computeScroll的呼叫 
} 
} 
/** 
* 是否顯示選單 
* @return 
*/ 
public boolean isShowMenu() { 
return mCurrentScreen == MENU_SCREEN; 
} 
/** 
* 隱藏選單 
*/ 
public void hideMenu() { 
mCurrentScreen = MAIN_SCREEN; 
switchScreen(); 
} 
/** 
* 顯示選單 
*/ 
public void showMenu() { 
mCurrentScreen = MENU_SCREEN; 
switchScreen(); 
} 
/** 
* 攔截事件的方法 
*/ 
@Override 
public boolean onInterceptTouchEvent(MotionEvent ev) { 
switch (ev.getAction()) { 
case MotionEvent.ACTION_DOWN: 
mMostRecentX = (int) ev.getX(); 
break; 
case MotionEvent.ACTION_MOVE: 
int diffX = (int) (ev.getX() - mMostRecentX); 
if(Math.abs(diffX) > touchSlop) { 
return true; 
} 
break; 
default: 
break; 
} 
return super.onInterceptTouchEvent(ev); 
} 
} 

MainActivity.java


package com.jackie.slidemenu; 
import com.jackie.slidemenu.view.SlideMenu; 
import android.os.Bundle; 
import android.app.Activity; 
import android.view.Menu; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.Window; 
import android.widget.TextView; 
import android.widget.Toast; 
public class MainActivity extends Activity implements OnClickListener { 
private SlideMenu mSlideMenu; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
// 去除標題, 需要在setContentView之前呼叫 
requestWindowFeature(Window.FEATURE_NO_TITLE); 
setContentView(R.layout.activity_main); 
mSlideMenu = (SlideMenu) findViewById(R.id.slidemenu); 
findViewById(R.id.iv_slidemenu_main_back).setOnClickListener(this); 
} 
@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 
} 
@Override 
public void onClick(View v) { 
if(mSlideMenu.isShowMenu()) { 
mSlideMenu.hideMenu(); 
} else { 
mSlideMenu.showMenu(); 
} 
} 
public void click(View v) { 
TextView tv = (TextView) v; 
Toast.makeText(this, tv.getText(), 0).show(); 
} 
}

系列文章:

Android實現網易新聞客戶端效果

Android實現網易新聞客戶端側滑選單(1)

相關文章

Android 開發 最新文章