码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2015-01-25 22:23:21      阅读：333      评论：0      收藏：0      [点我收藏+]

标签：

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

一、效果演示

（说明：目前没有安装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）

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

标签：

原文地址：http://www.cnblogs.com/yudar/p/4249025.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！