Android自訂群組件系列【15】——四個方向滑動的菜單實現，android自訂

Android自訂群組件系列【15】——四個方向滑動的菜單實現，android自訂

今天無意中實現了一個四個方向滑動的菜單，感覺挺好玩，滑動起來很順手，目前還沒有見過這樣的應用，以後能不能在應用中出現或者說有沒有實用價值就不好說了，既然已經做出來了就貼出來讓大家也玩弄一下，說不定對你有所啟發。

一、效果示範

（說明：目前沒有安裝Android模擬器，製作的動態圖片太卡了，就貼一下靜態圖片吧，實際效果可以下載原始碼查看）

(向上滑動）

（向下滑動）

（向左滑動）

（向右滑動）

二、實現過程介紹

1、放置5個View (分別是上下左右中）

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {mTopView.layout(0, -mViewHeight, mViewWidth, 0);mBottomView.layout(0, mViewHeight, mViewWidth, 2 * mViewHeight);mCenterView.layout(0, 0, mViewWidth, mViewHeight);mLeftView.layout(-mViewWidth, 0, 0, mViewHeight);mRightView.layout(mViewWidth, 0, 2 * mViewWidth, mViewHeight);}

轉載請說明出處：http://blog.csdn.net/dawanganban

2、通過onTouchEvent事件來判斷移動方向

private float mDownY;private float mDownX;@Overridepublic boolean onTouchEvent(MotionEvent event) {int disY;int disX;float eventY = event.getY();float eventX = event.getX();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownY = eventY;mDownX = eventX;break;case MotionEvent.ACTION_UP:disY = (int)(eventY - mDownY);disX = (int)(eventX - mDownX);if(Math.abs(disY) > Math.abs(disX)){if(Math.abs(disY) > MIN_VIEW_HEIGHT / 2){if(disY > 0){ //向下滑動Log.d(TAG, "TO_BOTTOM");changeToBottom();}else{  //向上滑動Log.d(TAG, "TO_TOP");changeToTop();}}}else{if(Math.abs(disX) > MIN_VIEW_WIDTH / 2){if(disX > 0){ //向右滑動Log.d(TAG, "TO_RIGHT");changeToRight();}else{  //向左滑動Log.d(TAG, "TO_LEFT");changeToLeft();}}}break;default:break;}return true;}

3、通過computerScroll()方法實現平滑移動

@Overridepublic void computeScroll() {super.computeScroll();if(mScroller.computeScrollOffset()){scrollTo(mScroller.getCurrX(), mScroller.getCurrY());postInvalidate();}}

4、判斷臨界條件（否則會一直向一個方向滑動）

int[] location = new int[2];mCenterView.getLocationOnScreen(location);if(location[1] >= mViewHeight - MIN_VIEW_HEIGHT * 2) return;

例如上面代碼就是判斷向下滑動的臨界條件，location[1]代表中間View的y座標（相對於螢幕）。

三、整個View的源碼

package com.example.testmx4update;import android.content.Context;import android.graphics.Color;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.widget.Scroller;/** * 自訂可以拖動的View * @author 陽光小強  http://blog.csdn.net/dawanganban * */public class MyCanPullView extends ViewGroup{private static final int MIN_VIEW_HEIGHT = 200;private static final int MIN_VIEW_WIDTH = 400;private static final String TAG = "TEST";private int mViewHeight;private int mViewWidth;private View mTopView;private View mBottomView;private View mCenterView;private View mLeftView;private View mRightView;private Scroller mScroller;public MyCanPullView(Context context, AttributeSet attrs) {super(context, attrs);initView(context);mScroller = new Scroller(context);}private void initView(Context context) {setTopView(context);setBottomView(context);setCenterView(context);setLeftView(context);setRightView(context);}private float mDownY;private float mDownX;@Overridepublic boolean onTouchEvent(MotionEvent event) {int disY;int disX;float eventY = event.getY();float eventX = event.getX();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownY = eventY;mDownX = eventX;break;case MotionEvent.ACTION_UP:disY = (int)(eventY - mDownY);disX = (int)(eventX - mDownX);if(Math.abs(disY) > Math.abs(disX)){if(Math.abs(disY) > MIN_VIEW_HEIGHT / 2){if(disY > 0){ //向下滑動Log.d(TAG, "TO_BOTTOM");changeToBottom();}else{  //向上滑動Log.d(TAG, "TO_TOP");changeToTop();}}}else{if(Math.abs(disX) > MIN_VIEW_WIDTH / 2){if(disX > 0){ //向右滑動Log.d(TAG, "TO_RIGHT");changeToRight();}else{  //向左滑動Log.d(TAG, "TO_LEFT");changeToLeft();}}}break;default:break;}return true;}private void changeToBottom(){int[] location = new int[2];mCenterView.getLocationOnScreen(location);if(location[1] >= mViewHeight - MIN_VIEW_HEIGHT * 2) return;int dy = (int)(mViewHeight - MIN_VIEW_HEIGHT);mScroller.startScroll(0, getScrollY(), 0, -dy, 500);invalidate();}private void changeToTop(){int[] location = new int[2];mTopView.getLocationOnScreen(location);if(location[1] <= -mViewHeight - MIN_VIEW_HEIGHT / 2) return;int dy = (int)(mViewHeight - MIN_VIEW_HEIGHT);mScroller.startScroll(0, getScrollY(), 0, dy, 500);invalidate();}private void changeToRight(){int[] location = new int[2];mCenterView.getLocationOnScreen(location);if(location[0] >= mViewWidth - MIN_VIEW_WIDTH * 2) return;int dx = (int)(mViewWidth - MIN_VIEW_WIDTH);mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);invalidate();}private void changeToLeft(){Log.d(TAG, "TO_LEFT");int[] location = new int[2];mLeftView.getLocationOnScreen(location);if(location[0] <= -mViewWidth - MIN_VIEW_WIDTH / 2) return;int dx = (int)(mViewWidth - MIN_VIEW_WIDTH);mScroller.startScroll(getScrollX(), 0, dx, 0, 500);invalidate();}@Overridepublic void computeScroll() {super.computeScroll();if(mScroller.computeScrollOffset()){scrollTo(mScroller.getCurrX(), mScroller.getCurrY());postInvalidate();}}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {mTopView.layout(0, -mViewHeight, mViewWidth, 0);mBottomView.layout(0, mViewHeight, mViewWidth, 2 * mViewHeight);mCenterView.layout(0, 0, mViewWidth, mViewHeight);mLeftView.layout(-mViewWidth, 0, 0, mViewHeight);mRightView.layout(mViewWidth, 0, 2 * mViewWidth, mViewHeight);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//擷取整個View的寬高mViewWidth = MeasureSpec.getSize(widthMeasureSpec);mViewHeight = MeasureSpec.getSize(heightMeasureSpec);}private void setTopView(Context context){View topButton = new View(context);topButton.setBackgroundColor(Color.RED);mTopView = topButton;this.addView(mTopView);}private void setBottomView(Context context){View bottomButton = new View(context);bottomButton.setBackgroundColor(Color.GREEN);mBottomView = bottomButton;this.addView(mBottomView);}private void setCenterView(Context context){View centerButton = new View(context);centerButton.setBackgroundColor(Color.WHITE);mCenterView = centerButton;this.addView(mCenterView);}private void setLeftView(Context context){View leftButton = new View(context);leftButton.setBackgroundColor(Color.BLUE);mLeftView = leftButton;this.addView(mLeftView);}private void setRightView(Context context){View rightButton = new View(context);rightButton.setBackgroundColor(Color.YELLOW);mRightView = rightButton;this.addView(mRightView);}}

擷取全部原始碼，請加群在群共用中擷取（142979499）