Android UI 之SlidingMenu实现方法（一）

    SlidingMenu的实现方法有很多，今天先来分享一种方法。

主要的思路是根据手指在屏幕上的滑动情况，不断更改一个页面的LayoutParams，然后请求重绘，造成这个页面随着手指而移动的效果。

    先来看一看实现的效果：

下面具体说一说思路，其实很简单：

    我们的例子里面有两个页面，一个mainPage页面，相当于应用的主功能页面。另一个menuPage页面，就相当于是我们需要滑动呼出的菜单页面了。对照上面的gif图，mainPage相当于美女页面，menuPage就相当于是ListView所在的那个菜单页面。

    首先我们把这两个页面布局到RelativeLayout里，先布局菜单页面，设置该页面的左侧边距离屏幕左侧边一个固定的距离。然后布局美女页面，让美女页面覆盖菜单页面，后面的工作就是针对美女页面设置好监听，让美女页面能够跟随手指的坐标变化不断刷新自己的布局参数了。美女页面移动后，它覆盖的菜单页面就会显露出来。

    我们在这里的思路是通过不断改变美女页面LayoutParams的leftMargin参数来实现页面的移动，在初始状态leftMargin的值是0，如果我们要让页面向左移动，就需要设置leftMargin继续变小，这个变小的值的极限应该是 （ 菜单页面的宽度 - 菜单页面左侧到屏幕左侧的距离），配合上面的动态图应该能很容易理解。相应的，leftMargin的最大值明显是0。

    这里有一个问题要注意，我们在设置美女页面的LayoutParams 的宽度参数的时候，不能用MATCH_PARENT，因为在这种情况下这个页面会永拉伸远填充满屏幕，我们应该设置页面的宽度是屏幕的宽度。

    剩下的就是在滑动过程中抬起手指以及点击美女页面自动伸缩的处理，我们设置一个页面伸缩的速度值，然后在线程里每隔一段时间就让leftMargin变化该值，就可以实现页面的自动伸缩了。需要注意的就是伸缩方向的判断。

    好了，具体的细节大家可以来看代码，我做的注释挺详细的，相信每个人都可以看懂。

SlidingMenu类：

[java] view plaincopy

