Android自定义组件——四个方向滑动的菜单实现

今天无意中实现了一个四个方向滑动的菜单，感觉挺好玩，滑动起来很顺手，既然已经做出来了就贴出来让大家也玩弄一下。

一、效果演示

（说明：目前没有安装Android模拟器，制作的动态图片太卡了，就贴一下静态图片吧，实际效果可以下载源代码查看）

(向上滑动）

（向下滑动）

（向左滑动）

（向右滑动）

二、实现过程介绍

1、放置5个View (分别是上下左右中）

 

  1. @Override  
  2. protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  3.     mTopView.layout(0, -mViewHeight, mViewWidth, 0);  
  4.     mBottomView.layout(0, mViewHeight, mViewWidth, 2 * mViewHeight);  
  5.     mCenterView.layout(0, 0, mViewWidth, mViewHeight);  
  6.     mLeftView.layout(-mViewWidth, 0, 0, mViewHeight);  
  7.     mRightView.layout(mViewWidth, 0, 2 * mViewWidth, mViewHeight);  
  8. }  

 

转载请说明出处：http://blog.csdn.net/dawanganban

2、通过onTouchEvent事件来判断移动方向

 

  1. private float mDownY;  
  2. private float mDownX;  
  3. @Override  
  4. public boolean onTouchEvent(MotionEvent event) {  
  5.     int disY;  
  6.     int disX;  
  7.     float eventY = event.getY();  
  8.     float eventX = event.getX();  
  9.     switch (event.getAction()) {  
  10.     case MotionEvent.ACTION_DOWN:  
  11.         mDownY = eventY;      
  12.         mDownX = eventX;  
  13.         break;  
  14.     case MotionEvent.ACTION_UP:  
  15.         disY = (int)(eventY - mDownY);  
  16.         disX = (int)(eventX - mDownX);  
  17.         if(Math.abs(disY) > Math.abs(disX)){  
  18.             if(Math.abs(disY) > MIN_VIEW_HEIGHT / 2){  
  19.                 if(disY > 0){ //向下滑动  
  20.                     Log.d(TAG, "TO_BOTTOM");  
  21.                     changeToBottom();  
  22.                 }else{        //向上滑动  
  23.                     Log.d(TAG, "TO_TOP");  
  24.                     changeToTop();  
  25.                 }  
  26.             }  
  27.         }else{  
  28.             if(Math.abs(disX) > MIN_VIEW_WIDTH / 2){  
  29.                 if(disX > 0){ //向右滑动  
  30.                     Log.d(TAG, "TO_RIGHT");  
  31.                     changeToRight();  
  32.                 }else{        //向左滑动  
  33.                     Log.d(TAG, "TO_LEFT");  
  34.                     changeToLeft();  
  35.                 }  
  36.             }  
  37.         }  
  38.         break;  
  39.   
  40.     default:  
  41.         break;  
  42.     }  
  43.     return true;  
  44. }  

3、通过computerScroll()方法实现平滑移动

 

 

  1. @Override  
  2. public void computeScroll() {  
  3.     super.computeScroll();  
  4.     if(mScroller.computeScrollOffset()){  
  5.         scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
  6.         postInvalidate();  
  7.     }  
  8. }  

4、判断临界条件（否则会一直向一个方向滑动）

 

 

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

例如上面代码就是判断向下滑动的临界条件，location[1]代表中间View的y坐标（相对于屏幕）。

 

 

三、整个View的源码

  1. package com.example.testmx4update;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Color;  
  5. import android.util.AttributeSet;  
  6. import android.util.Log;  
  7. import android.view.MotionEvent;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.Scroller;  
  11.   
  12. /** 
  13.  * 自定义可以拖动的View 
  14.  * @author 阳光小强  http://blog.csdn.net/dawanganban 
  15.  * 
  16.  */  
  17. public class MyCanPullView extends ViewGroup{  
  18.       
  19.     private static final int MIN_VIEW_HEIGHT = 200;  
  20.     private static final int MIN_VIEW_WIDTH = 400;  
  21.   
  22.   
  23.     private static final String TAG = "TEST";  
  24.       
  25.       
  26.     private int mViewHeight;  
  27.     private int mViewWidth;  
  28.       
  29.     private View mTopView;  
  30.     private View mBottomView;  
  31.     private View mCenterView;  
  32.     private View mLeftView;  
  33.     private View mRightView;  
  34.       
  35.       
  36.       
  37.     private Scroller mScroller;  
  38.   
  39.     public MyCanPullView(Context context, AttributeSet attrs) {  
  40.         super(context, attrs);  
  41.           
  42.         initView(context);  
  43.           
  44.         mScroller = new Scroller(context);  
  45.     }  
  46.   
  47.     private void initView(Context context) {  
  48.         setTopView(context);  
  49.         setBottomView(context);  
  50.         setCenterView(context);  
  51.         setLeftView(context);  
  52.         setRightView(context);  
  53.     }  
  54.       
  55.       
  56.     private float mDownY;  
  57.     private float mDownX;  
  58.     @Override  
  59.     public boolean onTouchEvent(MotionEvent event) {  
  60.         int disY;  
  61.         int disX;  
  62.         float eventY = event.getY();  
  63.         float eventX = event.getX();  
  64.         switch (event.getAction()) {  
  65.         case MotionEvent.ACTION_DOWN:  
  66.             mDownY = eventY;      
  67.             mDownX = eventX;  
  68.             break;  
  69.         case MotionEvent.ACTION_UP:  
  70.             disY = (int)(eventY - mDownY);  
  71.             disX = (int)(eventX - mDownX);  
  72.             if(Math.abs(disY) > Math.abs(disX)){  
  73.                 if(Math.abs(disY) > MIN_VIEW_HEIGHT / 2){  
  74.                     if(disY > 0){ //向下滑动  
  75.                         Log.d(TAG, "TO_BOTTOM");  
  76.                         changeToBottom();  
  77.                     }else{        //向上滑动  
  78.                         Log.d(TAG, "TO_TOP");  
  79.                         changeToTop();  
  80.                     }  
  81.                 }  
  82.             }else{  
  83.                 if(Math.abs(disX) > MIN_VIEW_WIDTH / 2){  
  84.                     if(disX > 0){ //向右滑动  
  85.                         Log.d(TAG, "TO_RIGHT");  
  86.                         changeToRight();  
  87.                     }else{        //向左滑动  
  88.                         Log.d(TAG, "TO_LEFT");  
  89.                         changeToLeft();  
  90.                     }  
  91.                 }  
  92.             }  
  93.             break;  
  94.   
  95.         default:  
  96.             break;  
  97.         }  
  98.         return true;  
  99.     }  
  100.       
  101.     private void changeToBottom(){  
  102.         int[] location = new int[2];  
  103.         mCenterView.getLocationOnScreen(location);  
  104.         if(location[1] >= mViewHeight - MIN_VIEW_HEIGHT * 2) return;  
  105.         int dy = (int)(mViewHeight - MIN_VIEW_HEIGHT);  
  106.         mScroller.startScroll(0, getScrollY(), 0, -dy, 500);  
  107.         invalidate();  
  108.     }  
  109.       
  110.     private void changeToTop(){  
  111.         int[] location = new int[2];  
  112.         mTopView.getLocationOnScreen(location);  
  113.         if(location[1] <= -mViewHeight - MIN_VIEW_HEIGHT / 2) return;  
  114.         int dy = (int)(mViewHeight - MIN_VIEW_HEIGHT);  
  115.         mScroller.startScroll(0, getScrollY(), 0, dy, 500);  
  116.         invalidate();  
  117.     }  
  118.       
  119.     private void changeToRight(){  
  120.         int[] location = new int[2];  
  121.         mCenterView.getLocationOnScreen(location);  
  122.         if(location[0] >= mViewWidth - MIN_VIEW_WIDTH * 2) return;  
  123.         int dx = (int)(mViewWidth - MIN_VIEW_WIDTH);  
  124.         mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);  
  125.         invalidate();  
  126.     }  
  127.       
  128.     private void changeToLeft(){  
  129.         Log.d(TAG, "TO_LEFT");  
  130.         int[] location = new int[2];  
  131.         mLeftView.getLocationOnScreen(location);  
  132.         if(location[0] <= -mViewWidth - MIN_VIEW_WIDTH / 2) return;  
  133.         int dx = (int)(mViewWidth - MIN_VIEW_WIDTH);  
  134.         mScroller.startScroll(getScrollX(), 0, dx, 0, 500);  
  135.         invalidate();  
  136.     }  
  137.       
  138.     @Override  
  139.     public void computeScroll() {  
  140.         super.computeScroll();  
  141.         if(mScroller.computeScrollOffset()){  
  142.             scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
  143.             postInvalidate();  
  144.         }  
  145.     }  
  146.   
  147.     @Override  
  148.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  149.         mTopView.layout(0, -mViewHeight, mViewWidth, 0);  
  150.         mBottomView.layout(0, mViewHeight, mViewWidth, 2 * mViewHeight);  
  151.         mCenterView.layout(0, 0, mViewWidth, mViewHeight);  
  152.         mLeftView.layout(-mViewWidth, 0, 0, mViewHeight);  
  153.         mRightView.layout(mViewWidth, 0, 2 * mViewWidth, mViewHeight);  
  154.     }  
  155.   
  156.     @Override  
  157.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  158.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  159.         //获取整个View的宽高  
  160.         mViewWidth = MeasureSpec.getSize(widthMeasureSpec);  
  161.         mViewHeight = MeasureSpec.getSize(heightMeasureSpec);  
  162.     }  
  163.       
  164.     private void setTopView(Context context){  
  165.         View topButton = new View(context);  
  166.         topButton.setBackgroundColor(Color.RED);  
  167.         mTopView = topButton;  
  168.         this.addView(mTopView);  
  169.     }  
  170.       
  171.     private void setBottomView(Context context){  
  172.         View bottomButton = new View(context);  
  173.         bottomButton.setBackgroundColor(Color.GREEN);  
  174.         mBottomView = bottomButton;  
  175.         this.addView(mBottomView);  
  176.     }  
  177.       
  178.     private void setCenterView(Context context){  
  179.         View centerButton = new View(context);  
  180.         centerButton.setBackgroundColor(Color.WHITE);  
  181.         mCenterView = centerButton;  
  182.         this.addView(mCenterView);  
  183.     }  
  184.       
  185.     private void setLeftView(Context context){  
  186.         View leftButton = new View(context);  
  187.         leftButton.setBackgroundColor(Color.BLUE);  
  188.         mLeftView = leftButton;  
  189.         this.addView(mLeftView);  
  190.     }  
  191.       
  192.     private void setRightView(Context context){  
  193.         View rightButton = new View(context);  
  194.         rightButton.setBackgroundColor(Color.YELLOW);  
  195.         mRightView = rightButton;  
  196.         this.addView(mRightView);  
  197.     }  
  198. }  

获取全部源代码，请加群在群共享中获取（142979499）

posted on 2015-01-25 21:43  Yudar  阅读(735)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 Yudar
Powered by .NET 9.0 on Kubernetes