Android UI开发第二十七篇——实现左右划出菜单
年前就想写左右滑动菜单，苦于没有时间，一直拖到现在，这篇代码实现参考了网上流行的SlidingMenu，使用的FrameLayout布局，不是扩展的HorizontalScrollView。 程序中自定义了菜单view：SlidingView，继承自ViewGroup，使用FrameLayout布局。重写了onInterceptTouchEvent(MotionEvent ev)方法实现ontouch的分发拦截，重写了onTouchEvent(MotionEvent ev)方法，实现左右滑动。 public class SlidingView extends ViewGroup { private FrameLayout mContainer; private Scroller mScroller; private VelocityTracker mVelocityTracker; private int mTouchSlop; private float mLastMotionX; private float mLastMotionY; private static final int SNAP_VELOCITY = 1000; private View mLeftView; private View mRightView; public SlidingView(Context context) { super(context); init(); } public SlidingView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SlidingView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mContainer.measure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int width = r - l; final int height = b - t; mContainer.layout(0, 0, width, height); } private void init() { mContainer = new FrameLayout(getContext()); mContainer.setBackgroundColor(0xff000000); mScroller = new Scroller(getContext()); mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); super.addView(mContainer); } public void setView(View v) { if (mContainer.getChildCount() > 0) { mContainer.removeAllViews(); } mContainer.addView(v); } @Override public void scrollTo(int x, int y) { super.scrollTo(x, y); postInvalidate(); } @Override public void computeScroll() { if (!mScroller.isFinished()) { if (mScroller.computeScrollOffset()) { int oldX = getScrollX(); int oldY = getScrollY(); int x = mScroller.getCurrX(); int y = mScroller.getCurrY(); if (oldX != x || oldY != y) { scrollTo(x, y); } // Keep on drawing until the animation has finished. invalidate(); } else { clearChildrenCache(); } } else { clearChildrenCache(); } } private boolean mIsBeingDragged; /** * 实现了ontouch的分发拦截 */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { final int action = ev.getAction(); final float x = ev.getX(); final float y = ev.getY(); switch (action) { case MotionEvent.ACTION_DOWN: mLastMotionX = x; mLastMotionY = y; mIsBeingDragged = false; break; case MotionEvent.ACTION_MOVE: final float dx = x - mLastMotionX; final float xDiff = Math.abs(dx); final float yDiff = Math.abs(y - mLastMotionY); if (xDiff > mTouchSlop && xDiff > yDiff) { mIsBeingDragged = true; mLastMotionX = x; } Log.d("Sliding", "SlidingView_Touch:"+x+"|"+y); Log.d("Sliding", "SlidingView_Touch:"+xDiff+"|"+mTouchSlop+"|"+yDiff+"|"+mLastMotionY); Log.d("Sliding", "SlidingView_Touch:"+mIsBeingDragged); break; } return mIsBeingDragged; } @Override public boolean onTouchEvent(MotionEvent ev) { if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(ev); final int action = ev.getAction(); final float x = ev.getX(); final float y = ev.getY(); switch (action) { case MotionEvent.ACTION_DOWN: if (!mScroller.isFinished()) { mScroller.abortAnimation(); } mLastMotionX = x; mLastMotionY = y; if (getScrollX() == -getLeftMenuWidth() && mLastMotionX < getLeftMenuWidth()) { return false; } if (getScrollX() == getRightMenuWidth() && mLastMotionX > getLeftMenuWidth()) { return false; } break; case MotionEvent.ACTION_MOVE: if (mIsBeingDragged) { enableChildrenCache(); final float deltaX = mLastMotionX - x; mLastMotionX = x; float oldScrollX = getScrollX(); float scrollX = oldScrollX + deltaX; if (deltaX < 0 && oldScrollX < 0) { // left view final float leftBound = 0; final float rightBound = -getLeftMenuWidth(); if (scrollX > leftBound) { scrollX = leftBound; } else if (scrollX < rightBound) { scrollX = rightBound; } } else if (deltaX > 0 && oldScrollX > 0) { // right view final float rightBound = getRightMenuWidth(); final float leftBound = 0; if (scrollX < leftBound) { scrollX = leftBound; } else if (scrollX > rightBound) { scrollX = rightBound; } } scrollTo((int) scrollX, getScrollY()); if (scrollX > 0) { mLeftView.setVisibility(View.GONE); mLeftView.clearFocus(); mRightView.setVisibility(View.VISIBLE); mRightView.requestFocus(); } else { mLeftView.setVisibility(View.VISIBLE); mLeftView.requestFocus(); mRightView.setVisibility(View.GONE); mRightView.clearFocus(); } } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: if (mIsBeingDragged) { final VelocityTracker velocityTracker = mVelocityTracker; velocityTracker.computeCurrentVelocity(1000); int velocityX = (int) velocityTracker.getXVelocity(); velocityX = 0; int oldScrollX = getScrollX(); int dx = 0; if (oldScrollX < 0) { // 左边 if (oldScrollX < -getLeftMenuWidth() / 2 || velocityX > SNAP_VELOCITY) { // 左侧页面划出 dx = -getLeftMenuWidth() - oldScrollX; } else if (oldScrollX >= -getLeftMenuWidth() / 2 || velocityX < -SNAP_VELOCITY) { // 左侧页面关闭 dx = -oldScrollX; } } else { // 右边 if (oldScrollX > getRightMenuWidth() / 2 || velocityX < -SNAP_VELOCITY) { // 右侧页面划出 dx = getRightMenuWidth() - oldScrollX; } else if (oldScrollX <= getRightMenuWidth() / 2 || velocityX > SNAP_VELOCITY) { // 右侧页面关闭 dx = -oldScrollX; } } smoothScrollTo(dx); clearChildrenCache(); } break; } if (mVelocityTracker != null) { mVelocityTracker.recycle(); mVelocityTracker = null; } return true; } private int getLeftMenuWidth() { if (mLeftView == null) { return 0; } return mLeftView.getWidth(); } private int getRightMenuWidth() { if (mRightView == null) { return 0; } return mRightView.getWidth(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); } public View getRightView() { return mRightView; } public void setRightView(View mRightView) { this.mRightView = mRightView; } public View getMenuView() { return mLeftView; } public void setLeftView(View mLeftView) { this.mLeftView = mLeftView; } void toggle() { int menuWidth = mLeftView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == 0) { smoothScrollTo(-menuWidth); } else if (oldScrollX == -menuWidth) { smoothScrollTo(menuWidth); } } /** * 打开（关闭）左侧页面 */ public void showLeftView() { mLeftView.setVisibility(View.VISIBLE); mRightView.setVisibility(View.GONE); int menuWidth = mLeftView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == 0) { smoothScrollTo(-menuWidth); } else if (oldScrollX == -menuWidth) { smoothScrollTo(menuWidth); } } /** * 打开（关闭）右侧页面 */ public void showRightView() { mLeftView.setVisibility(View.GONE); mLeftView.clearFocus(); mRightView.setVisibility(View.VISIBLE); mRightView.requestFocus(); int menuWidth = mRightView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == 0) { smoothScrollTo(menuWidth); } else if (oldScrollX == menuWidth) { smoothScrollTo(-menuWidth); } } /** * 显示中间页面 */ public void showCenterView() { int menuWidth = mRightView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == menuWidth) { showRightView(); } else if (oldScrollX == -menuWidth) { showLeftView(); } } void smoothScrollTo(int dx) { int duration = 500; int oldScrollX = getScrollX(); mScroller.startScroll(oldScrollX, getScrollY(), dx, getScrollY(), duration); invalidate(); } void enableChildrenCache() { final int count = getChildCount(); for (int i = 0; i < count; i++) { final View layout = (View) getChildAt(i); layout.setDrawingCacheEnabled(true); } } void clearChildrenCache() { final int count = getChildCount(); for (int i = 0; i < count; i++) { final View layout = (View) getChildAt(i); layout.setDrawingCacheEnabled(false); } } } SlidingMenu对SlidingView做了进一步封装处理： public class SlidingMenu extends RelativeLayout { private SlidingView mSlidingView; private View mLeftView; private View mRightView; // menu width private int alignScreenWidth; public SlidingMenu(Context context) { super(context); } public SlidingMenu(Context context, AttributeSet attrs) { super(context, attrs); } public SlidingMenu(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public void setAlignScreenWidth(int alignScreenWidth) { this.alignScreenWidth = alignScreenWidth; } public void setLeftView(View view) { LayoutParams behindParams = new LayoutParams(alignScreenWidth, LayoutParams.MATCH_PARENT); addView(view, behindParams); mLeftView = view; } public void setRightView(View view) { LayoutParams behindParams = new LayoutParams(alignScreenWidth, LayoutParams.MATCH_PARENT); behindParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); addView(view, behindParams); mRightView = view; } public void setCenterView(View view) { LayoutParams aboveParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); mSlidingView = new SlidingView(getContext()); addView(mSlidingView, aboveParams); mSlidingView.setView(view); mSlidingView.invalidate(); mSlidingView.setLeftView(mLeftView); mSlidingView.setRightView(mRightView); } public void showLeftView() { mSlidingView.showLeftView(); } public void showRightView() { mSlidingView.showRightView(); } public void showCenterView() { mSlidingView.showCenterView(); } } SlidingMenu的使用代码 public class SlidingActivity extends Activity implements OnClickListener{ SlidingMenu mSlidingMenu; @Override protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.main); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); mSlidingMenu = (SlidingMenu) findViewById(R.id.slidingMenu); mSlidingMenu.setAlignScreenWidth((dm.widthPixels / 5) * 2); View leftView=getLayoutInflater().inflate(R.layout.left_menu, null); View rightView=getLayoutInflater().inflate(R.layout.right_menu, null); View centerView=getLayoutInflater().inflate(R.layout.center, null); mSlidingMenu.setLeftView(leftView); mSlidingMenu.setRightView(rightView); mSlidingMenu.setCenterView(centerView); Button showLeftMenu=(Button)centerView.findViewById(R.id.center_left_btn); showLeftMenu.setOnClickListener(this); Button showRightMenu=(Button)centerView.findViewById(R.id.center_right_btn); showRightMenu.setOnClickListener(this); } @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.center_left_btn: mSlidingMenu.showLeftView(); break; case R.id.center_right_btn: mSlidingMenu.showRightView(); break; default: break; } } } 代码：http://download.csdn.net/detail/xyz_lmn/5109965 本文转自xyz_lmn51CTO博客，原文链接：http://blog.51cto.com/xyzlmn/1230751，如需转载请自行联系原作者