1. /** 
2.  * SlidingMenu 
3.  * @author Carrey 
4.  * 
5.  */  
6. public class SlidingMenu extends RelativeLayout   
7.         implements OnTouchListener, GestureDetector.OnGestureListener {  
8.     /** Menu页面 */  
9.     private RelativeLayout menuPage;  
10.     /** 应用的主页面 */  
11.     private RelativeLayout mainPage;  
12.     /** Menu页面不靠屏幕的那条边到屏幕边缘的距离 */  
13.     private int distanceToScreenEdge;  
14.     /** mainPage可以伸展的范围,实际上就是menuPage的宽度 */  
15.     private int maxWidth = 0;  
16.     /** 是否已经按照屏幕的宽度计算并设置了mainPage的宽度 */  
17.     private boolean hasMeasured = false;  
18.     /** 窗口Activity */  
19.     private Activity parentActivity;  
20.     /** 手势处理 */  
21.     private GestureDetector mGestureDetector;  
22.     /** 标记是否在滚动状态 */  
23.     private boolean isScrolling = false;  
24.     /** 屏幕宽度 */  
25.     private int windowWidth;  
26.     /** 自动伸缩的速度 */  
27.     private int speed = 30;  
28.     /** 一次手指滚动的动作中手指滚动的距离 */  
29.     private float mScrollX;  
30.     /** mainPage的LayoutParams */  
31.     private LayoutParams mainParam;  
32.       
33.     public SlidingMenu(Activity context) {  
34.         super(context);  
35.         this.parentActivity = context;  
36.         //设置 distanceToScreenEdge 数值是 50dp  
37.         distanceToScreenEdge = dip2px(context, 50);  
38.     }  
39.       
40.     /** 
41.      * 添加Menu页面 
42.      * @param menuPage 
43.      */  
44.     public void addMenuPage(RelativeLayout menuPage) {  
45.         this.menuPage = menuPage;  
46.     }  
47.     /** 
48.      * 添加应用的主页面 
49.      * @param mainPage 
50.      */  
51.     public void addMainPage(RelativeLayout mainPage) {  
52.         this.mainPage = mainPage;  
53.     }  
54.     /** 
55.      * 安装Menu页面和主页面,以及其他处理 
56.      */  
57.     public void setUp() {  
58.         //先得到mainPage的固定宽度，等于屏幕的宽度  
59.         windowWidth = parentActivity.getWindowManager().getDefaultDisplay().getWidth();  
60.         //重新设置两个页面的布局并添加  
61.         LayoutParams menuParam = new LayoutParams(  
62.                 LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
63.         menuParam.leftMargin = distanceToScreenEdge;  
64.         menuPage.setLayoutParams(menuParam);  
65.         this.addView(menuPage);  
66.         mainParam = new LayoutParams(  
67.                 windowWidth, LayoutParams.MATCH_PARENT);  
68.         mainPage.setLayoutParams(mainParam);  
69.         this.addView(mainPage);  
70.           
71.         mGestureDetector = new GestureDetector(parentActivity, this);  
72.         //禁止长按是因为长按一旦触发，滚动事件就不能触发了  
73.         mGestureDetector.setIsLongpressEnabled(false);  
74.           
75.         mainPage.setOnTouchListener(this);  
76.     }  
77.     /**  
78.      * 根据手机的分辨率从 dp 的单位 转成为 px(像素)  
79.      */    
80.     private int dip2px(Context context, float dpValue) {    
81.         float scale = context.getResources().getDisplayMetrics().density;  
82.         //四舍五入  
83.         return (int) (dpValue * scale + 0.5f);    
84.     }    
85.     
86.     /**  
87.      * 根据手机的分辨率从 px(像素) 的单位 转成为 dp  
88.      */    
89.     private int px2dip(Context context, float pxValue) {    
90.         final float scale = context.getResources().getDisplayMetrics().density;    
91.         return (int) (pxValue / scale + 0.5f);    
92.     }  
93.     /** ------------------OnTouchListener Methods------------------- */  
94.     @Override  
95.     public boolean onTouch(View v, MotionEvent event) {  
96.         if (!hasMeasured) {  
97.             maxWidth = menuPage.getMeasuredWidth();  
98.             hasMeasured = true;  
99.         }  
100.         //UP事件在GestureDetector里不会捕捉，所以在这里处理  
101.         if (event.getAction() == MotionEvent.ACTION_UP   
102.                 && isScrolling) {  
103.               
104.             if (mainParam.leftMargin < -windowWidth / 2) {  
105.                 new AsynMove().execute(-speed);  
106.             } else {  
107.                 new AsynMove().execute(speed);  
108.             }  
109.             isScrolling = false;  
110.         }  
111.         return mGestureDetector.onTouchEvent(event);  
112.     }  
113.     /** -------------------OnGestureListener Methods---------------------- */  
114.     @Override  
115.     public boolean onDown(MotionEvent e) {  
116.         mScrollX = 0;  
117.         isScrolling = false;  
118.         //这里要返回true,这样后面的事件才会传递进来，  
119.         //如果返回false,事件会传递给菜单页面，主页面就不能捕捉后续事件了  
120.         return true;  
121.     }  
122.   
123.     @Override  
124.     public void onShowPress(MotionEvent e) {  
125.           
126.     }  
127.   
128.     @Override  
129.     public boolean onSingleTapUp(MotionEvent e) {  
130.         if (mainParam.leftMargin >= 0) {  
131.             new AsynMove().execute(-speed);  
132.         } else {  
133.             new AsynMove().execute(speed);  
134.         }  
135.         return true;  
136.     }  
137.   
138.     @Override  
139.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
140.             float distanceY) {  
141.         isScrolling = true;  
142.         //这个distanceX是之前的坐标减去之后的坐标  
143.         //final float scrollX = mLastFocusX - focusX;  
144.         //final float scrollY = mLastFocusY - focusY;  
145.         mScrollX += distanceX;  
146.           
147.         mainParam.leftMargin -= mScrollX;  
148.         if (mainParam.leftMargin >=0) {  
149.             isScrolling = false;  
150.             mainParam.leftMargin = 0;  
151.         } else if (mainParam.leftMargin <= -maxWidth) {  
152.             isScrolling = false;  
153.             mainParam.leftMargin = -maxWidth;  
154.         }  
155.         //因为mainPage的LayoutParams改变了，所以如果请求ViewTree重新遍历mainPage一定会重绘，但是  
156.         //menuPage的布局参数没有改变，所以我们应该通过menuPage强制requestLayout()进行重绘，以避免  
157.         //绘制发生错误  
158.         menuPage.requestLayout();  
159.         return false;  
160.     }  
161.   
162.     @Override  
163.     public void onLongPress(MotionEvent e) {  
164.           
165.     }  
166.   
167.     @Override  
168.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
169.             float velocityY) {  
170.         return false;  
171.     }   
172.     /** -------------AsyncTask---------------- */  
173.     private class AsynMove extends AsyncTask<Integer, Integer, Void> {  
174.   
175.         @Override  
176.         protected Void doInBackground(Integer... params) {  
177.             int times = 0;  
178.             if (maxWidth % Math.abs(params[0]) == 0)  
179.                 times = maxWidth / Math.abs(params[0]);  
180.             else  
181.                 times = maxWidth / Math.abs(params[0]) + 1;  
182.               
183.             for (int i = 0; i < times; i++) {  
184.                 publishProgress(params[0]);  
185.                 try {  
186.                     Thread.sleep(50);  
187.                 } catch (InterruptedException e) {  
188.                     e.printStackTrace();  
189.                 }  
190.             }  
191.             return null;  
192.         }  
193.   
194.         @Override  
195.         protected void onProgressUpdate(Integer... values) {  
196.             if (values[0] > 0) {  
197.                 mainParam.leftMargin = Math.min(mainParam.leftMargin + values[0], 0);  
198.             } else {  
199.                 mainParam.leftMargin = Math.max(mainParam.leftMargin + values[0], -maxWidth);  
200.             }  
201.             //因为mainPage的LayoutParams改变了，所以如果请求ViewTree重新遍历mainPage一定会重绘，但是  
202.             //menuPage的布局参数没有改变，所以我们应该通过menuPage强制requestLayout()进行重绘，以避免  
203.             //绘制发生错误  
204.             menuPage.requestLayout();  
205.             super.onProgressUpdate(values);  
206.         }  
207.   
208.     }  
209. }  

MainActivity类

[java] view plaincopy

1. public class MainActivity extends Activity {  
2.   
3.     @Override  
4.     protected void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.         //设置全屏  
7.         getWindow().setFlags(  
8.                 WindowManager.LayoutParams.FLAG_FULLSCREEN,   
9.                 WindowManager.LayoutParams.FLAG_FULLSCREEN);  
10.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
11.           
12.         ListView menuItemList = new ListView(this);  
13.         menuItemList.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  
14.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,   
15.                 new String[]{"墨尔本","罗兰加洛斯","温布尔登","法拉盛"});  
16.         menuItemList.setAdapter(adapter);  
17.           
18.         RelativeLayout menuPage = new RelativeLayout(this);  
19.         menuPage.addView(menuItemList);  
20.         RelativeLayout mainPage = new RelativeLayout(this);  
21.         mainPage.setBackgroundResource(R.drawable.pic);  
22.           
23.         SlidingMenu slidingMenu = new SlidingMenu(this);  
24.         slidingMenu.addMenuPage(menuPage);  
25.         slidingMenu.addMainPage(mainPage);  
26.         slidingMenu.setUp();  
27.           
28.         setContentView(slidingMenu);  
29.     }  
30.   
31. }  

代码下载